rebill-web-components-sdk 1.8.23 → 1.8.25

package/dist/components/{p-DLh7v0Ng.js → p-Dzeq5BdH.js}

@@ -5,10 +5,10 @@ import { B as BREAKPOINT_ENUM, g as getBreakpoint } from './p-Do_vNuMa.js';
 import { C as COLORS_ENUM } from './p-DA598vBj.js';
 import { d as defineCustomElement$7 } from './p-B48kVXFC.js';
 import { d as defineCustomElement$6 } from './p-DaYZxslj.js';
-import { d as defineCustomElement$5 } from './p-D2wX2Bnk.js';
-import { d as defineCustomElement$4 } from './p-DVmistTq.js';
+import { d as defineCustomElement$5 } from './p-C4TcKKa8.js';
+import { d as defineCustomElement$4 } from './p-BIHeH7ht.js';
 import { d as defineCustomElement$3 } from './p-BSay3C61.js';
-import { d as defineCustomElement$2 } from './p-CWdTbodL.js';
+import { d as defineCustomElement$2 } from './p-Bw7Jq0SL.js';
 import { d as defineCustomElement$1 } from './p-C_txMekS.js';
 
 const processingPaymentCss = ".lottie-container{margin-bottom:2rem;display:flex;justify-content:center;align-items:center}.lottie-animation{width:166px;height:165px;display:flex;justify-content:center;align-items:center}.text-content{margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.security-badge{width:100%;max-width:450px;height:40px;display:flex;align-items:center;justify-content:center;background:#ebedef;border-radius:8px;box-sizing:border-box}.lock-icon{width:16px;height:16px;color:var(--rebill-color-text-secondary, #6b7280)}@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:0.8}}.contact-info{text-align:left}@media (max-width: 1024px){.security-badge{width:100%;max-width:100%}.lottie-animation{width:166px;height:165px}.text-content{gap:12px}}@media (max-width: 767px){.processing-container{padding:0 16px}}.processing-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}";
@@ -152,6 +152,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { ProcessingPayment as P, defineCustomElement as d };
-//# sourceMappingURL=p-DLh7v0Ng.js.map
+//# sourceMappingURL=p-Dzeq5BdH.js.map
 
-//# sourceMappingURL=p-DLh7v0Ng.js.map
+//# sourceMappingURL=p-Dzeq5BdH.js.map

package/dist/components/{p-DLh7v0Ng.js.map → p-Dzeq5BdH.js.map}

