feat(payment): CHECKOUT-4223 Add GiftCertificate components

src/app/giftCertificate/AppliedGiftCertificate.spec.tsx

@@ -0,0 +1,17 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import React from 'react';
+
+import { getGiftCertificate } from './giftCertificate.mock';
+import AppliedGiftCertificate from './AppliedGiftCertificate';
+
+describe('AppliedGiftCertificate', () => {
+    let component: ShallowWrapper;
+
+    beforeEach(() => {
+        component = shallow(<AppliedGiftCertificate giftCertificate={ getGiftCertificate() } />);
+    });
+
+    it('renders markup that matches snapshot', () => {
+        expect(component).toMatchSnapshot();
+    });
+});

src/app/giftCertificate/AppliedGiftCertificate.tsx

@@ -0,0 +1,36 @@
+import { GiftCertificate } from '@bigcommerce/checkout-sdk';
+import React, { FunctionComponent } from 'react';
+
+import { ShopperCurrency } from '../currency';
+import { TranslatedString } from '../language';
+
+export interface AppliedGiftCertificateProps {
+    giftCertificate: GiftCertificate;
+}
+
+const AppliedGiftCertificate: FunctionComponent<AppliedGiftCertificateProps> = ({ giftCertificate }) => (
+    <div
+        className="redeemable-column redeemable-info"
+        data-test="redeemable-item--giftCertificate"
+    >
+        <span className="redeemable-info-header">
+            <span className="redeemable-info-header--highlight" data-test="giftCertificate-amount">
+                <ShopperCurrency amount={ giftCertificate.used } />
+            </span>
+            <TranslatedString id="redeemable.gift_certificate_text" />
+        </span>
+        <span className="redeemable-info-subHeader">
+            { giftCertificate.remaining > 0 && <span className="redeemable-info-subHeader--remaining">
+                <TranslatedString id="redeemable.gift_certificate_remaining_text" />
+                <span data-test="giftCertificate-remaining">
+                    <ShopperCurrency amount={ giftCertificate.remaining } />
+                </span>
+            </span> }
+            <span data-test="giftCertificate-code">
+                { giftCertificate.code }
+            </span>
+        </span>
+    </div>
+);
+
+export default AppliedGiftCertificate;

src/app/giftCertificate/__snapshots__/AppliedGiftCertificate.spec.tsx.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppliedGiftCertificate renders markup that matches snapshot 1`] = `
+<div
+  className="redeemable-column redeemable-info"
+  data-test="redeemable-item--giftCertificate"
+>
+  <span
+    className="redeemable-info-header"
+  >
+    <span
+      className="redeemable-info-header--highlight"
+      data-test="giftCertificate-amount"
+    >
+      <WithCurrency(ShopperCurrency)
+        amount={80}
+      />
+    </span>
+    <WithLanguage(TranslatedString)
+      id="redeemable.gift_certificate_text"
+    />
+  </span>
+  <span
+    className="redeemable-info-subHeader"
+  >
+    <span
+      className="redeemable-info-subHeader--remaining"
+    >
+      <WithLanguage(TranslatedString)
+        id="redeemable.gift_certificate_remaining_text"
+      />
+      <span
+        data-test="giftCertificate-remaining"
+      >
+        <WithCurrency(ShopperCurrency)
+          amount={20}
+        />
+      </span>
+    </span>
+    <span
+      data-test="giftCertificate-code"
+    >
+      savebig2015
+    </span>
+  </span>
+</div>
+`;

src/app/giftCertificate/index.ts

@@ -0,0 +1,3 @@
+export { default as AppliedGiftCertificate } from './AppliedGiftCertificate';
+export { default as mapFromPayments } from './mapFromPayments';
+export { default as isGiftCertificatePayment } from './isGiftCertificatePayment';

src/app/giftCertificate/isGiftCertificatePayment.ts

@@ -0,0 +1,6 @@
+import { CheckoutPayment, GiftCertificateOrderPayment, OrderPayment } from '@bigcommerce/checkout-sdk';
+
+export default function isGiftCertificatePayment(payment: OrderPayment | CheckoutPayment):
+payment is GiftCertificateOrderPayment {
+    return payment.providerId === 'giftcertificate';
+}

src/app/giftCertificate/mapFromPayments.spec.ts

@@ -0,0 +1,18 @@
+import { getOrder } from '../order/orders.mock';
+
+import mapFromPayments from './mapFromPayments';
+
+describe('mapFromPayments()', () => {
+    it('returns mapped gift certificates', () => {
+        expect(mapFromPayments(getOrder().payments || []))
+            .toEqual([
+                {
+                    code: 'gc',
+                    remaining: 3,
+                    used: 7,
+                    balance: 10,
+                    purchaseDate: '',
+                },
+            ]);
+    });
+});

src/app/giftCertificate/mapFromPayments.ts

@@ -0,0 +1,15 @@
+import { GiftCertificate, OrderPayments } from '@bigcommerce/checkout-sdk';
+
+import isGiftCertificatePayment from './isGiftCertificatePayment';
+
+export default function mapFromPayments(payments: OrderPayments): GiftCertificate[] {
+    return payments
+        .filter(isGiftCertificatePayment)
+        .map(({ amount, detail }) => ({
+            code: detail.code,
+            remaining: detail.remaining,
+            used: amount,
+            balance: amount + detail.remaining,
+            purchaseDate: '',
+        }));
+}