fix: respect showStatusMessage for payment cancelled view in dc

package.json

@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "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/dynamic-checkout.ts

@@ -162,7 +162,7 @@ module ProcessOut {
       this.widgetWrapper = document.createElement("div")
       this.widgetWrapper.setAttribute("class", "dynamic-checkout-widget-wrapper")
 
-      if (this.paymentConfig.locale === "ar") {
+      if (Translations.isRtlLocale(this.paymentConfig.locale)) {
         this.widgetWrapper.setAttribute("dir", "rtl")
       }
 

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

@@ -177,10 +177,12 @@ module ProcessOut {
         },
         error => {
           if (error.code === "customer.canceled") {
-            this.resetContainerHtml().appendChild(
-              new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig)
-                .element,
-            )
+            if (this.paymentConfig.showStatusMessage) {
+              this.resetContainerHtml().appendChild(
+                new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig)
+                  .element,
+              )
+            }
 
             DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({
               payment_method_name: apm.gateway_name,
@@ -365,12 +367,14 @@ module ProcessOut {
             },
             error => {
               if (error.code === "customer.canceled") {
-                this.resetContainerHtml().appendChild(
-                  new DynamicCheckoutPaymentCancelledView(
-                    this.processOutInstance,
-                    this.paymentConfig,
-                  ).element,
-                )
+                if (this.paymentConfig.showStatusMessage) {
+                  this.resetContainerHtml().appendChild(
+                    new DynamicCheckoutPaymentCancelledView(
+                      this.processOutInstance,
+                      this.paymentConfig,
+                    ).element,
+                  )
+                }
 
                 DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({
                   payment_method_name: apm.gateway_name,

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

@@ -250,6 +250,12 @@ module ProcessOut {
         fontSize: "14px",
       }
 
+      if (Translations.isRtlLocale(this.paymentConfig.locale)) {
+        // Hosted field iframes don't inherit the widget's dir="rtl",
+        // so the direction has to be passed to them explicitly
+        options.style.direction = "rtl"
+      }
+
       options.placeholder = ""
       options.expiryAutoNext = false
       options.cardNumberAutoNext = true

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

@@ -162,12 +162,14 @@ module ProcessOut {
           },
           error => {
             if (error.code === "customer.canceled") {
-              this.resetContainerHtml().appendChild(
-                new DynamicCheckoutPaymentCancelledView(
-                  this.processOutInstance,
-                  this.paymentConfig,
-                ).element,
-              )
+              if (this.paymentConfig.showStatusMessage) {
+                this.resetContainerHtml().appendChild(
+                  new DynamicCheckoutPaymentCancelledView(
+                    this.processOutInstance,
+                    this.paymentConfig,
+                  ).element,
+                )
+              }
 
               DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({
                 payment_method_name: apm_customer_token.gateway_name,
@@ -256,10 +258,12 @@ module ProcessOut {
 
     private handlePaymentError(error) {
       if (error.code === "customer.canceled") {
-        this.resetContainerHtml().appendChild(
-          new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig)
-            .element,
-        )
+        if (this.paymentConfig.showStatusMessage) {
+          this.resetContainerHtml().appendChild(
+            new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig)
+              .element,
+          )
+        }
 
         DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({
           payment_method_name: this.paymentMethod.apm_customer_token

src/dynamic-checkout/payment-methods/saved-card.ts

@@ -108,10 +108,12 @@ module ProcessOut {
 
     private handlePaymentError(error) {
       if (error.code === "customer.canceled") {
-        this.resetContainerHtml().appendChild(
-          new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig)
-            .element,
-        )
+        if (this.paymentConfig.showStatusMessage) {
+          this.resetContainerHtml().appendChild(
+            new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig)
+              .element,
+          )
+        }
 
         DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({
           payment_method_name: "card",

src/dynamic-checkout/styles/default.ts

@@ -937,7 +937,7 @@ const defaultStyles = `
   }
 
   .dynamic-checkout-widget-wrapper[dir="rtl"] .dco-payment-method-card-form-input-cvc {
-    padding-right: 0;
+    padding-right: 8px;
     padding-left: 40px;
   }
 

src/dynamic-checkout/utils/translations.ts

@@ -19,11 +19,17 @@ module ProcessOut {
       vi: vi,
     }
 
+    static rtlLocales = ["ar"]
+
     static getText(key: string, locale: string) {
       const keys =
         Translations.localeTranslationsMap[locale] || Translations.localeTranslationsMap.en
 
       return keys[key] || ""
     }
+
+    static isRtlLocale(locale: string) {
+      return Translations.rtlLocales.indexOf(locale) !== -1
+    }
   }
 }