feat(payment): INT-2484 Add additional payment method marks

bigcommerce · May 18, 2020 · 966ad52 · 966ad52
1 parent 1a2d6d7
commit 966ad52
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 2 deletions.
diff --git a/src/app/payment/creditCard/CreditCardIcon.spec.tsx b/src/app/payment/creditCard/CreditCardIcon.spec.tsx
@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { IconCardAmex, IconCardDinersClub, IconCardDiscover, IconCardJCB, IconCardMaestro, IconCardMastercard, IconCardUnionPay, IconCardVisa } from '../../ui/icon';
+import { IconCardAmex, IconCardCB, IconCardDinersClub, IconCardDiscover, IconCardJCB, IconCardMada, IconCardMaestro, IconCardMastercard, IconCardUnionPay, IconCardVisa } from '../../ui/icon';
 
 import CreditCardIcon from './CreditCardIcon';
 
@@ -46,6 +46,16 @@ describe('CreditCardIcon', () => {
             .toHaveLength(1);
     });
 
+    it('returns CB card icon', () => {
+        expect(shallow(<CreditCardIcon cardType="cb" />).find(IconCardCB))
+            .toHaveLength(1);
+    });
+
+    it('returns Mada card icon', () => {
+        expect(shallow(<CreditCardIcon cardType="mada" />).find(IconCardMada))
+            .toHaveLength(1);
+    });
+
     it('returns default card icon if nothing matches', () => {
         expect(shallow(<CreditCardIcon cardType="foobar" />).hasClass('cardIcon-icon--default'))
             .toEqual(true);

diff --git a/src/app/payment/creditCard/CreditCardIcon.tsx b/src/app/payment/creditCard/CreditCardIcon.tsx
@@ -1,6 +1,6 @@
 import React, { memo, FunctionComponent } from 'react';
 
-import { IconCardAmex, IconCardDinersClub, IconCardDiscover, IconCardJCB, IconCardMaestro, IconCardMastercard, IconCardUnionPay, IconCardVisa, IconSize } from '../../ui/icon';
+import { IconCardAmex, IconCardCB, IconCardDinersClub, IconCardDiscover, IconCardJCB, IconCardMada, IconCardMaestro, IconCardMastercard, IconCardUnionPay, IconCardVisa, IconSize } from '../../ui/icon';
 
 export interface CreditCardIconProps {
     cardType?: string;
@@ -19,6 +19,9 @@ const CreditCardIcon: FunctionComponent<CreditCardIconProps> = ({
     case 'american-express':
         return <IconCardAmex { ...iconProps } />;
 
+    case 'cb':
+        return <IconCardCB { ...iconProps } />;
+
     case 'diners-club':
         return <IconCardDinersClub { ...iconProps } />;
 
@@ -28,6 +31,9 @@ const CreditCardIcon: FunctionComponent<CreditCardIconProps> = ({
     case 'jcb':
         return <IconCardJCB { ...iconProps } />;
 
+    case 'mada':
+        return <IconCardMada { ...iconProps } />;
+
     case 'maestro':
         return <IconCardMaestro { ...iconProps } />;
 

diff --git a/src/app/payment/creditCard/CreditCardIconList.tsx b/src/app/payment/creditCard/CreditCardIconList.tsx
@@ -5,9 +5,11 @@ import CreditCardIcon from './CreditCardIcon';
 
 export const SUPPORTED_CARD_TYPES = [
     'american-express',
+    'cb',
     'diners-club',
     'discover',
     'jcb',
+    'mada',
     'maestro',
     'mastercard',
     'unionpay',

diff --git a/src/app/payment/creditCard/mapFromPaymentMethodCardType.spec.ts b/src/app/payment/creditCard/mapFromPaymentMethodCardType.spec.ts
@@ -25,6 +25,12 @@ describe('mapFromPaymentMethodCardType()', () => {
 
         expect(mapFromPaymentMethodCardType('VISA'))
             .toEqual('visa');
+
+        expect(mapFromPaymentMethodCardType('CB'))
+            .toEqual('cb');
+
+        expect(mapFromPaymentMethodCardType('MADA'))
+            .toEqual('mada');
     });
 
     it('returns undefined if unable to map type', () => {

diff --git a/src/app/payment/creditCard/mapFromPaymentMethodCardType.ts b/src/app/payment/creditCard/mapFromPaymentMethodCardType.ts
@@ -3,6 +3,9 @@ export default function mapFromPaymentMethodCardType(type: string): string | und
     case 'AMEX':
         return 'american-express';
 
+    case 'CB':
+        return 'cb';
+
     case 'DINERS':
         return 'diners-club';
 
@@ -12,6 +15,9 @@ export default function mapFromPaymentMethodCardType(type: string): string | und
     case 'JCB':
         return 'jcb';
 
+    case 'MADA':
+        return 'mada';
+
     case 'MAESTRO':
         return 'maestro';
 

diff --git a/src/app/ui/icon/IconCardCB.tsx b/src/app/ui/icon/IconCardCB.tsx
@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from 'react';
+
+import withIconContainer from './withIconContainer';
+
+const IconCardCB: FunctionComponent = () => (
+    <svg height="225" viewBox="0 0 400 225" width="400" xmlns="http://www.w3.org/2000/svg">
+        <g fillRule="evenodd">
+            <path d="M212.9 54.4c-.1 0-.2 14.7-.2 32.5v32.4h62l62-.1 2.5-.7A31.9 31.9 0 00364 86.8c0-5.8-.3-7-2.4-12.9A33.5 33.5 0 00338 55l-2.1-.5H212.9M88 55a59.2 59.2 0 00-49.4 41.7c-2.2 7.3-2.5 10-2.5 25 0 14.8.2 16.3 2 23.7a59.8 59.8 0 0047.7 43c7.5 1.2 67 1.2 74.2 0a58.9 58.9 0 0050.2-58.7l.1-6.2h-43.6l-43.7-.1v-4l43.7-.1 43.6-.1-.1-5.6a59.4 59.4 0 00-52-58.6c-5-.6-65.2-.6-70.2 0M212.8 124v64.8h60.4c64.5 0 62.5 0 66.7-1a32.6 32.6 0 00-2-63.5l-2.2-.5h-61.4c-49.4-.1-61.4 0-61.5.2" fill="#fbfbfb" />
+            <path d="M0 112.5v112.6h400V0H0v112.5m336-58.3l2.4.5c9.1 1.7 18 8.6 22.4 17.3 7 13.8 2.8 32.4-9 40.7a33.6 33.6 0 01-14.2 6.4l-2.5.5H212.6V86.7l-.1-33 61.2.2c41.8 0 61.5.1 62.3.3m-180.7.4a75 75 0 0113 2.4 56 56 0 004.2 1.4l2.2 1A61.7 61.7 0 01206.3 92a50.7 50.7 0 014 22.3v5.3l-43.6.1h-43.6v3.7h87.4l-.1 6.2a58.5 58.5 0 01-23.2 47.5l-2 1.6a62.2 62.2 0 01-29.8 10.6c-5.4.5-65.3.2-68.5-.4a63.4 63.4 0 01-22.1-8 61.3 61.3 0 01-24.1-27.4c-1-2-.7-1.6-2-5.2a82 82 0 01-3-15.7v-12.2a60.7 60.7 0 0142-63.3c3.2-1 8.5-2.1 12.8-2.5 5.7-.5 59-.5 64.8 0m181.5 69.2a32.8 32.8 0 017 62.8c-5.8 2.6-3.5 2.5-72.7 2.4h-58.5v-32.8l-.1-32.8h60.9c58.9 0 61 0 63.4.4" fill="#146c9c" />
+            <path d="M212.7 54.2a8639.4 8639.4 0 0060.5-.1h-60.5m121.4.3h.8l-.4-.1c-.4 0-.6 0-.4.1m-246 .7h.8l-.4-.1H88m69.5 0c.2.1.6.1.8 0h-.8M353 62.3l1.7 1.7 1.7 1.7-1.6-1.7c-1.6-1.6-1.8-1.9-1.8-1.7M192.8 72l2.1 2-1.9-2-2.1-2s.8 1 1.9 2M53 72.3l-.7.7.8-.6c.6-.6.8-.8.6-.8l-.7.7m311 14.5c0 1.5.1 2 .2 1.3a27.3 27.3 0 00-.1-1.3m-8.3 21.8l-.7.7.7-.7.8-.7c0-.2-.2 0-.8.7m-145.7.8v.4c.1-.2.1-.6 0-.8v.4m-174 1.2v-.5.5m317 .5l-.7.9.8-.8.9-.8c0-.2-.2 0-1 .7M36 122v4.8a433.7 433.7 0 000-4.8m174.4-5.2v2.6h-43.7l-43.6.1v4-2l.1-1.9h43.6c35.8 0 43.6 0 43.7-.3V114l-.1 2.7m0 10.3c0 1.8 0 2.5.1 1.6a41.3 41.3 0 000-1.6m144 6l1.2 1.2-1-1.2a9.5 9.5 0 00-1.2-1l1 1m-318.3.4v-.6.6M364 156v1.3a27.3 27.3 0 000-1.3m-169.3 13.7l-.7.7.8-.6.7-.8c0-.2-.2 0-.8.7M190.4 174.2l-.8.8.9-.8c.8-.7 1-.9.8-.9l-.9.9M81.6 187.7l.8.2c.2 0 .2 0-.1-.2l-.8-.2c-.2 0-.2.1.1.2m253.6.9h.8l-.4-.1h-.4m-2.4.3h1.2l-.6-.1h-.6m-240.6.5h.8-.8m60 0h.8-.9" fill="#8cb4cc" />
+            <path d="M212.6 86.2v16a5283.8 5283.8 0 000-16m-2.3 26.8c0 .7 0 1 .1.6v-1.2.6m-71.6 10.5c42 .2 71.6.2 71.5 0a2855.5 2855.5 0 00-71.5 0m73.8 32.7v16.3a5510.5 5510.5 0 000-16.3m-2.3-25c0 .5 0 .8.1.4v-1.1.6m144 48.4l-.7.7.8-.7c.7-.6.8-.8.6-.8l-.7.8" fill="#83b4cc" />
+            <path d="M332 53.9l1.7.2h1c-.8-.3-2.8-.4-2.7-.2M336 54.4h.8l-.4-.1c-.4 0-.6 0-.4.1m-244.1.2h.4-.4m61.9 0h.5-.5m186 .5c.3.2.7.2.9.2.2 0 .1 0-.1-.2l-.8-.1c-.2 0-.2 0 0 .1M167 56.7l.8.2c.2 0 .2 0-.1-.2l-.8-.2c-.2 0-.2.1.1.2m8.9 3.3l.8.3-.3-.3-.8-.3c-.2 0 0 .1.3.3m178.7 3.6l1.6 1.5-1.3-1.5-1.6-1.5 1.3 1.5M193 71.9l2 2s-.7-1-1.8-2l-2-1.9 1.8 2M53 72l-.7.8.8-.6.7-.8c0-.1-.2 0-.8.7m-2.1 2.4l-.8.8.8-.8c.8-.7 1-.9.8-.9l-.8.9M363 78.3l.2.8c.1.3.2.3.2.1 0-.2 0-.5-.2-.8-.1-.2-.2-.3-.2 0m1 4.5v-.5.5m.2 3.9V85.6v1.2m-.3 3.8c0 .5 0 .7.1.4v-1 .6M36 108.7v.4c.1-.2.1-.6 0-.8v.4m319.5.2l-.7.8.8-.7.9-.9c0-.2-.2 0-1 .8m-145.3 1.5c0 .9 0 1.2.1.7v-1.5.8m-174.5.2v-.5.5m317.5.5l-.9 1 1.1-1 1-1c-.2 0-.6.4-1.2 1M35.7 121.9v4.9a454.1 454.1 0 000-5m131-2.3l-43.7.1 43.6.1a1619.1 1619.1 0 0043.8-.3l-43.7.1m46 0c0 .2 27 .2 60 .2h59.7l-60-.2h-59.7m122 0h.9c.2-.1 0-.1-.4-.1h-.4m-2.2 4.1H333.5h-.9m22 9.4l1 1-1-1.1-1-1 1 1m-144.3.8c0 .9 0 1.2.1.7v-1.6.9m-174.5-.3v-.5.5m172.8 10.6c0 .2 0 .5-.2.8 0 .4 0 .4.2 0 .1-.2.2-.6.1-.8 0-.4 0-.4-.1 0m154.4 3.8l.2.8c.1.2.2.3.2 0 0-.1 0-.5-.2-.7-.1-.3-.2-.3-.2-.1m-323.4 3.6l.4.7v-.5c-.3-.8-.6-1-.4-.2m324.3 1c0 .5 0 .7.1.5.1-.2.1-.6 0-.8v.4m.2 3.7V155v1.2m-.3 3.8c0 .5 0 .7.1.4v-.9.5M194.7 170l-.9 1 1-1 1-.9c0-.2-.3 0-1 1m-4 3.8c-.6.5-1 1-.9 1l1.1-1 .9-1s-.6.4-1.1 1m-134.9.6l.8.8.7.6-.6-.7c-.7-.7-.9-.9-.9-.7m300.2 3.2l-.7.7.8-.7c.7-.6.8-.8.6-.8l-.7.8m-3.1 3.1l-.7.7.7-.6c.7-.6.9-.8.7-.8l-.7.7m-191.6 7.6c-.6.2-.6.2-.1.2.3 0 .8 0 1-.2.6-.2 0-.2-.9 0m51.2.5c0 .1 27 .2 59.7.1h59.5l-59.7-.1h-59.5m-123.2.3h.5-.5m66.4 0h.5-.5m-48.5.3" fill="#65a3bd" />
+        </g>
+    </svg>
+);
+
+export default withIconContainer(IconCardCB);
diff --git a/src/app/ui/icon/IconCardMada.tsx b/src/app/ui/icon/IconCardMada.tsx
@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from 'react';
+
+import withIconContainer from './withIconContainer';
+
+const IconCardMada: FunctionComponent = () => (
+    <svg height="265.5" viewBox="0 0 796.2 265.5" width="796.2" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 153.1h336.8v112.2H0z" fill="#84b740"  />
+        <path d="M0 0h336.8v112.3H0z" fill="#259bd6" />
+        <path d="M673.6 242.5l-1.5.3c-5.2 1-7.1 1.4-10.9 1.4-8.8 0-19.2-4.5-19.2-25.7 0-10.9 1.8-25.4 18.2-25.4h.1c2.8.2 6 .5 12 2.3l1.3.4v46.7zm2.7-105.7l-2.7.5v39.2l-2.4-.7-.7-.2c-2.7-.8-8.9-2.6-14.9-2.6-32.8 0-39.7 24.8-39.7 45.6 0 28.5 16 44.9 43.9 44.9a89 89 0 0029.3-4.1c8.1-2.6 11-6.3 11-14.2V132.7l-23.8 4.1M771.1 243.2l-1.4.4-5 1.3a52.1 52.1 0 01-12.1 1.9c-7.7 0-12.3-3.8-12.3-10.3 0-4.2 1.9-11.3 14.5-11.3h16.3v18zm-11.5-70.7c-10.1 0-20.5 1.8-33.4 5.8l-8.4 2.5 2.8 19 8.2-2.7a96.4 96.4 0 0127.3-4.6c3.6 0 14.6 0 14.6 11.9v5.2h-15.3c-27.9 0-40.8 8.9-40.8 28 0 16.3 11.9 26.1 31.9 26.1 6.2 0 14.8-1.2 22.2-3l.4-.1.4.1 2.5.4 23.8 4.3V203c0-20.2-12.2-30.5-36.2-30.5M576.8 243.2l-1.4.4-5 1.3a51.4 51.4 0 01-12.1 1.9c-7.7 0-12.3-3.8-12.3-10.3 0-4.2 1.9-11.3 14.4-11.3h16.3l.1 18zm-11.4-70.7c-10.2 0-20.5 1.8-33.4 5.8l-8.4 2.5 2.8 19 8.2-2.7a96.4 96.4 0 0127.3-4.6c3.6 0 14.6 0 14.6 11.9v5.2h-15.3c-27.9 0-40.9 8.9-40.9 28 0 16.3 11.9 26.1 32 26.1 6.2 0 14.8-1.2 22.2-3l.4-.1.4.1 2.4.4c7.9 1.4 15.9 2.8 23.8 4.4v-62.4c.1-20.4-12.1-30.6-36.1-30.6M471.5 172.7a67.5 67.5 0 00-27.1 6l-1 .5-.9-.7a41 41 0 00-24.3-5.9c-9.7 0-18.8 1.4-28.7 4.3-8.5 2.6-11.8 6.7-11.8 14.4v71.3h26.6v-65.9l1.3-.4c5.4-1.8 8.6-2.1 11.7-2.1 7.7 0 11.6 4.1 11.6 12.1v56.4h26.2v-57.5c0-3.4-.7-5.4-.8-5.8l-.9-1.7 1.8-.8c4-1.8 8.4-2.7 13-2.7 5.3 0 11.6 2.1 11.6 12.1v56.4h26.1v-59c0-20.9-11.2-31-34.4-31M751.5 73.2c-3.9 0-10.4-.4-15.5-1.4l-1.5-.3V33c0-3.2-.6-5.2-.7-5.5l-.8-1.6 1.7-.7 1.3-.5.3-.2 1.8-.6.7-.2c5.9-1.6 11.3-1.4 13.7-1.6h.1c16.3 0 18.2 14.5 18.2 25.4-.1 21.2-10.6 25.7-19.3 25.7M751.4 0h-.7c-15.3 0-31 4.2-36.6 12.4-3 4-4.7 9-4.8 14.9V67c0 3.4-.7 4.7-.8 5l-.9 1.7h-48.3V46.1h-.1C658.6 17 641.4 1 616.5 1H592.2l-2.8 19.2h24.2c12.7 0 19.4 10.8 19.4 27.4v27.8l-1.7-.9c-.3-.1-2.4-.8-5.7-.8h-41.8l-2.9 19.1h128.5c4.4-.9 9.5-1.7 13.9-2.4a72.4 72.4 0 0026.9 4.9c27.9 0 46-18.7 46-47.5C796.1 19.3 778.6.6 751.4 0M526.1 104.5h1.2c27.9 0 40.9-9.2 40.9-31.9 0-16.3-11.9-29.3-31.9-29.3h-25.7c-7.7 0-12.3-4.4-12.3-11.8 0-5 1.9-11.2 14.5-11.2H569l2.9-19.2h-58.4c-27.2 0-40.9 11.4-40.9 30.4 0 18.8 11.9 28.6 31.9 28.6h25.7c7.7 0 12.3 6.1 12.3 12.5 0 4.2-1.9 12.9-14.4 12.9h-4.3l-82.3-.2h-15c-12.7 0-21.6-7.2-21.6-23.9V49.9c0-17.4 6.9-28.2 21.6-28.2h24.4l2.8-19.1h-33.3c-24.9 0-42.1 16.7-42.7 45.8v13c.6 29.1 17.8 43 42.7 43H444.7l44.6.1h36.8z" />
+    </svg>
+);
+
+export default withIconContainer(IconCardMada);
diff --git a/src/app/ui/icon/index.ts b/src/app/ui/icon/index.ts
@@ -4,11 +4,13 @@ export type IconProps = IconProps;
 
 export { IconSize } from './withIconContainer';
 export { default as IconCardAmex } from './IconCardAmex';
+export { default as IconCardCB } from './IconCardCB';
 export { default as IconCardCodeAmex } from './IconCardCodeAmex';
 export { default as IconCardCodeVisa } from './IconCardCodeVisa';
 export { default as IconCardDinersClub } from './IconCardDinersClub';
 export { default as IconCardDiscover } from './IconCardDiscover';
 export { default as IconCardJCB } from './IconCardJCB';
+export { default as IconCardMada } from './IconCardMada';
 export { default as IconCardMaestro } from './IconCardMaestro';
 export { default as IconCardMastercard } from './IconCardMastercard';
 export { default as IconCardVisa } from './IconCardVisa';