Merge pull request #370 from 4site-interactive-studios/vgs-card-brands

VGS - Add support for valid card brands

Author: fernanDOTdo

packages/scripts/dist/interfaces/options.d.ts

@@ -109,6 +109,9 @@ export interface Options {
             };
             ariaLabel?: string;
             placeholder?: string;
+            validCardBrands?: {
+                type: string;
+            }[] | null;
         };
         "transaction.ccvv"?: {
             showCardIcon?: boolean | object;

packages/scripts/dist/vgs.js

@@ -141,6 +141,7 @@ export class VGS {
                 // Autocomplete is not customizable
                 autoComplete: "cc-number",
                 validations: ["required", "validCardNumber"],
+                validCardBrands: null
             },
             "transaction.ccvv": {
                 showCardIcon: false,
@@ -158,6 +159,12 @@ export class VGS {
                 css: styles,
             },
         };
+        // Override the validCardBrands if set in the theme options, as this should not be deep merged.
+        if (options &&
+            options["transaction.ccnumber"] &&
+            options["transaction.ccnumber"].validCardBrands) {
+            defaultOptions["transaction.ccnumber"].validCardBrands = options["transaction.ccnumber"].validCardBrands;
+        }
         // Deep merge the default options with the options set in the theme
         this.options = ENGrid.deepMerge(defaultOptions, options);
         this.logger.log("Options", this.options);

packages/scripts/src/interfaces/options.ts

@@ -112,6 +112,9 @@ export interface Options {
           };
           ariaLabel?: string;
           placeholder?: string;
+          validCardBrands?: {
+            type: string;
+          }[] | null;
         };
         "transaction.ccvv"?: {
           showCardIcon?: boolean | object;

packages/scripts/src/vgs.ts

@@ -113,6 +113,7 @@ export class VGS {
         // Autocomplete is not customizable
         autoComplete: "cc-number",
         validations: ["required", "validCardNumber"],
+        validCardBrands: <{ type: string }[]|null>null
       },
       "transaction.ccvv": {
         showCardIcon: false,
@@ -130,6 +131,14 @@ export class VGS {
         css: styles,
       },
     };
+    // Override the validCardBrands if set in the theme options, as this should not be deep merged.
+    if (
+      options &&
+      options["transaction.ccnumber"] &&
+      options["transaction.ccnumber"].validCardBrands
+    ) {
+      defaultOptions["transaction.ccnumber"].validCardBrands = options["transaction.ccnumber"].validCardBrands;
+    }
     // Deep merge the default options with the options set in the theme
     this.options = ENGrid.deepMerge(defaultOptions, options);
     this.logger.log("Options", this.options);