@@ -1 +1 @@
-{"file":"p-DLh7v0Ng.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,88BAA88B;;MCa99B,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;;AACnB,IAAA,aAAa,GAAWC,KAAY,CAAC,aAAa;AAClD,IAAA,UAAU,GAAoB,eAAe,CAAC,OAAO;IACrD,cAAc,GAAW,CAAC;IAC1B,eAAe,GAAY,IAAI;AAEhC,IAAA,6BAA6B;AAC7B,IAAA,gBAAgB;AAChB,IAAA,eAAe;AACf,IAAA,eAAe;IAEvB,iBAAiB,GAAA;QACf,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC;QAClD,IAAI,CAAC,6BAA6B,GAAG,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE,MAAK;AAC/E,YAAA,IAAI,CAAC,aAAa,GAAGA,KAAY,CAAC,aAAa;AACjD,SAAC,CAAC;;IAGJ,gBAAgB,GAAA;QACd,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;QACpD,IAAI,CAAC,mBAAmB,EAAE;;IAG5B,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,6BAA6B,EAAE;YACtC,IAAI,CAAC,6BAA6B,EAAE;;QAEtC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;QACvD,IAAI,CAAC,mBAAmB,EAAE;;IAGpB,YAAY,GAAG,MAAK;QAC1B,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC;AACpD,KAAC;IAEO,mBAAmB,GAAG,YAAW;AACvC,QAAA,IAAI;AACF,YAAA,MAAM,MAAM,GAAG,MAAM,OAAO,iBAAY,oCAAC;YACzC,MAAM,aAAa,GAAG,MAAM,KAAK,CAAC,WAAW,CAAC,CAAA,mBAAA,CAAqB,CAAC,CAAC;AACrE,YAAA,MAAM,aAAa,GAAG,MAAM,aAAa,CAAC,IAAI,EAAE;AAEhD,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC;oBAClD,SAAS,EAAE,IAAI,CAAC,eAAe;AAC/B,oBAAA,QAAQ,EAAE,KAAK;AACf,oBAAA,IAAI,EAAE,IAAI;AACV,oBAAA,QAAQ,EAAE,IAAI;AACd,oBAAA,aAAa,EAAE,aAAa;AAC7B,iBAAA,CAAC;;iBACG;gBACL,IAAI,CAAC,oBAAoB,EAAE;;;QAE7B,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,oBAAoB,EAAE;;AAE/B,KAAC;IAEO,oBAAoB,GAAG,MAAK;QAClC,MAAM,QAAQ,GAAG,IAAI;AACrB,QAAA,MAAM,QAAQ,GAAG,EAAE,CAAC;QACpB,MAAM,SAAS,GAAG,CAAC,QAAQ,GAAG,QAAQ,IAAI,GAAG;QAE7C,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,WAAW,CAAC,MAAK;AAC9C,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,GAAG,SAAS,EAAE,GAAG,CAAC;AACpE,YAAA,IAAI,IAAI,CAAC,cAAc,IAAI,GAAG,EAAE;gBAC9B,IAAI,CAAC,mBAAmB,EAAE;;SAE7B,EAAE,QAAQ,CAAC;AACd,KAAC;IAEO,mBAAmB,GAAG,MAAK;AACjC,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,aAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC;AACpC,YAAA,IAAI,CAAC,gBAAgB,GAAG,SAAS;;AAEnC,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;AAC9B,YAAA,IAAI,CAAC,eAAe,GAAG,SAAS;;AAEpC,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,+BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAE/B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,kBAAkB,GAAO,CACxE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,EAAA,EACjE,WAAW,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAClC,EACpB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,OAAO,EAAC,eAAe,EAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,EAAA,EAC5E,WAAW,CAAC,SAAS,CAAC,+BAA+B,CAAC,CACrC,CAChB,EAEN,CACE,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,gBAAgB,EACxB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,mBAAmB,CAAC,EACnD,CAAA,CACE,CACwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/processing-payment/processing-payment.css?tag=rebill-processing-payment","src/components/checkout/processing-payment/processing-payment.tsx"],"sourcesContent":["/* Lottie Animation */\n.lottie-container {\n  margin-bottom: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.lottie-animation {\n  width: 166px;\n  height: 165px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* Text Content */\n.text-content {\n  margin-bottom: 2rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n/* Security Badge */\n.security-badge {\n  width: 100%;\n  max-width: 450px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #ebedef;\n  border-radius: 8px;\n  box-sizing: border-box;\n}\n\n.lock-icon {\n  width: 16px;\n  height: 16px;\n  color: var(--rebill-color-text-secondary, #6b7280);\n}\n\n/* Animation */\n@keyframes pulse {\n  0%,\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n}\n\n.contact-info {\n  text-align: left;\n}\n\n/* Responsive Styles */\n@media (max-width: 1024px) {\n  .security-badge {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  .lottie-animation {\n    width: 166px;\n    height: 165px;\n  }\n\n  .text-content {\n    gap: 12px;\n  }\n}\n\n@media (max-width: 767px) {\n  .processing-container {\n    padding: 0 16px;\n  }\n}\n\n.processing-container {\n  width: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n","import { Component, h, State } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { getAssetURL } from '../../../utils/assets';\nimport { BREAKPOINT_ENUM, getBreakpoint } from '../../../utils/breakpoint';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport '../../shared/card-icon/card-icon';\n\n@Component({\n  tag: 'rebill-processing-payment',\n  styleUrl: 'processing-payment.css',\n  shadow: false,\n})\nexport class ProcessingPayment {\n  @State() currentLocale: string = sessionState.currentLocale;\n  @State() breakpoint: BREAKPOINT_ENUM = BREAKPOINT_ENUM.DESKTOP;\n  @State() loaderProgress: number = 0;\n  @State() isLoadingLottie: boolean = true;\n\n  private unsubscribeCurrentLocaleStore?: () => void;\n  private progressInterval?: number;\n  private lottieContainer?: HTMLElement;\n  private lottieAnimation?: any;\n\n  componentWillLoad() {\n    this.breakpoint = getBreakpoint(window.innerWidth);\n    this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n      this.currentLocale = sessionState.currentLocale;\n    });\n  }\n\n  componentDidLoad() {\n    window.addEventListener('resize', this.handleResize);\n    this.loadLottieAnimation();\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeCurrentLocaleStore) {\n      this.unsubscribeCurrentLocaleStore();\n    }\n    window.removeEventListener('resize', this.handleResize);\n    this.stopLoaderAnimation();\n  }\n\n  private handleResize = () => {\n    this.breakpoint = getBreakpoint(window.innerWidth);\n  };\n\n  private loadLottieAnimation = async () => {\n    try {\n      const lottie = await import('lottie-web');\n      const animationData = await fetch(getAssetURL(`loader-card-v2.json`));\n      const animationJson = await animationData.json();\n\n      if (this.lottieContainer) {\n        this.lottieAnimation = lottie.default.loadAnimation({\n          container: this.lottieContainer,\n          renderer: 'svg',\n          loop: true,\n          autoplay: true,\n          animationData: animationJson,\n        });\n      } else {\n        this.startLoaderAnimation();\n      }\n    } catch (error) {\n      this.startLoaderAnimation();\n    }\n  };\n\n  private startLoaderAnimation = () => {\n    const duration = 2000;\n    const interval = 50; // Update every 50ms\n    const increment = (interval / duration) * 100;\n\n    this.progressInterval = window.setInterval(() => {\n      this.loaderProgress = Math.min(this.loaderProgress + increment, 100);\n      if (this.loaderProgress >= 100) {\n        this.stopLoaderAnimation();\n      }\n    }, interval);\n  };\n\n  private stopLoaderAnimation = () => {\n    if (this.progressInterval) {\n      clearInterval(this.progressInterval);\n      this.progressInterval = undefined;\n    }\n    if (this.lottieAnimation) {\n      this.lottieAnimation.destroy();\n      this.lottieAnimation = undefined;\n    }\n  };\n\n  render() {\n    return (\n      <rebill-checkout-single-column>\n        <div class=\"processing-container\">\n          {/* Lottie Animation */}\n          <div class=\"lottie-container\">\n            <div ref={el => (this.lottieContainer = el)} class=\"lottie-animation\"></div>\n          </div>\n          <div class=\"text-content\">\n            <rebill-typography variant=\"h3\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n              {I18nService.translate('processing.processingTitle')}\n            </rebill-typography>\n            <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n              {I18nService.translate('processing.processingSubtitle')}\n            </rebill-typography>\n          </div>\n\n          <rebill-alert\n            type=\"secure\"\n            variant=\"variant-secure\"\n            icon=\"lock-outline\"\n            message={I18nService.translate('otp.secureMessage')}\n          />\n        </div>\n      </rebill-checkout-single-column>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Dzeq5BdH.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/processing-payment/processing-payment.css?tag=rebill-processing-payment","src/components/checkout/processing-payment/processing-payment.tsx"],"sourcesContent":["/* Lottie Animation */\n.lottie-container {\n  margin-bottom: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.lottie-animation {\n  width: 166px;\n  height: 165px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* Text Content */\n.text-content {\n  margin-bottom: 2rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n/* Security Badge */\n.security-badge {\n  width: 100%;\n  max-width: 450px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #ebedef;\n  border-radius: 8px;\n  box-sizing: border-box;\n}\n\n.lock-icon {\n  width: 16px;\n  height: 16px;\n  color: var(--rebill-color-text-secondary, #6b7280);\n}\n\n/* Animation */\n@keyframes pulse {\n  0%,\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n}\n\n.contact-info {\n  text-align: left;\n}\n\n/* Responsive Styles */\n@media (max-width: 1024px) {\n  .security-badge {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  .lottie-animation {\n    width: 166px;\n    height: 165px;\n  }\n\n  .text-content {\n    gap: 12px;\n  }\n}\n\n@media (max-width: 767px) {\n  .processing-container {\n    padding: 0 16px;\n  }\n}\n\n.processing-container {\n  width: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n","import { Component, h, State } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState, SessionStore } from '../../../store/session.store';\nimport { getAssetURL } from '../../../utils/assets';\nimport { BREAKPOINT_ENUM, getBreakpoint } from '../../../utils/breakpoint';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\nimport '../../shared/card-icon/card-icon';\n\n@Component({\n  tag: 'rebill-processing-payment',\n  styleUrl: 'processing-payment.css',\n  shadow: false,\n})\nexport class ProcessingPayment {\n  @State() currentLocale: string = sessionState.currentLocale;\n  @State() breakpoint: BREAKPOINT_ENUM = BREAKPOINT_ENUM.DESKTOP;\n  @State() loaderProgress: number = 0;\n  @State() isLoadingLottie: boolean = true;\n\n  private unsubscribeCurrentLocaleStore?: () => void;\n  private progressInterval?: number;\n  private lottieContainer?: HTMLElement;\n  private lottieAnimation?: any;\n\n  componentWillLoad() {\n    this.breakpoint = getBreakpoint(window.innerWidth);\n    this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n      this.currentLocale = sessionState.currentLocale;\n    });\n  }\n\n  componentDidLoad() {\n    window.addEventListener('resize', this.handleResize);\n    this.loadLottieAnimation();\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeCurrentLocaleStore) {\n      this.unsubscribeCurrentLocaleStore();\n    }\n    window.removeEventListener('resize', this.handleResize);\n    this.stopLoaderAnimation();\n  }\n\n  private handleResize = () => {\n    this.breakpoint = getBreakpoint(window.innerWidth);\n  };\n\n  private loadLottieAnimation = async () => {\n    try {\n      const lottie = await import('lottie-web');\n      const animationData = await fetch(getAssetURL(`loader-card-v2.json`));\n      const animationJson = await animationData.json();\n\n      if (this.lottieContainer) {\n        this.lottieAnimation = lottie.default.loadAnimation({\n          container: this.lottieContainer,\n          renderer: 'svg',\n          loop: true,\n          autoplay: true,\n          animationData: animationJson,\n        });\n      } else {\n        this.startLoaderAnimation();\n      }\n    } catch (error) {\n      this.startLoaderAnimation();\n    }\n  };\n\n  private startLoaderAnimation = () => {\n    const duration = 2000;\n    const interval = 50; // Update every 50ms\n    const increment = (interval / duration) * 100;\n\n    this.progressInterval = window.setInterval(() => {\n      this.loaderProgress = Math.min(this.loaderProgress + increment, 100);\n      if (this.loaderProgress >= 100) {\n        this.stopLoaderAnimation();\n      }\n    }, interval);\n  };\n\n  private stopLoaderAnimation = () => {\n    if (this.progressInterval) {\n      clearInterval(this.progressInterval);\n      this.progressInterval = undefined;\n    }\n    if (this.lottieAnimation) {\n      this.lottieAnimation.destroy();\n      this.lottieAnimation = undefined;\n    }\n  };\n\n  render() {\n    return (\n      <rebill-checkout-single-column>\n        <div class=\"processing-container\">\n          {/* Lottie Animation */}\n          <div class=\"lottie-container\">\n            <div ref={el => (this.lottieContainer = el)} class=\"lottie-animation\"></div>\n          </div>\n          <div class=\"text-content\">\n            <rebill-typography variant=\"h3\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n              {I18nService.translate('processing.processingTitle')}\n            </rebill-typography>\n            <rebill-typography variant=\"subtitle-bold\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n              {I18nService.translate('processing.processingSubtitle')}\n            </rebill-typography>\n          </div>\n\n          <rebill-alert\n            type=\"secure\"\n            variant=\"variant-secure\"\n            icon=\"lock-outline\"\n            message={I18nService.translate('otp.secureMessage')}\n          />\n        </div>\n      </rebill-checkout-single-column>\n    );\n  }\n}\n"],"version":3}

