From 93d7101f7b4869ce4a32b92ae46de104073e52e7 Mon Sep 17 00:00:00 2001 From: "e.kireev" Date: Mon, 29 Jan 2024 15:56:26 +0300 Subject: [PATCH] feat(PAYMENTS-17861): add saved methods component --- .nvmrc | 1 + README.md | 14 +- examples/saved-methods/index.html | 91 +++++++++ .../web-component-tag-name.enum.ts | 1 + src/core/web-components/web-components.map.ts | 2 + .../payment-methods.component.ts | 4 +- .../pipes/get-expire-date.pipe.ts | 7 + .../saved-methods/pipes/name-cutter.pipe.ts | 41 +++++ .../saved-method-attributes.enum.ts | 4 + .../saved-method.template.spec.ts | 16 ++ .../saved-methods/saved-method.template.ts | 31 ++++ .../saved-methods-attributes.enum.ts | 3 + .../saved-methods-events.enum.ts | 3 + .../saved-methods.component.spec.ts | 172 ++++++++++++++++++ .../saved-methods/saved-methods.component.ts | 107 +++++++++++ 15 files changed, 488 insertions(+), 9 deletions(-) create mode 100644 .nvmrc create mode 100644 examples/saved-methods/index.html create mode 100644 src/features/headless-checkout/web-components/saved-methods/pipes/get-expire-date.pipe.ts create mode 100644 src/features/headless-checkout/web-components/saved-methods/pipes/name-cutter.pipe.ts create mode 100644 src/features/headless-checkout/web-components/saved-methods/saved-method-attributes.enum.ts create mode 100644 src/features/headless-checkout/web-components/saved-methods/saved-method.template.spec.ts create mode 100644 src/features/headless-checkout/web-components/saved-methods/saved-method.template.ts create mode 100644 src/features/headless-checkout/web-components/saved-methods/saved-methods-attributes.enum.ts create mode 100644 src/features/headless-checkout/web-components/saved-methods/saved-methods-events.enum.ts create mode 100644 src/features/headless-checkout/web-components/saved-methods/saved-methods.component.spec.ts create mode 100644 src/features/headless-checkout/web-components/saved-methods/saved-methods.component.ts diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..d5a1596 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +20.10.0 diff --git a/README.md b/README.md index d727598..779ae7d 100644 --- a/README.md +++ b/README.md @@ -161,17 +161,17 @@ declare const headlessCheckout: { ### Regular components | **Component** | **Selector** | **Status** | -| --------------------- | -------------------- | ---------- | +| --------------------- |----------------------|-----------| | Payment Methods | psdk-payment-methods | βœ… | -| Saved Methods | ❔ | πŸ•‘ | -| Payment Form Messages | ❔ | πŸ•‘ | +| Saved Methods | psdk-saved-methods | βœ… | +| Payment Form Messages | ❔ | πŸ•‘ | | Checkbox | psdk-checkbox | βœ… | | Select | psdk-select | βœ… | -| Apple Pay Button | ❔ | πŸ•‘ | -| Google Pay Button | ❔ | πŸ•‘ | -| Delete Account Button | ❔ | πŸ•‘ | +| Apple Pay Button | ❔ | πŸ•‘ | +| Google Pay Button | ❔ | πŸ•‘ | +| Delete Account Button | ❔ | πŸ•‘ | | Submit Button | psdk-submit-button | βœ… | -| User Balance | ❔ | πŸ•‘ | +| User Balance | ❔ | πŸ•‘ | | Finance Details | psdk-finance-details | βœ… | | Status | psdk-status | βœ… | diff --git a/examples/saved-methods/index.html b/examples/saved-methods/index.html new file mode 100644 index 0000000..2a83773 --- /dev/null +++ b/examples/saved-methods/index.html @@ -0,0 +1,91 @@ + + + + + + + Document + + + + + +

Pay Station SDK

+ + + + + + + + diff --git a/src/core/web-components/web-component-tag-name.enum.ts b/src/core/web-components/web-component-tag-name.enum.ts index fd1eff0..dc10b13 100644 --- a/src/core/web-components/web-component-tag-name.enum.ts +++ b/src/core/web-components/web-component-tag-name.enum.ts @@ -2,6 +2,7 @@ export enum WebComponentTagName { TextComponent = 'psdk-text', SubmitButtonComponent = 'psdk-submit-button', PaymentMethodsComponent = 'psdk-payment-methods', + SavedMethodsComponent = 'psdk-saved-methods', PriceTextComponent = 'psdk-price-text', FinanceDetailsComponent = 'psdk-finance-details', LegalComponent = 'psdk-legal', diff --git a/src/core/web-components/web-components.map.ts b/src/core/web-components/web-components.map.ts index 597fbd2..f0fa43c 100644 --- a/src/core/web-components/web-components.map.ts +++ b/src/core/web-components/web-components.map.ts @@ -12,6 +12,7 @@ import { ThreeDsComponent } from '../../features/headless-checkout/web-component import { PhoneComponent } from '../../features/headless-checkout/web-components/phone-component/phone.component'; import { SelectComponent } from '../../features/headless-checkout/web-components/select/select.component'; import { CheckboxComponent } from '../../features/headless-checkout/web-components/checkbox/checkbox.component'; +import { SavedMethodsComponent } from '../../features/headless-checkout/web-components/saved-methods/saved-methods.component'; export const webComponents: { [key in WebComponentTagName]: CustomElementConstructor; @@ -19,6 +20,7 @@ export const webComponents: { [WebComponentTagName.TextComponent]: TextComponent, [WebComponentTagName.SubmitButtonComponent]: SubmitButtonComponent, [WebComponentTagName.PaymentMethodsComponent]: PaymentMethodsComponent, + [WebComponentTagName.SavedMethodsComponent]: SavedMethodsComponent, [WebComponentTagName.PriceTextComponent]: PriceTextComponent, [WebComponentTagName.FinanceDetailsComponent]: FinanceDetailsComponent, [WebComponentTagName.LegalComponent]: LegalComponent, diff --git a/src/features/headless-checkout/web-components/payment-methods/payment-methods.component.ts b/src/features/headless-checkout/web-components/payment-methods/payment-methods.component.ts index 6626838..b5b6c72 100644 --- a/src/features/headless-checkout/web-components/payment-methods/payment-methods.component.ts +++ b/src/features/headless-checkout/web-components/payment-methods/payment-methods.component.ts @@ -50,8 +50,8 @@ export class PaymentMethodsComponent extends WebComponentAbstract { protected getHtml(): string { const paymentMethodsHtml = this.getMethodsHtml(); return ` - -