https://www.vicicollection.com/cdn/shop/t/1403/assets/gift-card-re…?v=81226787154027011091790803706

1import{Component}from"@theme/component";import{ThemeEvents}from"@theme/events";class GiftCardRecipientForm extends Component{static DeliveryMode={SELF:"self",RECIPIENT:"recipient_form"};#currentMode=GiftCardRecipientForm.DeliveryMode.SELF;#updateCharacterCountBound=null;#displayCartErrorBound=null;#cartAddEventBound=null;requiredRefs=["myEmailButton","recipientEmailButton","recipientFields","recipientEmail","recipientName","recipientMessage","recipientSendOn"];get#inputFields(){return[this.refs.recipientEmail,this.refs.recipientName,this.refs.recipientMessage,this.refs.recipientSendOn]}connectedCallback(){super.connectedCallback(),this.firstImageRef=this.querySelector('[ref="giftcardDesignButton"]'),this.#initializeForm(),this.#updateCharacterCountBound=()=>this.#updateCharacterCount(),this.refs.recipientMessage.addEventListener("input",this.#updateCharacterCountBound),this.#displayCartErrorBound=this.#displayCartError.bind(this),document.addEventListener(ThemeEvents.cartError,this.#displayCartErrorBound),this.#cartAddEventBound=()=>this.#handleCartAdd(),document.addEventListener(ThemeEvents.cartUpdate,this.#cartAddEventBound),this.#inputFields.forEach(field=>{field.addEventListener("input",e=>{e.target.value?field.setAttribute("name",field.dataset.name):field.removeAttribute("name")})})}disconnectedCallback(){super.disconnectedCallback(),this.#updateCharacterCountBound&&(this.refs.recipientMessage.removeEventListener("input",this.#updateCharacterCountBound),this.#updateCharacterCountBound=null),this.#displayCartErrorBound&&

1(document.removeEventListener(ThemeEvents.cartError,this.#displayCartErrorBound),this.#displayCartErrorBound=null),this.#cartAddEventBound&&(document.removeEventListener(ThemeEvents.cartUpdate,this.#cartAddEventBound),this.#cartAddEventBound=null)}#initializeForm(){this.#updateButtonStates(GiftCardRecipientForm.DeliveryMode.SELF),this.refs.recipientFields.hidden=!0,this.classList.remove("recipient-fields-visible"),this.#clearRecipientFields(),this.#disableRecipientFields(),this.#setDateConstraints()}toggleRecipientForm(mode,_event){if(!Object.values(GiftCardRecipientForm.DeliveryMode).includes(mode))throw new Error(`Invalid delivery mode: ${mode}. Must be one of: ${Object.values(GiftCardRecipientForm.DeliveryMode).join(", ")}`);const imageData=_event.target.dataset.image,image=imageData?JSON.parse(imageData):null;if(image){this.#updateImage(image);return}this.#currentMode!==mode&&(this.#currentMode=mode,this.#updateFormState())}#updateImage(image){this.pdpImageDesktopEl=this.pdpImageDesktopEl||document.querySelector(".ir--gift-card-desktop img"),this.pdpImageMobileEl=this.pdpImageMobileEl||document.querySelector(".ir--gift-card-mobile img"),!(!this.pdpImageDesktopEl||!this.pdpImageMobileEl)&&(this.pdpImageDesktopEl&&(this.pdpImageDesktopEl.src=image.src,this.pdpImageDesktopEl.srcset=image.srcset),this.pdpImageMobileEl&&(this.pdpImageMobileEl.src=image.src,this.pdpImageMobileEl.srcset=image.srcset),this.refs.customImage.value=image.src)}#updateFormState(){const{DeliveryMode}=GiftCardRecipientForm,isRecipientMode=this.#currentMode===DeliveryMode.RECIPIENT;this.#updateButtonStates(this.#currentMode),this.refs.recipientFields.hidden=!isRecipientMode,this.classList.toggle("recipient-fields-visible",isRecipientMode),isRecipientMode?(this.#enableRecipientFields(),this.#updateCharacterCount(),this.refs.liveRegion&&(this.refs.liveRegion.textContent=Theme.translations?.recipient_form_fields_visible||"Recipient form fields are now visible"),this.refs.recipientEmail.focus()):(this.#clearRecipientFields(),this.#disableRecipientFields(),this.refs.liveRegion&&(this.refs.liveRegion.textContent=Theme.translations?.recipient_form_fields_hidden||"Recipient form fields are now hidden")),this.dispatchEvent(new CustomEvent("recipient:toggle",{detail:{mode:this.#currentMode,recipientFormVisible:isRecipientMode},bubbles:!0}))}#updateButtonStates(mode){const{DeliveryMode}=GiftCardRecipientForm;switch(mode){case DeliveryMode.SELF:this.refs.myEmailButton.checked=!0,this.refs.recipientEmailButton.checked=!1;break;case DeliveryMode.RECIPIENT:this.refs.myEmailButton.checked=!1,this.refs.recipientEmailButton.checked=!0;break;default:console.warn(`Unknown delivery mode: ${mode}`),this.refs.myEmailButton.checked=!0,this.refs.recipientEmailButton.checked=!1}}#clearRecipientFields(){for(const field of this.#inputFields)field.value="";this.#updateCharacterCount(),this.#clearErrorMessages(),this.#clearCustomImage()}#disableRecipientFields(){for(const field of this.#inputFields)field.disabled=!0,field.removeAttribute("required"),field.removeAttribute("aria-invalid"),field.removeAttribute("aria-describedby"),field.removeAttribute("name");const controlFlag=this.querySelector('input[name="properties[__shopify_send_gift_card_to_recipient]"]');controlFlag&&controlFlag.remove(),this.refs.timezoneOffset&&(this.refs.timezoneOffset.disabled=!0,this.refs.timezoneOffset.value=""),this.#clearErrorMessages()}#enableRecipientFields(){for(const field of this.#inputFields)field.disabled=!1,field.value&&field.setAttribute("name",field.dataset.name),(field===this.refs.recipientEmail||field===this.refs.recipientName)&&field.setAttribute("required","required");if(!this.querySelector('input[name="properties[__shopify_send_gift_card_to_recipient]"]')){const input=document.createElement("input");input.type="hidden",input.name="properties[__shopify_send_gift_card_to_recipient]",input.value="on",this.appendChild(input)}this.refs.timezoneOffset&&(this.refs.timezoneOffset.disabled=!1,this.refs.timezoneOffset.value=new Date().getTimezoneOffset().toString()),this.#setDateConstraints()}#updateCharacterCount(){if(!this.refs.characterCount)return;const currentLength=this.refs.recipientMessage.value.length,maxLength=this.refs.recipientMessage.maxLength,template=this.refs.characterCount.getAttribute("data-template");if(!template)return;const updatedText=template.replace("[current]",currentLength.toString()).replace("[max]",maxLength.toString());this.refs.characterCount.textContent=updatedText}#setDateConstraints(){const today=new Date,maxDate=new Date;maxDate.setDate(today.getDate()+90);const formatDate=date=>{const year=date.getFullYear(),month=String(date.getMonth()+1).padStart(2,"0"),day=String(date.getDate()).padStart(2,"0");return`${year}-${month}-${day}`};this.refs.recipientSendOn.setAttribute("min",formatDate(today)),this.refs.recipientSendOn.setAttribute("max",formatDate(maxDate))}#displayCartError(event){if(event.detail?.data){const{message,errors,description}=event.detail.data;errors&&typeof errors=="object"?this.#displayErrorMessage(message||"There was an error",errors):message&&this.#displayErrorMessage(message,description)}}#displayErrorMessage(title,body){if(this.#clearErrorMessages(),typeof body=="object"&&body!==null){const fieldMap={email:{inputRef:"recipientEmail",errorRef:"emailError"},name:{inputRef:"recipientName",errorRef:"nameError"},message:{inputRef:"recipientMessage",errorRef:"messageError"},send_on:{inputRef:"recipientSendOn",errorRef:"sendOnError"}};for(const[field,errorMessages]of Object.entries(body)){const fieldConfig=fieldMap[field];if(!fieldConfig)continue;const{inputRef,errorRef}=fieldConfig,errorContainer=this.refs[errorRef],inputElement=this.refs[inputRef];if(errorContainer&&errorContainer instanceof HTMLElement){const errorTextElement=errorContainer.querySelector("span");if(errorTextElement){const message=Array.isArray(errorMessages)?errorMessages.join(", "):errorMessages;errorTextElement.textContent=`${message}.`}errorContainer.classList.remove("hidden")}if(inputElement&&inputElement instanceof HTMLElement){inputElement.setAttribute("aria-invalid","true");const errorId=`RecipientForm-${field}-error-${this.dataset.sectionId||"default"}`;inputElement.setAttribute("aria-describedby",errorId)}}}this.refs.liveRegion&&(this.refs.liveRegion.textContent=title||Theme.translations?.recipient_form_error||"There was an error with the form submission")}#clearCustomImage(){const firstImageData=this.querySelector("[data-image]").dataset.image,image=firstImageData?JSON.parse(firstImageData):null;image&&this.#updateImage(image);const lineItemInput=this.querySelector('input[name="properties[__custom_image]"]');if(!lineItemInput)return;const imageData=this.firstImageRef?.dataset.image;imageData&&(lineItemInput.value=JSON.parse(imageData).src)}#clearErrorMessages(){const errorRefs=["emailError","nameError","messageError","sendOnError"];for(const errorRef of errorRefs){const errorContainer=this.refs[errorRef];if(errorContainer&&errorContainer instanceof HTMLElement){errorContainer.classList.add("hidden");const errorTextElement=errorContainer.querySelector("span");errorTextElement&&(errorTextElement.textContent="")}}for(const field of this.#inputFields)field.removeAttribute("aria-invalid"),field.removeAttribute("aria-describedby");this.refs.liveRegion&&(this.refs.liveRegion.textContent="")}#handleCartAdd(){this.#clearErrorMessages()}}customElements.define("gift-card-recipient-form",GiftCardRecipientForm);
2//# sourceMappingURL=/cdn/shop/t/1403/assets/gift-card-recipient-form.js.map?v=81226787154027011091790803706