package/dist/components/payment-method-selector.js

@@ -1,4 +1,4 @@
-import { P as PaymentMethodSelector$1, d as defineCustomElement$1 } from './p-B8GIr65u.js';
+import { P as PaymentMethodSelector$1, d as defineCustomElement$1 } from './p--gCxFWo3.js';
 
 const PaymentMethodSelector = PaymentMethodSelector$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rebill-address-form.js

@@ -1,4 +1,4 @@
-import { A as AddressForm, d as defineCustomElement$1 } from './p-y5rBN7LS.js';
+import { A as AddressForm, d as defineCustomElement$1 } from './p-Coc_KFqp.js';
 
 const RebillAddressForm = AddressForm;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rebill-address-search.js

@@ -1,4 +1,4 @@
-import { A as AddressSearch, d as defineCustomElement$1 } from './p-Mgbx0b10.js';
+import { A as AddressSearch, d as defineCustomElement$1 } from './p--RloWBLk.js';
 
 const RebillAddressSearch = AddressSearch;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rebill-address.js

@@ -1,4 +1,4 @@
-import { A as Address, d as defineCustomElement$1 } from './p-DgIW2T8E.js';
+import { A as Address, d as defineCustomElement$1 } from './p-CVQ9SnQp.js';
 
 const RebillAddress = Address;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rebill-bank-selector.js

