@idonatedev/idonate-sdk 1.2.0-dev7 → 1.2.0-dev9

package/dist/tokenize/SpreedlyTokenizer.js

@@ -21,16 +21,19 @@ const tokenizer_utils_1 = require("./tokenizer-utils");
 const SPREEDLY_SCRIPT_URL = 'https://core.spreedly.com/iframe/iframe-v1.min.js';
 const SPREEDLY_SCRIPT_ID = 'spreedly-iframe-script';
 class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
-    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line') {
+    constructor(environmentKey, containerId, styles, mode = 'credit_card', bankCountry = 'US', enableTestMode = false, layout = 'single-line', responsiveBreakpoint = tokenizer_constants_1.RESPONSIVE_BREAKPOINT) {
         super();
         this.environmentKey = environmentKey;
         this.containerId = containerId;
         this.layout = layout;
         this.bankCountry = 'US';
         this.enableTestMode = false;
+        this.effectiveLayout = 'single-line';
+        this.responsiveBreakpoint = tokenizer_constants_1.RESPONSIVE_BREAKPOINT;
         this.mode = mode;
         this.bankCountry = bankCountry;
         this.enableTestMode = enableTestMode;
+        this.responsiveBreakpoint = responsiveBreakpoint;
         if (mode === 'credit_card') {
             const SpreedlyFrame = window.SpreedlyPaymentFrame;
             if (SpreedlyFrame) {
@@ -77,7 +80,7 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             if (!environmentKey) {
                 environmentKey = '';
             }
-            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false, container.layout || 'single-line');
+            const tokenizer = new SpreedlyTokenizer(environmentKey, container.containerId, container.styling, container.mode || 'credit_card', container.bankCountry || 'US', container.enableTestMode || false, container.layout || 'single-line', container.responsiveBreakpoint || tokenizer_constants_1.RESPONSIVE_BREAKPOINT);
             tokenizer.organizationId = config.organizationId;
             tokenizer.embedId = config.embedId;
             tokenizer.clientConfig = config.clientConfig;
@@ -683,7 +686,64 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             element === null || element === void 0 ? void 0 : element.focus();
         }
     }
+    determineLayout(width) {
+        return width < this.responsiveBreakpoint ? 'two-line' : 'single-line';
+    }
+    setupResizeObserver() {
+        if (this.layout !== 'responsive')
+            return;
+        const container = document.getElementById(this.containerId);
+        if (!container)
+            return;
+        let debounceTimer;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => {
+                const newWidth = entries[0].contentRect.width;
+                const newLayout = this.determineLayout(newWidth);
+                if (newLayout !== this.effectiveLayout) {
+                    this.applyLayoutStyles(newLayout);
+                }
+            }, 100);
+        });
+        this.resizeObserver.observe(container);
+    }
+    applyLayoutStyles(newLayout) {
+        this.effectiveLayout = newLayout;
+        const container = document.getElementById(this.containerId);
+        if (!container)
+            return;
+        if (newLayout === 'two-line') {
+            container.style.flexWrap = 'wrap';
+            if (this.cardNumberDiv) {
+                this.cardNumberDiv.style.flex = '1';
+                this.cardNumberDiv.style.flexBasis = '100%';
+            }
+            if (this.expiryEl) {
+                this.expiryEl.style.flex = '1';
+                this.expiryEl.style.flexBasis = 'auto';
+            }
+            if (this.cvvDiv) {
+                this.cvvDiv.style.flex = '1';
+                this.cvvDiv.style.flexBasis = 'auto';
+            }
+        }
+        else {
+            container.style.flexWrap = 'nowrap';
+            if (this.cardNumberDiv) {
+                this.cardNumberDiv.style.flex = tokenizer_constants_1.FIELD_FLEX.cardNumber.flex;
+            }
+            if (this.expiryEl) {
+                this.expiryEl.style.flex = tokenizer_constants_1.FIELD_FLEX.expiry.flex;
+            }
+            if (this.cvvDiv) {
+                this.cvvDiv.style.flex = tokenizer_constants_1.FIELD_FLEX.cvv.flex;
+            }
+        }
+    }
     destroy() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         if (this.spreedly && this.spreedly.removeHandlers) {
             this.spreedly.removeHandlers();
         }
