feat: unify saved payment methods view

package.json

@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.",
   "scripts": {
     "build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js",

src/dynamic-checkout/elements/payment-methods-manager.ts

@@ -3,14 +3,14 @@
 module ProcessOut {
   export class PaymentMethodsManager {
     public element: HTMLElement
-    private expressPaymentMethods: PaymentMethodButton[]
+    private expressPaymentMethods: { element: HTMLElement }[]
     public modal: any
     private paymentConfig: DynamicCheckoutPaymentConfig
     private processOutInstance: ProcessOut
 
     constructor(
       processOutInstance: ProcessOut,
-      expressPaymentMethods: PaymentMethodButton[],
+      expressPaymentMethods: { element: HTMLElement }[],
       paymentConfig: DynamicCheckoutPaymentConfig,
     ) {
       this.expressPaymentMethods = expressPaymentMethods

src/dynamic-checkout/elements/saved-payment-method-button.ts

@@ -0,0 +1,127 @@
+/// <reference path="../references.ts" />
+
+module ProcessOut {
+  export abstract class SavedPaymentMethodButton {
+    public element: HTMLElement
+    protected processOutInstance: ProcessOut
+
+    constructor(
+      processOutInstance: ProcessOut,
+      name: string,
+      logoUrl: string,
+      id: string,
+      description: string,
+      deleteMode: boolean = false,
+      deletingAllowed: boolean = false,
+      handleDeletePaymentMethod?: () => void,
+      locale: string = "en",
+    ) {
+      this.processOutInstance = processOutInstance
+
+      this.element = this.createElement(
+        name,
+        logoUrl,
+        id,
+        description,
+        deleteMode,
+        deletingAllowed,
+        handleDeletePaymentMethod,
+        locale,
+      )
+    }
+
+    private createElement(
+      name: string,
+      logoUrl: string,
+      id: string,
+      description: string,
+      deleteMode: boolean,
+      deletingAllowed: boolean,
+      handleDeletePaymentMethod?: () => void,
+      locale: string = "en",
+    ) {
+      const tagName = deleteMode ? "div" : "button"
+
+      const classNames = [
+        "dco-saved-payment-method-button",
+        deleteMode && "dco-saved-payment-method-button--delete-mode",
+      ]
+
+      const [element, logo, descriptionElement, deleteButton, deleteButtonIcon] =
+        HTMLElements.createMultipleElements([
+          {
+            tagName,
+            classNames,
+            attributes: {
+              "data-id": id,
+            },
+          },
+          {
+            tagName: "img",
+            classNames: ["dco-saved-payment-method-logo"],
+            attributes: {
+              src: logoUrl,
+              alt: name,
+            },
+          },
+          {
+            tagName: "div",
+            classNames: ["dco-payment-method-right-content"],
+            textContent: description,
+          },
+          {
+            tagName: "button",
+            classNames: ["dco-delete-payment-method-button"],
+            attributes: {
+              "aria-label": Translations.getText("delete-payment-method-label", locale),
+            },
+          },
+          {
+            tagName: "img",
+            classNames: ["dco-delete-payment-method-icon"],
+            attributes: {
+              src: this.processOutInstance.endpoint("js", TRASH_ICON),
+              alt: "",
+            },
+          },
+        ])
+
+      HTMLElements.appendChildren(element, [logo, descriptionElement])
+
+      if (deleteMode && deletingAllowed) {
+        HTMLElements.appendChildren(deleteButton, [deleteButtonIcon])
+        HTMLElements.appendChildren(element, [deleteButton])
+
+        deleteButton.addEventListener("click", () => {
+          deleteButton.setAttribute("disabled", "true")
+          handleDeletePaymentMethod()
+        })
+      }
+
+      return element
+    }
+
+    protected setLoading(locale: string = "en") {
+      const button = this.element as HTMLButtonElement
+      const currentHeight = button.offsetHeight
+
+      button.disabled = true
+      button.style.height = `${currentHeight}px`
+      HTMLElements.replaceChildren(button, [])
+      button.setAttribute(
+        "aria-label",
+        Translations.getText("processing-payment-label", locale),
+      )
+
+      const spinner = HTMLElements.createElement({
+        tagName: "span",
+        classNames: ["dco-payment-method-button-pay-button-spinner"],
+        attributes: {
+          "aria-hidden": "true",
+        },
+      })
+
+      HTMLElements.appendChildren(button, [spinner])
+    }
+  }
+}

src/dynamic-checkout/payment-methods/apm.ts

@@ -343,29 +343,45 @@ module ProcessOut {
               )
             },
             error => {
-              if (this.paymentConfig.showStatusMessage) {
+              if (error.code === "customer.canceled") {
                 this.resetContainerHtml().appendChild(
-                  new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
-                    .element,
+                  new DynamicCheckoutPaymentCancelledView(
+                    this.processOutInstance,
+                    this.paymentConfig,
+                  ).element,
                 )
-              } else if (
-                !this.paymentConfig.showStatusMessage &&
-                !this.paymentConfig.invoiceDetails.return_url
-              ) {
-                this.resetContainerHtml().appendChild(
-                  new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig)
-                    .element,
+
+                DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({
+                  payment_method_name: apm.gateway_name,
+                  invoice_id: this.paymentConfig.invoiceId,
+                  return_url: this.paymentConfig.invoiceDetails.return_url || null,
+                  tab_closed: error.metadata?.reason === "tab_closed",
+                })
+              } else {
+                if (this.paymentConfig.showStatusMessage) {
+                  this.resetContainerHtml().appendChild(
+                    new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
+                      .element,
+                  )
+                } else if (
+                  !this.paymentConfig.showStatusMessage &&
+                  !this.paymentConfig.invoiceDetails.return_url
+                ) {
+                  this.resetContainerHtml().appendChild(
+                    new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig)
+                      .element,
+                  )
+                }
+
+                DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(
+                  this.paymentConfig.invoiceId,
+                  error,
+                  apm.gateway_name,
+                  undefined,
+                  this.paymentConfig.invoiceDetails.return_url || null,
+                  data.customer_token_id,
                 )
               }
-
-              DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(
-                this.paymentConfig.invoiceId,
-                error,
-                apm.gateway_name,
-                undefined,
-                this.paymentConfig.invoiceDetails.return_url || null,
-                data.customer_token_id,
-              )
             },
             actionHandlerOptions,
             this.paymentConfig.invoiceId,