feat: payment cancelled screen for dynamic checkout

package.json

@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "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/locales/en.ts

@@ -15,6 +15,7 @@ module ProcessOut {
     "cvc-error-message": "CVC is invalid",
     "cardholder-name-error-message": "Cardholder name is invalid",
     "payment-error-message": "Something went wrong. Please try again.",
+    "payment-cancelled-message": "Payment has been cancelled.",
     "express-checkout-header": "Express checkout",
     "other-payment-methods-header": "Other payment methods",
     "select-payment-method-label": "Select payment method",

src/dynamic-checkout/locales/es.ts

@@ -15,6 +15,7 @@ module ProcessOut {
     "cvc-error-message": "El CVC es inválido",
     "cardholder-name-error-message": "El nombre del titular de la tarjeta es inválido",
     "payment-error-message": "Algo salió mal. Por favor, inténtalo de nuevo.",
+    "payment-cancelled-message": "El pago ha sido cancelado.",
     "express-checkout-header": "Pago exprés",
     "other-payment-methods-header": "Otros métodos de pago",
     "select-payment-method-label": "Seleccionar método de pago",

src/dynamic-checkout/locales/fr.ts

@@ -15,6 +15,7 @@ module ProcessOut {
     "cvc-error-message": "Le CVC est invalide",
     "cardholder-name-error-message": "Le nom du titulaire de la carte est invalide",
     "payment-error-message": "Quelque chose a mal tourné. Veuillez réessayer.",
+    "payment-cancelled-message": "Le paiement a été annulé.",
     "express-checkout-header": "Paiement express",
     "other-payment-methods-header": "Autres méthodes de paiement",
     "select-payment-method-label": "Sélectionner un méthode de paiement",

src/dynamic-checkout/locales/pl.ts

@@ -15,6 +15,7 @@ module ProcessOut {
     "cvc-error-message": "CVC jest nieprawidłowy",
     "cardholder-name-error-message": "Imię i nazwisko posiadacza karty jest nieprawidłowe",
     "payment-error-message": "Coś poszło nie tak. Spróbuj ponownie.",
+    "payment-cancelled-message": "Płatność została anulowana.",
     "express-checkout-header": "Szybka płatność",
     "other-payment-methods-header": "Inne metody płatności",
     "select-payment-method-label": "Wybierz metodę płatności",

src/dynamic-checkout/locales/pt.ts

@@ -15,6 +15,7 @@ module ProcessOut {
     "cvc-error-message": "O CVC é inválido",
     "cardholder-name-error-message": "O nome do titular do cartão é inválido",
     "payment-error-message": "Algo deu errado. Por favor, tente novamente.",
+    "payment-cancelled-message": "O pagamento foi cancelado.",
     "express-checkout-header": "Checkout expresso",
     "other-payment-methods-header": "Outros métodos de pagamento",
     "select-payment-method-label": "Selecionar método de pagamento",

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

@@ -124,12 +124,23 @@ module ProcessOut {
           )
         },
         error => {
-          this.resetContainerHtml().appendChild(
-            new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
-              .element,
-          )
-
-          DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)
+          if (error.code === "customer.canceled") {
+            this.resetContainerHtml().appendChild(
+              new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig)
+                .element,
+            )
+
+            DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({
+              payment_method_name: apm.gateway_name,
+            })
+          } else {
+            this.resetContainerHtml().appendChild(
+              new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig)
+                .element,
+            )
+
+            DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error)
+          }
         },
         actionHandlerOptions,
         this.paymentConfig.invoiceId,

src/dynamic-checkout/references.ts

@@ -16,6 +16,7 @@
 /// <reference path="payment-methods/native-apm.ts" />
 /// <reference path="payment-methods/apple-pay.ts" />
 /// <reference path="views/payment-error.ts" />
+/// <reference path="views/payment-cancelled.ts" />
 /// <reference path="styles/default.ts" />
 /// <reference path="config/assets.ts" />
 /// <reference path="config/billing-address.ts" />

src/dynamic-checkout/utils/events.ts

@@ -11,6 +11,7 @@ module ProcessOut {
       "processout_dynamic_checkout_no_dynamic_checkout_configuration",
     PAYMENT_ERROR: "processout_dynamic_checkout_payment_error",
     PAYMENT_SUCCESS: "processout_dynamic_checkout_payment_success",
+    PAYMENT_CANCELLED: "processout_dynamic_checkout_payment_cancelled",
     TRANSACTION_ERROR: "processout_dynamic_checkout_transaction_error",
     GOOGLE_PAY_LOAD_ERROR: "processout_dynamic_checkout_google_pay_load_error",
     APPLE_PAY_NEW_SESSION: "processout_dynamic_checkout_apple_pay_new_session",
@@ -139,6 +140,13 @@ module ProcessOut {
 
       return window.dispatchEvent(event)
     }
+    static dispatchPaymentCancelledEvent(details: { payment_method_name: string }) {
+      const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_CANCELLED, {
+        details,
+      })
+
+      return window.dispatchEvent(event)
+    }
 
     static dispatchPaymentPendingEvent(token: string, details: { payment_method_name: string }) {
       const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_PENDING, {

src/dynamic-checkout/views/payment-cancelled.ts

@@ -0,0 +1,32 @@
+/// <reference path="../references.ts" />
+
+module ProcessOut {
+  export class DynamicCheckoutPaymentCancelledView {
+    public element: Element
+
+    constructor(processOutInstance: ProcessOut, paymentConfig: DynamicCheckoutPaymentConfig) {
+      const [element, image, message] = HTMLElements.createMultipleElements([
+        {
+          tagName: "div",
+          classNames: ["dco-card-payment-success"],
+        },
+        {
+          tagName: "img",
+          classNames: ["dco-card-payment-success-image"],
+          attributes: {
+            src: processOutInstance.endpoint("js", PAYMENT_ERROR_IMAGE_ASSET),
+          },
+        },
+        {
+          tagName: "div",
+          classNames: ["dco-card-payment-error-text"],
+          textContent: Translations.getText("payment-cancelled-message", paymentConfig.locale),
+        },
+      ])
+
+      this.element = element
+
+      HTMLElements.appendChildren(element, [image, message])
+    }
+  }
+}