@@ -1,4 +1,4 @@
-import { B as BankSelector, d as defineCustomElement$1 } from './p-c9SkZ__E.js';
+import { B as BankSelector, d as defineCustomElement$1 } from './p-Bb1L1oJK.js';
 
 const RebillBankSelector = BankSelector;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rebill-checkout-single-column.js

@@ -1,4 +1,4 @@
-import { L as LayoutCheckoutSingleColumn, d as defineCustomElement$1 } from './p-D2wX2Bnk.js';
+import { L as LayoutCheckoutSingleColumn, d as defineCustomElement$1 } from './p-C4TcKKa8.js';
 
 const RebillCheckoutSingleColumn = LayoutCheckoutSingleColumn;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/rebill-checkout.js

@@ -4,45 +4,45 @@ import { a as api } from './p-Dh-yfb0D.js';
 import { m as mapRequiredFields, g as generateIdempotencyKey, P as PaymentMessageE, C as CheckoutStatusE, i as isFieldRequired, a as PaymentErrorMapper, b as getFieldValues } from './p-BRI7iMx8.js';
 import { P as PaymentMethodMapper, S as STATUS_REQ_CHECKOUT_APM, d as defineCustomElement$P } from './p-yU1zKrb6.js';
 import { d as defineCustomElement$D } from './p-DZKiNnX2.js';
