diff --git a/src/payment-card/__tests__/payment-card.scenario.js b/src/payment-card/__tests__/payment-card.scenario.js index 3e3631f173..0b56fdbb31 100644 --- a/src/payment-card/__tests__/payment-card.scenario.js +++ b/src/payment-card/__tests__/payment-card.scenario.js @@ -30,6 +30,8 @@ export function Scenario() {
+
+ ); } diff --git a/src/payment-card/custom-cards.config.js b/src/payment-card/custom-cards.config.js new file mode 100644 index 0000000000..b07048b606 --- /dev/null +++ b/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]; diff --git a/src/payment-card/icons/uatp.js b/src/payment-card/icons/uatp.js new file mode 100644 index 0000000000..4f582328ea --- /dev/null +++ b/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 }) => ( + + + + + + + + + + + + + + + + + +); + +export default UatpIcon; diff --git a/src/payment-card/payment-card.js b/src/payment-card/payment-card.js index fdb89b0e6c..26147573c6 100644 --- a/src/payment-card/payment-card.js +++ b/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 { @@ -61,6 +65,14 @@ class PaymentCard extends React.Component { 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); diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-chromium-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-chromium-linux.png index cceca5c281..60bf56873c 100644 Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-chromium-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-chromium-linux.png differ diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-firefox-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-firefox-linux.png index 9ed580bf06..71d28d322f 100644 Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-firefox-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-firefox-linux.png differ diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-webkit-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-webkit-linux.png index 347893c2c3..481c89d085 100644 Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-webkit-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-dark-webkit-linux.png differ diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-chromium-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-chromium-linux.png index 759b1352b1..104d084f5b 100644 Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-chromium-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-chromium-linux.png differ diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-firefox-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-firefox-linux.png index 383f0cf416..6b0b9ac4e0 100644 Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-firefox-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-firefox-linux.png differ diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-webkit-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-webkit-linux.png index 67ac56292d..603e01a138 100644 Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-webkit-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-desktop-webkit-linux.png differ diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-chromium-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-chromium-linux.png index 378b73f780..f0126523f7 100644 Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-chromium-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-chromium-linux.png differ diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-firefox-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-firefox-linux.png index c0e59aadea..e452d1eebc 100644 Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-firefox-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-firefox-linux.png differ diff --git a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-webkit-linux.png b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-webkit-linux.png index dda56175a8..d0f0e23643 100644 Binary files a/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-webkit-linux.png and b/vrt/tests.vrt.js-snapshots/payment-card--payment-card-mobile-webkit-linux.png differ