feat(payment-card): added uatp card support

src/payment-card/__tests__/payment-card.scenario.js

@@ -30,6 +30,8 @@ export function Scenario() {
       <PaymentCard value="6246729687894613" />
       <br />
       <PaymentCard value="4111111111111111" />
+      <br />
+      <PaymentCard value="153342103478161" />
     </React.Fragment>
   );
 }

src/payment-card/custom-cards.config.js

@@ -0,0 +1,25 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+//@flow
+
+/*
+  This file should be used for adding new card type configuration
+*/
+
+const UATP_CARD_TYPE_CONFIG = {
+  niceType: 'Uatp',
+  type: 'uatp',
+  patterns: [[1001, 1999]],
+  gaps: [4, 9],
+  lengths: [15],
+  code: {
+    name: 'CVV',
+    size: 0,
+  },
+};
+
+export const CUSTOM_CARDS_CONFIGURATION = [UATP_CARD_TYPE_CONFIG];

src/payment-card/icons/uatp.js

@@ -0,0 +1,58 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+
+const UatpIcon = ({ size }: { size: string }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M23 4H1V20H23V4Z" fill="#F0F0F0" />
+    <g clipPath="url(#clip0_90345_28085)">
+      <path
+        d="M10.5057 9.64723H10.1817H9.70679V10.9659L10.3044 12.6255L11.4708 12.133L10.5057 9.64723Z"
+        fill="#0A2C1B"
+      />
+      <path
+        d="M6.34592 14.6471L6.34001 9.64723H5.07682V13.7451C4.94173 13.7928 4.80176 13.8253 4.65948 13.8421C4.38337 13.8743 3.9371 13.9265 3.60459 13.6339C3.27002 13.3394 3.26507 12.8846 3.26655 12.7802V9.64723H2.00336V12.7802C1.96122 13.7182 2.32658 14.1754 2.45948 14.3209C3.17638 15.1058 4.54287 14.9387 5.39513 14.8345C5.71171 14.7958 6.02491 14.7331 6.33204 14.6471L6.32786 14.6427L6.34592 14.6471Z"
+        fill="#0A2C1B"
+      />
+      <path
+        d="M21.999 11.453C21.9951 11.2269 21.9447 10.4929 21.3738 10.0162C21.1483 9.82795 20.9283 9.75218 20.7469 9.6897C20.5867 9.63455 20.2633 9.54148 19.3754 9.58086C18.9585 9.59952 18.5429 9.64148 18.1306 9.70653V14.8388H19.3938V13.3179C19.4958 13.3263 19.6189 13.3331 19.7586 13.3337C19.9448 13.3351 20.1309 13.325 20.3158 13.3033C20.4802 13.2817 21.266 13.1786 21.709 12.5414C22.0104 12.1079 22.0024 11.6443 21.999 11.453ZM20.5118 11.9928C20.3546 12.1594 20.1557 12.1903 19.9414 12.2236C19.7608 12.2514 19.5768 12.2484 19.3972 12.2148V10.7433C19.4924 10.7303 19.5885 10.7245 19.6845 10.7259C19.9706 10.73 20.2799 10.7344 20.4943 10.9523C20.6881 11.1491 20.6983 11.4123 20.699 11.4747C20.6996 11.5392 20.6985 11.7948 20.5118 11.9928Z"
+        fill="#0A2C1B"
+      />
+      <path
+        d="M10.4995 13.1673L11.1015 14.8388H12.5212L11.6926 12.7045C11.3054 12.8761 10.9077 13.0304 10.4995 13.1673Z"
+        fill="#0A2C1B"
+      />
+      <path
+        d="M6.60772 13.6849C6.59882 13.6856 6.59 13.6828 6.58303 13.6773C6.57607 13.6717 6.57148 13.6637 6.57019 13.6548C6.56891 13.646 6.57102 13.637 6.5761 13.6297C6.58119 13.6223 6.58887 13.6172 6.59759 13.6153C7.44534 13.4378 8.27682 13.1899 9.08338 12.8742C12.0436 11.7142 12.5355 10.4597 14.7222 9.60822C17.2224 8.63467 19.7225 9.06335 20.7271 9.30762C20.7338 9.30921 20.7396 9.31329 20.7433 9.31903C20.7471 9.32476 20.7485 9.3317 20.7473 9.33844C20.746 9.34518 20.7423 9.35119 20.7368 9.35525C20.7313 9.35931 20.7244 9.3611 20.7176 9.36026C19.7189 9.24529 18.7085 9.28396 17.7216 9.47491C15.1767 9.96677 14.237 11.2345 11.9094 12.341C10.7268 12.9032 8.98995 13.517 6.60772 13.6849Z"
+        fill="#3EB54A"
+      />
+      <path
+        d="M16.9918 9.64723H12.6013V10.7793H14.1649V14.8388H15.4281V10.7793H16.9918V9.64723Z"
+        fill="#0A2C1B"
+      />
+      <path
+        d="M9.23192 9.64723H8.95198L6.93652 14.8388H8.31211L9.70682 10.9659V9.64723H9.23192Z"
+        fill="#0A2C1B"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_90345_28085">
+        <rect width="20" height="5.92493" fill="white" transform="translate(2 9)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default UatpIcon;

src/payment-card/payment-card.js

@@ -24,11 +24,14 @@ import MaestroIcon from './icons/maestro.js';
 import MastercardIcon from './icons/mastercard.js';
 import UnionPayIcon from './icons/unionpay.js';
 import VisaIcon from './icons/visa.js';
+import UatpIcon from './icons/uatp.js';
 
 import { IconWrapper as StyledIconWrapper } from './styled-components.js';
 
 import type { PaymentCardPropsT } from './types.js';
 
+import { CUSTOM_CARDS_CONFIGURATION } from './custom-cards.config.js';
+
 const CardTypeToComponent = {
   visa: VisaIcon,
   mastercard: MastercardIcon,
@@ -40,6 +43,7 @@ const CardTypeToComponent = {
   maestro: MaestroIcon,
   elo: EloIcon,
   generic: GenericIcon,
+  uatp: UatpIcon,
 };
 
 class PaymentCard extends React.Component<PaymentCardPropsT> {
@@ -61,6 +65,14 @@ class PaymentCard extends React.Component<PaymentCardPropsT> {
     endEnhancer: null,
   };
 
+  constructor(props: PaymentCardPropsT) {
+    super(props);
+    // For adding new custom card type, add card config to custom-cards.config.js
+    CUSTOM_CARDS_CONFIGURATION.forEach((cardTypeConfig) =>
+      valid.creditCardType.addCard(cardTypeConfig)
+    );
+  }
+
   componentDidUpdate(prevProps: PaymentCardPropsT) {
     if (this.inRef && prevProps.value !== this.props.value) {
       this.inRef.setSelectionRange(this.caretPosition, this.caretPosition);