-import { d as defineCustomElement$e } from './p-DLh7v0Ng.js';
-import { d as defineCustomElement$d } from './p-D9Eow84L.js';
+import { d as defineCustomElement$e } from './p-Dzeq5BdH.js';
+import { d as defineCustomElement$d } from './p-BnUMlZY9.js';
 import { d as defineCustomElement$2 } from './p-QHSLjyEd.js';
 import { d as defineCustomElement$F } from './p-B48kVXFC.js';
 import { s as state, S as SESSION_TYPE_ENUM, I as I18nService, a as SessionStore, i as initializeI18nWithSessionLanguage, P as PAYMENT_METHOD_ENUM, o as onChange, b as SESSION_ITEM_TYPE_ENUM } from './p-DEZl2gyc.js';
 import { B as BREAKPOINT_ENUM, g as getBreakpoint, i as isBreakpointBelow } from './p-Do_vNuMa.js';
-import { G as GoogleMapsService, d as defineCustomElement$y } from './p-Mgbx0b10.js';
+import { G as GoogleMapsService, d as defineCustomElement$y } from './p--RloWBLk.js';
 import { d as defineCustomElement$g } from './p-CMD8SCGS.js';
 import { d as defineCustomElement$O } from './p-Bc7nIXet.js';
 import { d as defineCustomElement$N } from './p-BY4Pzc-R.js';
