https://cdn.shopify.com/shopifycloud/world/brochure/production-blog/assets/EmailForm-D--ycy0H.js

1import{H as e,j as t,z as n}from"./chunk-62JRHF6Z-CS0B5gRj.js";import{g as r}from"./paths-CTMSnpBZ.js";import{t as i}from"./jsx-runtime-Dv7-ob3D.js";import{D as a,T as o,r as s,x as c}from"./Wrapper-Qou99p7r.js";import{ot as l,v as u}from"./I18N-DbcewOge.js";import{t as d}from"./useSignup-By7IaEZI.js";import{t as f}from"./FormButton-C4yyHqB5.js";import{t as p}from"./Message-Bm3jJkH5.js";var m=e(n(),1),h=c(`w-full pb-2 pt-6 peer placeholder:text-transparent input:bg-transparent bg-transparent focus-visible:outline-none`,{variants:{hasButton:{true:`px-6`,false:`px-4`}},defaultVariants:{hasButton:!1}}),g=c([`relative box-border flex justify-between items-start`,`w-full`,`duration-300 ease-out`,`peer placeholder:text-transparent`,`ring ring-1 ring-inset`,`hover:focus-within:ring-state-focus focus-within:ring-state-focus focus-within:outline-0`],{variants:{mode:{light:`text-input-light-text bg-input-light-bg default:ring-input-light-border hover:ring-input-light-border-hover`,dark:`text-input-dark-text bg-input-dark-bg default:ring-input-dark-border hover:ring-input-dark-hover-border focus-within:ring-input-dark-active-border focus-within:hover:ring-input-dark-active-border`},state:{success:``,warning:``,error:``,disabled:``},hasButton:{true:`rounded-button`,false:`rounded-lg`}},compoundVariants:[{mode:`light`,state:`success`,className:`ring-state-success-dark`},{mode:`light`,state:`warning`,className:`ring-state-warning-dark`},{mode:`light`,state:`error`,className:`ring-state-error-dark`},{mode:`light`,state:`disabled`,className:`ring-input-light-disabled-border text-input-light-disabled-text hover:ring-input-light-disabled-border`},{mode:`dark`,state:`success`,className:`ring-state-success-light`},{mode:`dark`,state:`warning`,className:`ring-state-warning-light`},{mode:`dark`,state:`error`,className:`ring-state-error-light`},{mode:`dark`,state:`disabled`,className:`ring-input-dark-disabled-border hover:ring-input-dark-disabled-border text-input-dark-disabled-text`}],defaultVariants:{hasButton:!1}}),_=c([`absolute z-10`,`text-base pointer-events-none`,`duration-300 ease-out`,`origin-top-left rtl:origin-top-right`,`peer-placeholder-shown:scale-100 peer-placeholder-shown:top-8 peer-placeholder-shown:-translate-y-4`,`-translate-y-full peer-focus:-translate-y-full scale-75 peer-focus:scale-75 top-8`],{variants:{mode:{light:`text-input-light-label-text peer-focus:text-input-light-label-text`,dark:`text-input-dark-label-text peer-focus:text-input-dark-label-text`},isDisabled:{true:``,false:``},hasButton:{true:`start-6 peer-placeholder-shown:top-[2.2rem] top-[2.2rem]`,false:`start-4`}},compoundVariants:[{isDisabled:!0,mode:`light`,className:`text-input-light-disabled-text peer-placeholder-shown:text-input-light-disabled-text`},{isDisabled:!0,mode:`dark`,className:`text-input-dark-disabled-text peer-placeholder-shown:text-input-dark-disabled-text`},{isDisabled:!1,mode:`light`,className:`peer-placeholder-shown:text-input-light-text`},{isDisabled:!1,mode:`dark`,className:`peer-placeholder-shown:text-input-dark-text`}],defaultVariants:{hasButton:!1}}),v=i(),y=(0,m.forwardRef)(({className:e,id:t,label:n,state:r,message:i,mode:a=`light`,button:s,...l},u)=>{let d=`${t}-${r||`description`}`,m=r===`disabled`,y=!!s,b=i&&{className:`pt-1`,id:d,mode:a,children:i,state:r},x=c(`my-1 whitespace-nowrap`,{variants:{fullWidth:{true:`mr-1 w-full py-4`,false:`me-1 py-3`},isDisabled:{true:``,false:``},mode:{light:``,dark:``}},compoundVariants:[{mode:`light`,isDisabled:!0,className:`bg-shade-60 text-shade-50`},{mode:`dark`,isDisabled:!1,className:`bg-white text-black`}]});return(0,v.jsxs)(`div`,{"data-component-name":`text-input`,className:`flex flex-col`,"data-mode":a,children:[(0,v.jsxs)(`div`,{className:o(g({mode:a,state:r,hasButton:y}),e),children:[(0,v.jsx)(`input`,{...l,"aria-describedby":i&&d,className:h({hasButton:y}),disabled:m,id:t,name:l.name||t,type:l.type||`text`,ref:u,placeholder:` `},t),(0,v.jsx)(`label`,{className:_({mode:a,isDisabled:m,hasButton:y}),htmlFor:t,children:n}),s&&(0,v.jsx)(`div`,{className:`hidden md:block`,children:(0,v.jsx)(f,{disabled:m,size:`small`,...s,className:o(x({fullWidth:!1,isDisabled:m,mode:a}),s.className)})})]}),(0,v.jsx)(p,{...b}),s&&(0,v.jsx)(`div`,{className:`block w-full md:hidden pt-2`,children:(0,v.jsx)(f,{disabled:m,size:`small`,...s,className:o(x({fullWidth:!0,isDisabled:m,mode:a}),s.className)})})]})});function b(e){if(e.get(`utm_source`)?.toLowerCase()===`cli`)return e.get(`utm_medium`)?.toLowerCase()===`skill`?`skill_md_signup`:`cli_signup`}function x(e){return!!String(e).toLowerCase().match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)}var S=`/services/capture-email`;async function C({email:e,languageCode:t,locale:n}){if(!(typeof window>`u`||!e||!x(e)))try{let r=new URL(window.location.href,`https://www.shopify.com`);r.hash=``,await fetch(S,{method:`POST`,body:JSON.stringify({email:e,signUpPage:r.toString(),languageCode:t,locale:n}),headers:{"Content-Type":`application/json`},keepalive:!0})}catch{}}function w(e){let{hash:n}=t();(0,m.useEffect)(()=>

1{if(n&&e.current){let t=n.replace(`#`,``);x(t)&&(e.current.value=t)}},[n,e])}var T=`signup_page`,E=`signup_types[]`;function D(e,t){e.searchParams.delete(E);for(let n of t)e.searchParams.append(E,n)}function O(e,t){let n=t.getAll(E),r=e.searchParams.getAll(E);D(e,Array.from(new Set([...n,...r])))}function k(e,t){D(e,Array.from(new Set([...t.searchParams.getAll(E),...e.searchParams.getAll(E)])))}function A(e,t){for(let[n,r]of t.entries())n===E||n===T||e.searchParams.set(n,r.toString())}function j({onClick:e,overriddenSignupUrl:t,additionalSignupTypes:n}={}){let{signupUrl:r,signupName:i}=d(),{getSignupURL:a}=s(),{site:o}=u(),[c,l]=(0,m.useState)(),f=(0,m.useRef)(null);w(f);let p=(0,m.useMemo)(()=>{if(!(typeof window>`u`))return b(new URL(window.location.href,`https://www.shopify.com`).searchParams)},[]);(0,m.useEffect)(()=>{let e=a({url:t?.toString()||r});t&&k(e,new URL(r,`https://www.shopify.com`)),p&&e.searchParams.append(`signup_types[]`,p),l(e)},[a,r,i,t,p]);let h=(0,m.useCallback)(e=>{let i=a({url:t?.toString()||r,email:f.current?.value});t&&k(i,new URL(r,`https://www.shopify.com`)),p&&i.searchParams.append(`signup_types[]`,p);let o=new FormData(e);return(n||t)&&O(i,o),A(i,o),i.toString()},[r,t,n,a,p]);return{submitEmailForm:(0,m.useCallback)(t=>{t.preventDefault(),e?.(),C({email:f.current?.value,languageCode:o?.languageCode,locale:o?.locale}),window.location.href=h(t.target)},[h,e,o?.languageCode,o?.locale]),emailInputRef:f,hiddenSignupUrl:c}}function M({signupUrl:e,additionalSignupTypes:t}){return(0,v.jsxs)(v.Fragment,{children:[Array.from(e.searchParams.entries()).map(([e,t])=>(0,v.jsx)(`input`,{type:`hidden`,name:e,value:t},`${e}-${t}`)),t?.map(e=>(0,v.jsx)(`input`,{type:`hidden`,name:`signup_types[]`,value:e},`signup_type-${e}`))]})}function N({button:e,mode:t=`light`,id:n,message:i,state:s,label:c,className:u,overriddenSignupUrl:d,additionalSignupTypes:f}){let{submitEmailForm:p,emailInputRef:h,hiddenSignupUrl:g}=j({onClick:e.onClick,additionalSignupTypes:f,overriddenSignupUrl:d}),{getContent:_}=a(),b=_(`signup.placeholder`),x=o(u,`flex w-full flex-col justify-center`),S=`email-form-${(0,m.useId)()}`;return(0,v.jsx)(`div`,{"data-component-name":`email-form`,className:`flex justify-center`,children:(0,v.jsxs)(`form`,{noValidate:!0,action:l,className:x,onSubmit:p,method:`post`,children:[g&&(0,v.jsx)(M,{signupUrl:g,additionalSignupTypes:f}),(0,v.jsx)(y,{placeholder:c||b,autoComplete:`email`,ref:h,id:n||S,label:c||b,message:i,mode:t,state:s,type:`email`,button:{type:`submit`,size:`small`,children:e.children,componentName:r,mode:t,role:`link`}})]})})}export{C as a,w as i,M as n,b as o,j as r,y as s,N as t};
2//# sourceMappingURL=EmailForm-D--ycy0H.js.map