rebill-web-components-sdk 1.10.5 → 1.10.7-beta.0

package/dist/components/{p-0y1EkPsV.js → p-CRMAYXj0.js}

@@ -1,6 +1,6 @@
 import { proxyCustomElement, H, createEvent, h } from './p-8BpuJ_V5.js';
 import { S as SessionStore } from './p-Be63Lt_2.js';
-import { d as defineCustomElement$1 } from './p-Cs-pA3OO.js';
+import { d as defineCustomElement$1 } from './p-DVaxhIJe.js';
 
 function useCheckoutForm() {
     const syncFormDataToStore = (formData) => {
@@ -195,6 +195,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { CheckoutForm as C, defineCustomElement as d };
-//# sourceMappingURL=p-0y1EkPsV.js.map
+//# sourceMappingURL=p-CRMAYXj0.js.map
 
-//# sourceMappingURL=p-0y1EkPsV.js.map
+//# sourceMappingURL=p-CRMAYXj0.js.map

package/dist/components/{p-0y1EkPsV.js.map → p-CRMAYXj0.js.map}

@@ -1 +1 @@
-{"file":"p-0y1EkPsV.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/hooks/useCheckoutForm.ts","src/components/checkout/checkout-form/checkout-form.tsx"],"sourcesContent":["import { SessionStore } from '../store/session.store';\nimport { FormData, FormErrors } from '../utils/form-validation';\n\nexport interface UseCheckoutFormOptions {\n  onFormChange?: (formData: FormData) => void;\n  onFormSubmit?: (formData: FormData) => void;\n}\n\nexport interface UseCheckoutFormReturn {\n  syncFormDataToStore: (formData: FormData) => void;\n  handlePhoneValidation: (formData: FormData, errors: FormErrors) => FormErrors;\n  getPhoneRelatedFields: () => string[];\n  getTextFields: () => string[];\n  shouldValidateField: (id: string) => boolean;\n  clearPhoneErrors: (formData: FormData, errors: FormErrors) => FormErrors;\n}\n\nexport function useCheckoutForm(): UseCheckoutFormReturn {\n  const syncFormDataToStore = (formData: FormData) => {\n    // Sync user information\n    if (formData.email !== undefined) {\n      SessionStore.setUserInformation({ email: formData.email });\n    }\n    if (formData.fullName !== undefined) {\n      SessionStore.setUserInformation({ fullName: formData.fullName });\n    }\n    if (formData.phoneNumber !== undefined) {\n      SessionStore.setUserPhoneNumber({\n        number: formData.phoneNumber,\n        countryCode: formData.countryCodePhoneNumber || '',\n      });\n    }\n    if (formData.countryCodePhoneNumber !== undefined) {\n      SessionStore.setUserPhoneNumber({\n        number: formData.phoneNumber || '',\n        countryCode: formData.countryCodePhoneNumber,\n      });\n    }\n\n    // Sync billing address\n    if (\n      formData['billing-country'] !== undefined ||\n      formData['billing-state'] !== undefined ||\n      formData['billing-address'] !== undefined ||\n      formData['billing-city'] !== undefined ||\n      formData['billing-zip'] !== undefined ||\n      formData['billing-addInformation'] !== undefined\n    ) {\n      SessionStore.setBillingAddress({\n        country: formData['billing-country'],\n        state: formData['billing-state'],\n        address: formData['billing-address'],\n        city: formData['billing-city'],\n        zip: formData['billing-zip'],\n        addInformation: formData['billing-addInformation'],\n      });\n    }\n\n    if (formData.bankId !== undefined) {\n      SessionStore.setBankId(formData.bankId);\n    }\n  };\n\n  const handlePhoneValidation = (formData: FormData, errors: FormErrors): FormErrors => {\n    const updatedErrors = { ...errors };\n    if (formData.isValidPhoneNumber === undefined) {\n      if (formData.phoneNumber && formData.phoneNumber.trim() !== '') {\n        formData.isValidPhoneNumber = 'true';\n      } else {\n        formData.isValidPhoneNumber = 'false';\n      }\n    }\n    if (formData.phoneNumber !== undefined) {\n      if (formData?.isValidPhoneNumber === 'true' || formData?.isValidPhoneNumber === true) {\n        delete updatedErrors.phoneNumber;\n      } else if (\n        (formData.isValidPhoneNumber === 'false' || formData.isValidPhoneNumber === false) &&\n        formData.phoneNumber &&\n        formData.phoneNumber.trim() !== ''\n      ) {\n        updatedErrors.phoneNumber = 'validation.phoneRequired';\n      } else if (!formData.phoneNumber || formData.phoneNumber.trim() === '') {\n        updatedErrors.phoneNumber = 'validation.phoneRequired';\n      } else if (\n        formData.isValidPhoneNumber === undefined &&\n        formData.phoneNumber &&\n        formData.phoneNumber.trim() !== ''\n      ) {\n        delete updatedErrors.phoneNumber;\n      }\n    }\n\n    return updatedErrors;\n  };\n\n  const clearPhoneErrors = (formData: FormData, errors: FormErrors): FormErrors => {\n    const updatedErrors = { ...errors };\n\n    if (formData?.isValidPhoneNumber === 'true' || formData?.isValidPhoneNumber === true) {\n      delete updatedErrors.phoneNumber;\n    }\n\n    return updatedErrors;\n  };\n\n  const getPhoneRelatedFields = (): string[] => {\n    return ['phoneNumber', 'countryCodePhoneNumber', 'isValidPhoneNumber'];\n  };\n\n  const getTextFields = (): string[] => {\n    return [\n      'email',\n      'fullName',\n      'billing-address',\n      'billing-city',\n      'billing-state',\n      'billing-zip',\n      'billing-country',\n    ];\n  };\n\n  const shouldValidateField = (id: string): boolean => {\n    const phoneRelatedFields = getPhoneRelatedFields();\n    const textFields = getTextFields();\n\n    if (phoneRelatedFields.includes(id)) {\n      return false;\n    }\n    return textFields.includes(id);\n  };\n\n  return {\n    syncFormDataToStore,\n    handlePhoneValidation,\n    getPhoneRelatedFields,\n    getTextFields,\n    shouldValidateField,\n    clearPhoneErrors,\n  };\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop } from '@stencil/core';\nimport { useCheckoutForm } from '../../../hooks/useCheckoutForm';\nimport { FormData, FormErrors } from '../../../utils/form-validation';\n\n@Component({\n  tag: 'rebill-checkout-form',\n  shadow: false,\n})\nexport class CheckoutForm {\n  @Element() el: HTMLElement;\n\n  /** Esquema de validación del formulario */\n  @Prop() validationSchema: any;\n  /** Datos iniciales del formulario */\n  @Prop() initialData: FormData = {};\n  /** Evento cuando el formulario es válido y se envía */\n  @Event() submit: EventEmitter<FormData>;\n  /** Evento cuando hay cambios en el formulario */\n  @Event() change: EventEmitter<FormData>;\n  /** Función render prop para controlar el formulario */\n  @Prop() renderForm?: (props: {\n    submit: () => void;\n    formData: FormData;\n    errors: FormErrors;\n  }) => any;\n\n  private checkoutFormHook = useCheckoutForm();\n\n  private formElement: any;\n\n  componentDidLoad() {\n    if (this.formElement) {\n      // this.formElement.setSyncDataToStore(this.checkoutFormHook.syncFormDataToStore);\n      // this.formElement.setCustomValidation(this.checkoutFormHook.handlePhoneValidation);\n      // this.formElement.setGetRelatedFields((id: string) => {\n      //   const phoneRelatedFields = this.checkoutFormHook.getPhoneRelatedFields();\n      //   return phoneRelatedFields.includes(id) ? phoneRelatedFields : [];\n      // });\n      // this.formElement.setShouldValidateField(this.checkoutFormHook.shouldValidateField);\n    }\n  }\n\n  @Listen('change')\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n\n    // Guard: ignore unrelated change events without proper payload\n    if (!formData || typeof formData !== 'object') {\n      return;\n    }\n\n    if (formData?.isValidPhoneNumber === 'true' && this.formElement) {\n      this.formElement.clearError('phoneNumber');\n    }\n\n    if (\n      (formData as any).phoneNumber !== undefined &&\n      this.formElement &&\n      this.formElement.hasSubmitted\n    ) {\n      if (this.checkoutFormHook.handlePhoneValidation) {\n        const updatedErrors = this.checkoutFormHook.handlePhoneValidation(\n          formData,\n          this.formElement.errors || {},\n        );\n        this.formElement.errors = updatedErrors;\n      }\n    }\n  }\n\n  private handleSubmit = (formData: FormData) => {\n    this.submit.emit(formData);\n  };\n\n  private handleChange = (formData: FormData) => {\n    this.change.emit(formData);\n  };\n\n  @Method()\n  async resetValidation() {\n    if (this.formElement) {\n      await this.formElement.resetValidation();\n    }\n  }\n\n  render() {\n    return (\n      <rebill-form\n        ref={el => (this.formElement = el)}\n        validationSchema={this.validationSchema}\n        initialData={this.initialData}\n        onSubmit={(event: CustomEvent) => this.handleSubmit(event.detail)}\n        onChange={(event: CustomEvent) => this.handleChange(event.detail)}\n        renderForm={this.renderForm}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CRMAYXj0.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/hooks/useCheckoutForm.ts","src/components/checkout/checkout-form/checkout-form.tsx"],"sourcesContent":["import { SessionStore } from '../store/session.store';\nimport { FormData, FormErrors } from '../utils/form-validation';\n\nexport interface UseCheckoutFormOptions {\n  onFormChange?: (formData: FormData) => void;\n  onFormSubmit?: (formData: FormData) => void;\n}\n\nexport interface UseCheckoutFormReturn {\n  syncFormDataToStore: (formData: FormData) => void;\n  handlePhoneValidation: (formData: FormData, errors: FormErrors) => FormErrors;\n  getPhoneRelatedFields: () => string[];\n  getTextFields: () => string[];\n  shouldValidateField: (id: string) => boolean;\n  clearPhoneErrors: (formData: FormData, errors: FormErrors) => FormErrors;\n}\n\nexport function useCheckoutForm(): UseCheckoutFormReturn {\n  const syncFormDataToStore = (formData: FormData) => {\n    // Sync user information\n    if (formData.email !== undefined) {\n      SessionStore.setUserInformation({ email: formData.email });\n    }\n    if (formData.fullName !== undefined) {\n      SessionStore.setUserInformation({ fullName: formData.fullName });\n    }\n    if (formData.phoneNumber !== undefined) {\n      SessionStore.setUserPhoneNumber({\n        number: formData.phoneNumber,\n        countryCode: formData.countryCodePhoneNumber || '',\n      });\n    }\n    if (formData.countryCodePhoneNumber !== undefined) {\n      SessionStore.setUserPhoneNumber({\n        number: formData.phoneNumber || '',\n        countryCode: formData.countryCodePhoneNumber,\n      });\n    }\n\n    // Sync billing address\n    if (\n      formData['billing-country'] !== undefined ||\n      formData['billing-state'] !== undefined ||\n      formData['billing-address'] !== undefined ||\n      formData['billing-city'] !== undefined ||\n      formData['billing-zip'] !== undefined ||\n      formData['billing-addInformation'] !== undefined\n    ) {\n      SessionStore.setBillingAddress({\n        country: formData['billing-country'],\n        state: formData['billing-state'],\n        address: formData['billing-address'],\n        city: formData['billing-city'],\n        zip: formData['billing-zip'],\n        addInformation: formData['billing-addInformation'],\n      });\n    }\n\n    if (formData.bankId !== undefined) {\n      SessionStore.setBankId(formData.bankId);\n    }\n  };\n\n  const handlePhoneValidation = (formData: FormData, errors: FormErrors): FormErrors => {\n    const updatedErrors = { ...errors };\n    if (formData.isValidPhoneNumber === undefined) {\n      if (formData.phoneNumber && formData.phoneNumber.trim() !== '') {\n        formData.isValidPhoneNumber = 'true';\n      } else {\n        formData.isValidPhoneNumber = 'false';\n      }\n    }\n    if (formData.phoneNumber !== undefined) {\n      if (formData?.isValidPhoneNumber === 'true' || formData?.isValidPhoneNumber === true) {\n        delete updatedErrors.phoneNumber;\n      } else if (\n        (formData.isValidPhoneNumber === 'false' || formData.isValidPhoneNumber === false) &&\n        formData.phoneNumber &&\n        formData.phoneNumber.trim() !== ''\n      ) {\n        updatedErrors.phoneNumber = 'validation.phoneRequired';\n      } else if (!formData.phoneNumber || formData.phoneNumber.trim() === '') {\n        updatedErrors.phoneNumber = 'validation.phoneRequired';\n      } else if (\n        formData.isValidPhoneNumber === undefined &&\n        formData.phoneNumber &&\n        formData.phoneNumber.trim() !== ''\n      ) {\n        delete updatedErrors.phoneNumber;\n      }\n    }\n\n    return updatedErrors;\n  };\n\n  const clearPhoneErrors = (formData: FormData, errors: FormErrors): FormErrors => {\n    const updatedErrors = { ...errors };\n\n    if (formData?.isValidPhoneNumber === 'true' || formData?.isValidPhoneNumber === true) {\n      delete updatedErrors.phoneNumber;\n    }\n\n    return updatedErrors;\n  };\n\n  const getPhoneRelatedFields = (): string[] => {\n    return ['phoneNumber', 'countryCodePhoneNumber', 'isValidPhoneNumber'];\n  };\n\n  const getTextFields = (): string[] => {\n    return [\n      'email',\n      'fullName',\n      'billing-address',\n      'billing-city',\n      'billing-state',\n      'billing-zip',\n      'billing-country',\n    ];\n  };\n\n  const shouldValidateField = (id: string): boolean => {\n    const phoneRelatedFields = getPhoneRelatedFields();\n    const textFields = getTextFields();\n\n    if (phoneRelatedFields.includes(id)) {\n      return false;\n    }\n    return textFields.includes(id);\n  };\n\n  return {\n    syncFormDataToStore,\n    handlePhoneValidation,\n    getPhoneRelatedFields,\n    getTextFields,\n    shouldValidateField,\n    clearPhoneErrors,\n  };\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop } from '@stencil/core';\nimport { useCheckoutForm } from '../../../hooks/useCheckoutForm';\nimport { FormData, FormErrors } from '../../../utils/form-validation';\n\n@Component({\n  tag: 'rebill-checkout-form',\n  shadow: false,\n})\nexport class CheckoutForm {\n  @Element() el: HTMLElement;\n\n  /** Esquema de validación del formulario */\n  @Prop() validationSchema: any;\n  /** Datos iniciales del formulario */\n  @Prop() initialData: FormData = {};\n  /** Evento cuando el formulario es válido y se envía */\n  @Event() submit: EventEmitter<FormData>;\n  /** Evento cuando hay cambios en el formulario */\n  @Event() change: EventEmitter<FormData>;\n  /** Función render prop para controlar el formulario */\n  @Prop() renderForm?: (props: {\n    submit: () => void;\n    formData: FormData;\n    errors: FormErrors;\n  }) => any;\n\n  private checkoutFormHook = useCheckoutForm();\n\n  private formElement: any;\n\n  componentDidLoad() {\n    if (this.formElement) {\n      // this.formElement.setSyncDataToStore(this.checkoutFormHook.syncFormDataToStore);\n      // this.formElement.setCustomValidation(this.checkoutFormHook.handlePhoneValidation);\n      // this.formElement.setGetRelatedFields((id: string) => {\n      //   const phoneRelatedFields = this.checkoutFormHook.getPhoneRelatedFields();\n      //   return phoneRelatedFields.includes(id) ? phoneRelatedFields : [];\n      // });\n      // this.formElement.setShouldValidateField(this.checkoutFormHook.shouldValidateField);\n    }\n  }\n\n  @Listen('change')\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n\n    // Guard: ignore unrelated change events without proper payload\n    if (!formData || typeof formData !== 'object') {\n      return;\n    }\n\n    if (formData?.isValidPhoneNumber === 'true' && this.formElement) {\n      this.formElement.clearError('phoneNumber');\n    }\n\n    if (\n      (formData as any).phoneNumber !== undefined &&\n      this.formElement &&\n      this.formElement.hasSubmitted\n    ) {\n      if (this.checkoutFormHook.handlePhoneValidation) {\n        const updatedErrors = this.checkoutFormHook.handlePhoneValidation(\n          formData,\n          this.formElement.errors || {},\n        );\n        this.formElement.errors = updatedErrors;\n      }\n    }\n  }\n\n  private handleSubmit = (formData: FormData) => {\n    this.submit.emit(formData);\n  };\n\n  private handleChange = (formData: FormData) => {\n    this.change.emit(formData);\n  };\n\n  @Method()\n  async resetValidation() {\n    if (this.formElement) {\n      await this.formElement.resetValidation();\n    }\n  }\n\n  render() {\n    return (\n      <rebill-form\n        ref={el => (this.formElement = el)}\n        validationSchema={this.validationSchema}\n        initialData={this.initialData}\n        onSubmit={(event: CustomEvent) => this.handleSubmit(event.detail)}\n        onChange={(event: CustomEvent) => this.handleChange(event.detail)}\n        renderForm={this.renderForm}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BFqhozQ0.js → p-DKPrueOT.js}

@@ -1,7 +1,7 @@
 import { proxyCustomElement, H, h, Host } from './p-8BpuJ_V5.js';
 import { S as SessionStore, I as I18nService } from './p-Be63Lt_2.js';
 import { d as defineCustomElement$2 } from './p-Np4T5oyp.js';
-import { d as defineCustomElement$1 } from './p-RbKsk0NK.js';
+import { d as defineCustomElement$1 } from './p-Dsv10JVE.js';
 
 const userInformationCss = ":host{display:block}.inputs-container{display:flex;flex-direction:column;gap:16px;width:100%}.customer-exists{display:flex;justify-content:flex-end;margin-bottom:16px}";
 
@@ -101,6 +101,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { UserInformationPhone as U, defineCustomElement as d };
-//# sourceMappingURL=p-BFqhozQ0.js.map
+//# sourceMappingURL=p-DKPrueOT.js.map
 
-//# sourceMappingURL=p-BFqhozQ0.js.map
+//# sourceMappingURL=p-DKPrueOT.js.map

package/dist/components/{p-BFqhozQ0.js.map → p-DKPrueOT.js.map}

@@ -1 +1 @@
-{"file":"p-BFqhozQ0.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,yKAAyK;;MCSvL,oBAAoB,iBAAAA,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;;;;;;;IACvB,KAAK,GAAkB,IAAI;IAC3B,WAAW,GAAmB,IAAI;IACjC,qBAAqB,GAAW,CAAC;IAClC,QAAQ,GAAY,KAAK;AAEzB,IAAA,6BAA6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8CrC,gBAAgB,GAAA;QACd,IAAI,CAAC,6BAA6B,GAAG,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE,MAAK;YAC/E,IAAI,CAAC,qBAAqB,EAAE;AAC9B,SAAC,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,6BAA6B,EAAE;YACtC,IAAI,CAAC,6BAA6B,EAAE;;;IAIxC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,iBAAiB,EAAC,oBAAoB,EACtC,aAAa,EAAC,aAAa,EAC3B,aAAa,EAAC,wBAAwB,EACtC,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,wCAAwC,CAAC,EAC3D,iBAAA,EAAA,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,IAAI,EACxD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,IAAI,EAChB,iBAAiB,EAAE,WAAW,CAAC,SAAS,CAAC,4CAA4C,CAAC,EAAA,CACtF,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkout/user-information/user-information.css?tag=user-information-phone","src/components/checkout/user-information/user-information-phone.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.inputs-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n}\n.customer-exists {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { SessionStore } from '../../../store/session.store';\n\n@Component({\n  tag: 'user-information-phone',\n  styleUrl: 'user-information.css',\n  shadow: false,\n})\nexport class UserInformationPhone {\n  @Prop() error: string | null = null;\n  @Prop() countryCode?: string | null = null;\n  @State() languageUpdateTrigger: number = 0;\n  @Prop() disabled: boolean = false;\n\n  private unsubscribeCurrentLocaleStore?: () => void;\n\n  // @Listen('phoneInput')\n  // handleInputChange(event: CustomEvent<{ id: string; value: string }>) {\n  //   if (!event.detail) return;\n\n  //   const { id, value } = event.detail;\n  //   if (id === 'phoneNumber') {\n  //     SessionStore.setUserPhoneNumber({\n  //       number: value,\n  //       countryCode: this.userInformationPhone.countryCode,\n  //     });\n  //   } else if (id === 'countryCodePhoneNumber') {\n  //     SessionStore.setUserPhoneNumber({\n  //       number: this.userInformationPhone.phoneNumber.number,\n  //       countryCode: value,\n  //     });\n  //   } else {\n  //     SessionStore.setUserInformation({ [id]: value });\n  //   }\n\n  //   // Don't stop propagation - let the form handle the event too\n  // }\n\n  // @Listen('blurPhone')\n  // handleBlurPhone(event: CustomEvent<{ id: string; value: string }>) {\n  //   if (!event.detail) return; // Ignore native input events or malformed events\n\n  //   const { id, value } = event.detail;\n  //   if (id === 'phoneNumber') {\n  //     SessionStore.setUserPhoneNumber({\n  //       number: value,\n  //       countryCode: this.userInformationPhone.countryCode,\n  //     });\n  //   } else if (id === 'countryCodePhoneNumber') {\n  //     SessionStore.setUserPhoneNumber({\n  //       number: this.userInformationPhone.phoneNumber.number,\n  //       countryCode: value,\n  //     });\n  //   } else {\n  //     SessionStore.setUserInformation({ [id]: value });\n  //   }\n\n  //   // Don't stop propagation - let the form handle the event too\n  // }\n\n  componentDidLoad() {\n    this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n      this.languageUpdateTrigger++;\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeCurrentLocaleStore) {\n      this.unsubscribeCurrentLocaleStore();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <rebill-input-phone\n            disabled={this.disabled}\n            validationErrorId=\"isValidPhoneNumber\"\n            phoneNumberId=\"phoneNumber\"\n            countryCodeId=\"countryCodePhoneNumber\"\n            placeholder={I18nService.translate('userInformation.phoneNumberPlaceholder')}\n            initial-country={this.countryCode?.toLowerCase() || 'ar'}\n            error={this.error}\n            required={true}\n            searchable={true}\n            searchPlaceholder={I18nService.translate('userInformation.searchCountriesPlaceholder')}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DKPrueOT.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,yKAAyK;;MCSvL,oBAAoB,iBAAAA,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;;;;;;;IACvB,KAAK,GAAkB,IAAI;IAC3B,WAAW,GAAmB,IAAI;IACjC,qBAAqB,GAAW,CAAC;IAClC,QAAQ,GAAY,KAAK;AAEzB,IAAA,6BAA6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8CrC,gBAAgB,GAAA;QACd,IAAI,CAAC,6BAA6B,GAAG,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE,MAAK;YAC/E,IAAI,CAAC,qBAAqB,EAAE;AAC9B,SAAC,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,6BAA6B,EAAE;YACtC,IAAI,CAAC,6BAA6B,EAAE;;;IAIxC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,iBAAiB,EAAC,oBAAoB,EACtC,aAAa,EAAC,aAAa,EAC3B,aAAa,EAAC,wBAAwB,EACtC,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,wCAAwC,CAAC,EAC3D,iBAAA,EAAA,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,IAAI,EACxD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,IAAI,EAChB,iBAAiB,EAAE,WAAW,CAAC,SAAS,CAAC,4CAA4C,CAAC,EAAA,CACtF,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkout/user-information/user-information.css?tag=user-information-phone","src/components/checkout/user-information/user-information-phone.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.inputs-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n}\n.customer-exists {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { SessionStore } from '../../../store/session.store';\n\n@Component({\n  tag: 'user-information-phone',\n  styleUrl: 'user-information.css',\n  shadow: false,\n})\nexport class UserInformationPhone {\n  @Prop() error: string | null = null;\n  @Prop() countryCode?: string | null = null;\n  @State() languageUpdateTrigger: number = 0;\n  @Prop() disabled: boolean = false;\n\n  private unsubscribeCurrentLocaleStore?: () => void;\n\n  // @Listen('phoneInput')\n  // handleInputChange(event: CustomEvent<{ id: string; value: string }>) {\n  //   if (!event.detail) return;\n\n  //   const { id, value } = event.detail;\n  //   if (id === 'phoneNumber') {\n  //     SessionStore.setUserPhoneNumber({\n  //       number: value,\n  //       countryCode: this.userInformationPhone.countryCode,\n  //     });\n  //   } else if (id === 'countryCodePhoneNumber') {\n  //     SessionStore.setUserPhoneNumber({\n  //       number: this.userInformationPhone.phoneNumber.number,\n  //       countryCode: value,\n  //     });\n  //   } else {\n  //     SessionStore.setUserInformation({ [id]: value });\n  //   }\n\n  //   // Don't stop propagation - let the form handle the event too\n  // }\n\n  // @Listen('blurPhone')\n  // handleBlurPhone(event: CustomEvent<{ id: string; value: string }>) {\n  //   if (!event.detail) return; // Ignore native input events or malformed events\n\n  //   const { id, value } = event.detail;\n  //   if (id === 'phoneNumber') {\n  //     SessionStore.setUserPhoneNumber({\n  //       number: value,\n  //       countryCode: this.userInformationPhone.countryCode,\n  //     });\n  //   } else if (id === 'countryCodePhoneNumber') {\n  //     SessionStore.setUserPhoneNumber({\n  //       number: this.userInformationPhone.phoneNumber.number,\n  //       countryCode: value,\n  //     });\n  //   } else {\n  //     SessionStore.setUserInformation({ [id]: value });\n  //   }\n\n  //   // Don't stop propagation - let the form handle the event too\n  // }\n\n  componentDidLoad() {\n    this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n      this.languageUpdateTrigger++;\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeCurrentLocaleStore) {\n      this.unsubscribeCurrentLocaleStore();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div>\n          <rebill-input-phone\n            disabled={this.disabled}\n            validationErrorId=\"isValidPhoneNumber\"\n            phoneNumberId=\"phoneNumber\"\n            countryCodeId=\"countryCodePhoneNumber\"\n            placeholder={I18nService.translate('userInformation.phoneNumberPlaceholder')}\n            initial-country={this.countryCode?.toLowerCase() || 'ar'}\n            error={this.error}\n            required={true}\n            searchable={true}\n            searchPlaceholder={I18nService.translate('userInformation.searchCountriesPlaceholder')}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Cs-pA3OO.js → p-DVaxhIJe.js}

@@ -124,7 +124,10 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends H {
     async handleBlur(event) {
         if (!event.detail || !event.detail.id)
             return;
-        const { id, disabled } = event.detail;
+        const { id, value, disabled } = event.detail;
+        if (value !== undefined) {
+            this.setFieldValue(id, value);
+        }
         if (!disabled) {
             const error = await this.validator.validateField(id, this.formData);
             this.setFieldError(id, error);
@@ -151,7 +154,7 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends H {
         await this.submitForm();
     };
     render() {
-        return (h("form", { key: '52bbd73020352379d4d196e1fa6ea32dbb5bf8cc', onSubmit: e => this.handleSubmit(e), noValidate: true }, this.renderForm ? (this.renderForm({
+        return (h("form", { key: '16a2a9b5f7a45b4fb4a00ab9177bc61680272da8', onSubmit: e => this.handleSubmit(e), noValidate: true }, this.renderForm ? (this.renderForm({
             submit: () => this.submitForm(),
             formData: this.formData,
             errors: this.errors,
@@ -190,6 +193,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { Form as F, defineCustomElement as d };
-//# sourceMappingURL=p-Cs-pA3OO.js.map
+//# sourceMappingURL=p-DVaxhIJe.js.map
 
-//# sourceMappingURL=p-Cs-pA3OO.js.map
+//# sourceMappingURL=p-DVaxhIJe.js.map

package/dist/components/p-DVaxhIJe.js.map

@@ -0,0 +1 @@
+{"file":"p-DVaxhIJe.js","mappings":"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","names":["yup.object","yup.ValidationError","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/form-validation.ts","src/components/shared/form/form.tsx"],"sourcesContent":["import * as yup from 'yup';\n\nexport interface ValidationSchema {\n  [key: string]: yup.Schema<any>;\n}\n\nexport interface FormErrors {\n  [key: string]: string;\n}\n\nexport interface FormData {\n  [key: string]: any;\n}\n\nexport class FormValidator {\n  private schema: yup.ObjectSchema<any>;\n\n  constructor(validationSchema: ValidationSchema) {\n    this.schema = yup.object().shape(validationSchema);\n  }\n\n  async validateField(fieldName: string, formData: FormData): Promise<string> {\n    try {\n      await this.schema.validateAt(fieldName, formData);\n      return '';\n    } catch (error) {\n      if (error instanceof yup.ValidationError) {\n        return error.message;\n      }\n      return '';\n    }\n  }\n\n  async validateForm(formData: FormData): Promise<FormErrors> {\n    try {\n      await this.schema.validate(formData, { abortEarly: false });\n      return {};\n    } catch (error) {\n      if (error instanceof yup.ValidationError) {\n        const errors: FormErrors = {};\n        error.inner.forEach(err => {\n          if (err.path) {\n            errors[err.path] = err.message;\n          }\n        });\n        return errors;\n      }\n      return {};\n    }\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { FormData, FormErrors, FormValidator } from '../../../utils/form-validation';\n\n@Component({\n  tag: 'rebill-form',\n  shadow: false,\n})\nexport class Form {\n  /** Esquema de validación del formulario */\n  @Prop() validationSchema: any;\n  /** Datos iniciales del formulario */\n  @Prop() initialData: FormData = {};\n  /** Evento cuando el formulario es válido y se envía */\n  @Event() submit: EventEmitter<FormData>;\n  /** Evento cuando hay cambios en el formulario */\n  @Event() change: EventEmitter<FormData>;\n  /** Función render prop para controlar el formulario */\n  @Prop() renderForm?: (props: {\n    submit: () => void;\n    formData: FormData;\n    errors: FormErrors;\n  }) => any;\n\n  @State() formData: FormData = {};\n  @State() errors: FormErrors = {};\n  private validator: FormValidator;\n  private hasSubmitted: boolean = false;\n\n  @Watch('initialData')\n  handleInitialDataChange(newValue: FormData) {\n    const updatedFormData = { ...this.formData };\n    Object.keys(newValue).forEach(key => {\n      if (updatedFormData[key] === undefined || updatedFormData[key] === '') {\n        updatedFormData[key] = newValue[key];\n      }\n    });\n    this.formData = updatedFormData;\n    this.change.emit(this.formData);\n  }\n\n  @Watch('validationSchema')\n  handleValidationSchemaChange(newSchema: any) {\n    this.validator = new FormValidator(newSchema);\n  }\n\n  componentWillLoad() {\n    this.formData = { ...this.initialData };\n    this.validator = new FormValidator(this.validationSchema);\n    setTimeout(() => {\n      this.change.emit(this.formData);\n    }, 100);\n  }\n\n  private setFieldValue(id: string, value: any) {\n    if (this.formData[id] !== value) {\n      this.formData = {\n        ...this.formData,\n        [id]: value,\n      };\n    }\n  }\n\n  private setFieldError(id: string, error: string) {\n    if (this.errors[id] !== error) {\n      this.errors = {\n        ...this.errors,\n        [id]: error,\n      };\n    }\n  }\n\n  private clearFieldError(id: string) {\n    if (this.hasFieldError(id)) {\n      this.setFieldError(id, '');\n    }\n  }\n\n  private hasFieldError(id: string) {\n    return this.errors[id] !== '';\n  }\n\n  @Listen('input')\n  async handleInputChange(event: CustomEvent) {\n    if (!event.detail || !event.detail.id) return;\n    const { id, value, disabled } = event.detail;\n\n    this.setFieldValue(id, value);\n\n    if (this.hasSubmitted && !disabled) {\n      const error = await this.validator.validateField(id, this.formData);\n      this.setFieldError(id, error);\n    } else {\n      if (this.hasFieldError(id)) {\n        this.clearFieldError(id);\n      }\n    }\n    this.change.emit(this.formData);\n  }\n  @Listen('blur')\n  async handleBlur(event: CustomEvent) {\n    if (!event.detail || !event.detail.id) return;\n    const { id, value, disabled } = event.detail as { id: string; value?: any; disabled?: boolean };\n\n    if (value !== undefined) {\n      this.setFieldValue(id, value);\n    }\n\n    if (!disabled) {\n      const error = await this.validator.validateField(id, this.formData);\n      this.setFieldError(id, error);\n    }\n  }\n\n  @Method()\n  async submitForm() {\n    this.hasSubmitted = true;\n    this.errors = {};\n\n    const errors = await this.validator.validateForm(this.formData);\n    this.errors = errors;\n\n    if (Object.values(this.errors).filter(value => !!value).length === 0) {\n      this.submit.emit(this.formData);\n    }\n  }\n\n  @Method()\n  async resetValidation() {\n    this.hasSubmitted = false;\n    this.errors = {};\n  }\n\n  @Method()\n  async clearError(fieldId: string) {\n    this.clearFieldError(fieldId);\n  }\n  private handleSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.submitForm();\n  };\n\n  render() {\n    return (\n      <form onSubmit={e => this.handleSubmit(e)} noValidate>\n        {this.renderForm ? (\n          this.renderForm({\n            submit: () => this.submitForm(),\n            formData: this.formData,\n            errors: this.errors,\n          })\n        ) : (\n          <slot></slot>\n        )}\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-RbKsk0NK.js → p-Dsv10JVE.js}

@@ -3308,20 +3308,17 @@ const InputPhone = /*@__PURE__*/ proxyCustomElement(class InputPhone extends H {
         this.input.emit({ id: this.validationErrorId, value: validationResult.isValid.toString() });
     };
     emitBlurPhone = async () => {
-        await PhoneValidator.validate(this.value, {
+        const validation = await PhoneValidator.validate(this.value, {
             required: this.required,
             country: this.selectedCountry,
         });
-        // this.blurPhone.emit({
-        //   id: this.phoneNumberId,
-        //   value: this.value,
-        // });
-        // this.blurPhone.emit({
-        //   id: this.countryCodeId,
-        //   value: this.selectedCountry.dialCode,
-        // });
         this.blur.emit({ id: this.phoneNumberId, value: this.value });
         this.blur.emit({ id: this.countryCodeId, value: this.selectedCountry.dialCode });
+        // Emit also the validation flag so the form can validate the correct schema field on blur
+        this.blur.emit({
+            id: this.validationErrorId,
+            value: validation.isValid.toString(),
+        });
     };
     handleClickOutside = (event) => {
         const target = event.target;
@@ -3355,11 +3352,11 @@ const InputPhone = /*@__PURE__*/ proxyCustomElement(class InputPhone extends H {
         // Usar translateError para ambos tipos de errores
         const translatedError = this.translateError(this.error);
         const translatedValidationError = this.translateError(this.validationError);
-        const displayError = translatedError || translatedValidationError;
-        return (h("div", { key: '9bfb1a075b9ea338d062f260ca89e3036ad489ae', class: "input-container" }, h("div", { key: '60af8d6684ef5c3b576de699ba522ec0d8147bf0', class: inputClasses }, h("div", { key: 'f48255f3bb5fdea49bd3a6d8617939f89e111465', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: 'c824bbb3c4c14ad31f45aaf5414b4000f3364a18', class: "flag" }, this.selectedCountry.flag), h("span", { key: '0a1f614c791c4bd3490fb9b259d7aba5fb179210', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: 'f9eb3ac4c2675afc7445dcfbc0cf0f0a70c8e721', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: 'e0ef26d1fa03ccadf93955f4775f7e965f2e8988', class: "country-dropdown" }, this.searchable && (h("div", { key: '18bb6464cd28a58137cedbf62c5487f43daf62a8', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: '844c66e1899ba58ce199fcb7f76a056629c8a887', class: "search-input-wrapper" }, h("rebill-icon", { key: '35d725f71c63307f2f62a528919723469c4584b7', name: "search", size: "16px", class: "search-icon" }), h("input", { key: '9b0abbc8b57424841a611dc76892979b7ae29955', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (h("button", { key: 'c9426b67a6121cfa453d43ffe1ca83a257303f86', type: "button", class: "clear-search", onClick: event => {
+        const displayError = translatedValidationError || translatedError;
+        return (h("div", { key: '8ba4b3763fed5beaa63d3c03997a5d3225bdac2b', class: "input-container" }, h("div", { key: '4d8a081c6818b007a66e749ade19ed2a03bcbfa2', class: inputClasses }, h("div", { key: 'b99f8c73cb689ecf8b6b23c99dfea1fbc8d7679a', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: '579c92643304fb84edffd02eaafa0c8d053dea67', class: "flag" }, this.selectedCountry.flag), h("span", { key: '87323ab9edab7a9716b3f25526d343faa5789d22', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: 'abe6273a9664575c362ee793412baca2a2128810', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: 'cf8da028b705288941dad87e277cbccf6a4a6830', class: "country-dropdown" }, this.searchable && (h("div", { key: 'c803f6f2b353618554edfa51204e9ec4cf3331d3', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: '128a73017eee1f7d4e1ee5dcf4a20f09bc45889e', class: "search-input-wrapper" }, h("rebill-icon", { key: '9fdd3b1c87db54bb16c97ea895c548ed548a9677', name: "search", size: "16px", class: "search-icon" }), h("input", { key: 'a87ef75600838f3a9f4196fd66574eac53ef342e', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (h("button", { key: 'c0c46bad64ec034a954d9714568ff95ee39f88b4', type: "button", class: "clear-search", onClick: event => {
                 event.stopPropagation();
                 this.clearSearch();
-            }, "aria-label": "Clear search" }, h("rebill-icon", { key: '0c6c770adc4587627336ad73d5740931d2fc35d7', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, h("span", { class: "flag" }, country.flag), h("span", { class: "country-name" }, country.name), h("span", { class: "dial-code" }, country.dialCode))))) : (h("div", { class: "no-results" }, "No se encontraron resultados")))), h("input", { key: '7a1a13857f138578f13a8c3430f1f41afc115d96', id: this.phoneNumberId, type: "tel", class: "input-combo-element phone-number-input", placeholder: this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onPhoneBlurPhone, disabled: this.disabled, required: this.required })), displayError && h("span", { key: 'cb53860dcc25c54579ac45c7a785bb3e540b3c3a', class: "error-message" }, displayError)));
+            }, "aria-label": "Clear search" }, h("rebill-icon", { key: '2c37884a69bdc23cee3d2c02f45c066e6bebc835', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, h("span", { class: "flag" }, country.flag), h("span", { class: "country-name" }, country.name), h("span", { class: "dial-code" }, country.dialCode))))) : (h("div", { class: "no-results" }, "No se encontraron resultados")))), h("input", { key: '18afad61f393316cb5128d64de384c3873921685', id: this.phoneNumberId, type: "tel", class: "input-combo-element phone-number-input", placeholder: this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onPhoneBlurPhone, disabled: this.disabled, required: this.required })), displayError && h("span", { key: '7c1cedfe0647fd05df06229d36784b5d6340f84f', class: "error-message" }, displayError)));
     }
     static get style() { return inputPhoneCss; }
 }, [256, "rebill-input-phone", {
@@ -3403,6 +3400,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { InputPhone as I, defineCustomElement as d };
-//# sourceMappingURL=p-RbKsk0NK.js.map
+//# sourceMappingURL=p-Dsv10JVE.js.map
 
-//# sourceMappingURL=p-RbKsk0NK.js.map
+//# sourceMappingURL=p-Dsv10JVE.js.map