-import { d as defineCustomElement$M } from './p-DTjDV-2m.js';
-import { d as defineCustomElement$L } from './p-DQIG3sUQ.js';
+import { d as defineCustomElement$M } from './p-BxXWkB7L.js';
+import { d as defineCustomElement$L } from './p-CH8Qt-7B.js';
 import { d as defineCustomElement$K } from './p-BKlWxPzb.js';
 import { d as defineCustomElement$J } from './p-C1PdnVhw.js';
 import { d as defineCustomElement$I } from './p-C40S4S5D.js';
-import { d as defineCustomElement$H } from './p-DuW9_9Co.js';
+import { d as defineCustomElement$H } from './p-Cqrdj1mj.js';
 import { d as defineCustomElement$G } from './p-b3y0ldGK.js';
 import { d as defineCustomElement$E } from './p-2hFT3wni.js';
-import { d as defineCustomElement$C } from './p-B8GIr65u.js';
+import { d as defineCustomElement$C } from './p--gCxFWo3.js';
 import { d as defineCustomElement$B } from './p-qmr2qRdk.js';
-import { d as defineCustomElement$A } from './p-DgIW2T8E.js';
-import { d as defineCustomElement$z } from './p-y5rBN7LS.js';
+import { d as defineCustomElement$A } from './p-CVQ9SnQp.js';
+import { d as defineCustomElement$z } from './p-Coc_KFqp.js';
 import { d as defineCustomElement$x } from './p-DaYZxslj.js';
-import { d as defineCustomElement$w } from './p-c9SkZ__E.js';
+import { d as defineCustomElement$w } from './p-Bb1L1oJK.js';
 import { d as defineCustomElement$v } from './p-B49WDo0h.js';
 import { d as defineCustomElement$u } from './p-CVtYHkf8.js';
 import { d as defineCustomElement$t } from './p-N5kDm5Y3.js';
 import { d as defineCustomElement$s } from './p-DSIrgN-9.js';
-import { d as defineCustomElement$r } from './p-D2wX2Bnk.js';
+import { d as defineCustomElement$r } from './p-C4TcKKa8.js';
 import { d as defineCustomElement$q } from './p-BTR6Geae.js';
-import { d as defineCustomElement$p } from './p-DVmistTq.js';
+import { d as defineCustomElement$p } from './p-BIHeH7ht.js';
 import { d as defineCustomElement$o } from './p-f6IvxFra.js';
 import { d as defineCustomElement$n } from './p-BSay3C61.js';
-import { d as defineCustomElement$m } from './p-B9fIqz0z.js';
-import { d as defineCustomElement$l } from './p-BpkqlhjE.js';
-import { d as defineCustomElement$k } from './p-CWdTbodL.js';
-import { d as defineCustomElement$j } from './p-DStRg6vz.js';
-import { d as defineCustomElement$i } from './p-BgJ9ZORq.js';
-import { d as defineCustomElement$h } from './p-8eukGNL9.js';
+import { d as defineCustomElement$m } from './p-DSnJHRr3.js';
+import { d as defineCustomElement$l } from './p-DUxs56Lj.js';
+import { d as defineCustomElement$k } from './p-Bw7Jq0SL.js';
+import { d as defineCustomElement$j } from './p-BJHx0OQj.js';
+import { d as defineCustomElement$i } from './p-BZj9nSOY.js';
+import { d as defineCustomElement$h } from './p-C2gtk16s.js';
 import { d as defineCustomElement$f } from './p-q89ptYxi.js';
 import { d as defineCustomElement$c } from './p-CszILNbN.js';
 import { d as defineCustomElement$b } from './p-LIIHFFLB.js';
@@ -51,9 +51,9 @@ import { d as defineCustomElement$9 } from './p-DTk6aYAr.js';
 import { d as defineCustomElement$8 } from './p-CjAwP54Z.js';
 import { d as defineCustomElement$7 } from './p-xpOb67FC.js';
 import { d as defineCustomElement$6 } from './p-DHqT8Dlg.js';