@@ -760,10 +820,18 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
         }
     }
     createCreditCardFields(container) {
-        if (this.layout === 'two-line') {
+        if (this.layout === 'responsive') {
+            this.effectiveLayout = this.determineLayout(container.offsetWidth);
+        }
+        else {
+            this.effectiveLayout =
+                this.layout === 'two-line' ? 'two-line' : 'single-line';
+        }
+        if (this.effectiveLayout === 'two-line' && this.layout !== 'responsive') {
             const cardNumberDiv = (0, tokenizer_utils_1.createFieldContainer)(this.numberEl, '1', tokenizer_constants_1.FIELD_FLEX.cardNumber.minWidth);
             cardNumberDiv.style.height = this.mergedStyles.input.height;
             cardNumberDiv.style.flexBasis = '100%';
+            this.cardNumberDiv = cardNumberDiv;
             container.appendChild(cardNumberDiv);
             this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
@@ -784,11 +852,13 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             container.appendChild(this.expiryEl);
             const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, '1', tokenizer_constants_1.FIELD_FLEX.cvv.minWidth);
             cvvDiv.style.height = this.mergedStyles.input.height;
+            this.cvvDiv = cvvDiv;
             container.appendChild(cvvDiv);
         }
         else {
             const cardNumberDiv = (0, tokenizer_utils_1.createFieldContainer)(this.numberEl, tokenizer_constants_1.FIELD_FLEX.cardNumber.flex, tokenizer_constants_1.FIELD_FLEX.cardNumber.minWidth);
             cardNumberDiv.style.height = this.mergedStyles.input.height;
+            this.cardNumberDiv = cardNumberDiv;
             container.appendChild(cardNumberDiv);
             this.expiryEl = (0, tokenizer_utils_1.createInputElement)(this.expiryId, 'text', tokenizer_constants_1.PLACEHOLDERS.expiry, tokenizer_constants_1.FIELD_CONSTRAINTS.expiry.maxLength);
             Object.assign(this.expiryEl.style, {
@@ -809,7 +879,12 @@ class SpreedlyTokenizer extends Tokenizer_1.Tokenizer {
             container.appendChild(this.expiryEl);
             const cvvDiv = (0, tokenizer_utils_1.createFieldContainer)(this.cvvEl, tokenizer_constants_1.FIELD_FLEX.cvv.flex, tokenizer_constants_1.FIELD_FLEX.cvv.minWidth);
             cvvDiv.style.height = this.mergedStyles.input.height;
+            this.cvvDiv = cvvDiv;
             container.appendChild(cvvDiv);
+            if (this.layout === 'responsive') {
+                this.applyLayoutStyles(this.effectiveLayout);
+                this.setupResizeObserver();
+            }
         }
     }
     createBankAccountFields(container) {

package/dist/tokenize/styles.d.ts

@@ -1,4 +1,4 @@
 import { TokenizerStyling, TokenizerStylingComplete } from './types';
 export declare const DEFAULT_UNIFIED_STYLES: TokenizerStylingComplete;
 export declare function mergeStyles(defaults: TokenizerStylingComplete, userStyles?: TokenizerStyling): TokenizerStylingComplete;
-export declare function getContainerStylesForLayout(baseStyles: TokenizerStylingComplete, layout?: 'single-line' | 'two-line'): TokenizerStylingComplete;
+export declare function getContainerStylesForLayout(baseStyles: TokenizerStylingComplete, layout?: 'single-line' | 'two-line' | 'responsive'): TokenizerStylingComplete;

package/dist/tokenize/styles.js

@@ -32,6 +32,11 @@ exports.DEFAULT_UNIFIED_STYLES = {
         flexWrap: 'nowrap',
         rowGap: '1rem',
     },
+    twoLine: {
+        padding: '',
+        fontSize: '',
+        textAlign: '',
+    },
 };
 function mergeStyles(defaults, userStyles) {
     if (!userStyles)
@@ -41,6 +46,7 @@ function mergeStyles(defaults, userStyles) {
         focus: Object.assign(Object.assign({}, defaults.focus), userStyles.focus),
         error: Object.assign(Object.assign({}, defaults.error), userStyles.error),
         container: Object.assign(Object.assign({}, defaults.container), userStyles.container),
+        twoLine: Object.assign(Object.assign({}, defaults.twoLine), userStyles.twoLine),
     };
 }
 function getContainerStylesForLayout(baseStyles, layout = 'single-line') {

package/dist/tokenize/tokenizer-constants.d.ts

@@ -60,3 +60,4 @@ export declare const FIELD_CONSTRAINTS: {
         readonly maxLength: 4;
     };
 };
+export declare const RESPONSIVE_BREAKPOINT = 400;

package/dist/tokenize/tokenizer-constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FIELD_CONSTRAINTS = exports.PLACEHOLDERS = exports.CANADIAN_BANK_FIELD_FLEX = exports.BANK_FIELD_FLEX = exports.FIELD_FLEX = exports.TOKENIZE_TIMEOUT = exports.INIT_TIMEOUT = void 0;
+exports.RESPONSIVE_BREAKPOINT = exports.FIELD_CONSTRAINTS = exports.PLACEHOLDERS = exports.CANADIAN_BANK_FIELD_FLEX = exports.BANK_FIELD_FLEX = exports.FIELD_FLEX = exports.TOKENIZE_TIMEOUT = exports.INIT_TIMEOUT = void 0;
 exports.INIT_TIMEOUT = 10000;
 exports.TOKENIZE_TIMEOUT = 30000;
 exports.FIELD_FLEX = {
@@ -63,3 +63,4 @@ exports.FIELD_CONSTRAINTS = {
         maxLength: 4,
     },
 };
+exports.RESPONSIVE_BREAKPOINT = 400;

package/dist/tokenize/types.d.ts

@@ -18,7 +18,8 @@ export interface TokenizerContainer {
     mode?: PaymentMethodMode;
     bankCountry?: 'US' | 'CA';
     enableTestMode?: boolean;
-    layout?: 'single-line' | 'two-line';
+    layout?: 'single-line' | 'two-line' | 'responsive';
+    responsiveBreakpoint?: number;
 }
 export interface TokenizerStylingComplete {
     input: {
@@ -52,6 +53,11 @@ export interface TokenizerStylingComplete {
         flexWrap?: string;
         rowGap?: string;
     };
+    twoLine: {
+        padding: string;
+        fontSize: string;
+        textAlign: string;
+    };
 }
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@idonatedev/idonate-sdk",
 	"author": "iDonate",
-	"version": "1.2.0-dev7",
+	"version": "1.2.0-dev9",
 	"sideEffects": false,
 	"description": "iDonate Web SDK",
 	"engines": {
@@ -89,5 +89,6 @@
 		"@types/spreedly-iframe-browser": "^1.0.3",
 		"@types/uuid": "^8.3.1",
 		"uuid": "^8.3.2"
-	}
+	},
+	"packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67"
 }