-import { d as defineCustomElement$5 } from './p-CHUzEc6D.js';
-import { d as defineCustomElement$4 } from './p-zU9a56AF.js';
-import { d as defineCustomElement$3 } from './p-6aqJA2NI.js';
+import { d as defineCustomElement$5 } from './p-C8lHS2ZV.js';
+import { d as defineCustomElement$4 } from './p-BeNxLLvH.js';
+import { d as defineCustomElement$3 } from './p-CYC_SbCo.js';
 
 /**
  * Default display configuration with all sections enabled
@@ -500,6 +500,9 @@ const RebillCheckout$1 = /*@__PURE__*/ proxyCustomElement(class RebillCheckout e
             GoogleMapsService.loadGoogleMapsScript();
             const response = await api.data.getCountries();
             this.countries = response.data;
+            if (this.parsedCustomerInformation) {
+                SessionStore.setUserInformation(this.parsedCustomerInformation);
+            }
             this.initialData = this.getInitialData();
             this.allRequiredFields = await getAllRequiredFields();
             if (this.filteredPaymentMethods.length > 0) {
@@ -1065,8 +1068,8 @@ const RebillCheckout$1 = /*@__PURE__*/ proxyCustomElement(class RebillCheckout e
             label: country.country,
             value: country.isoCountryCode,
         }));
-        const renderRebillSummary = (props = {}) => (h("rebill-summary", { key: '889ee4307f38fbed3dd973d68d4e71979519b971', totalAmount: state.data.pricing.total, currency: state.data.pricing.currency, itemTitle: state._session?.getTitle(), itemDescription: state._session?.getDescription(), itemAmount: state.data.pricing.subtotal, subtotal: state.data.pricing.subtotal, allowCoupon: state._session?.getAllowCoupon(this.displayConfig), currentBreakpoint: this.breakpoint, planFrequency: state._session?.getPlanFrequency(), planFrequencyCount: state._session?.getPlanFrequencyCount(), discountType: state.data.discount.discountType, discountedPercentage: state.data.discount.discountedPercentage, discountDuration: state.data.discount.discountDuration, discountAmount: state.data.discount.discountAmount, ...props }));
-        return (state.isInitialized && (h(h.Fragment, null, this.showRefreshModal && h("rebill-modal-overlay", { key: 'ab3333710743b424ad676702aba95f4c2ea83f92' }), this.displayConfig.processingPayment && (h("rebill-processing-payment", { key: '30e84979156a983056fe59ed1d684dafc0adc1d9', style: { display: this.isCardSubmitting ? 'block' : 'none' } })), this.displayConfig.successPage &&
+        const renderRebillSummary = (props = {}) => (h("rebill-summary", { key: '16fdd9759135895d7c3a64441715df1a53d1d44f', totalAmount: state.data.pricing.total, currency: state.data.pricing.currency, itemTitle: state._session?.getTitle(), itemDescription: state._session?.getDescription(), itemAmount: state.data.pricing.subtotal, subtotal: state.data.pricing.subtotal, allowCoupon: state._session?.getAllowCoupon(this.displayConfig), currentBreakpoint: this.breakpoint, planFrequency: state._session?.getPlanFrequency(), planFrequencyCount: state._session?.getPlanFrequencyCount(), discountType: state.data.discount.discountType, discountedPercentage: state.data.discount.discountedPercentage, discountDuration: state.data.discount.discountDuration, discountAmount: state.data.discount.discountAmount, ...props }));
+        return (state.isInitialized && (h(h.Fragment, null, this.showRefreshModal && h("rebill-modal-overlay", { key: 'a015528effd8f661aac44f6bc692da7dc25693a0' }), this.displayConfig.processingPayment && (h("rebill-processing-payment", { key: '4213db86bc17a1e06972b8dce1b5c63da815ab30', style: { display: this.isCardSubmitting ? 'block' : 'none' } })), this.displayConfig.successPage &&
             this.isPaymentApproved() &&
             state.isInitialized ? (h("success-page", { typePaymentMethod: state.data.paymentMethodSelected, paymentMethodName: PaymentMethodMapper.mapToAPMPaymentMethod(state.data.paymentMethodSelected ||
                 state.data.payment?.paymentMethodType, state.data?.pricing?.country), country: state.data?.pricing?.country, bank: state.data.payment?.paymentMethodMetadata?.bank ||