https://tatship.com/_next/static/chunks/pages/fitting-room/get/[merchant_ref]-45c3bc22693b2de0.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2107],{42187:function(e,t,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/fitting-room/get/[merchant_ref]",function(){return s(55814)}])},52810:function(e,t,s){"use strict";s.d(t,{Hm:function(){return ExampleTile},Hp:function(){return r.H},KM:function(){return PrimaryButton},Pe:function(){return SetupShell},TF:function(){return l},VM:function(){return Hero},Zx:function(){return SetupHeading},b4:function(){return OptionRow},eX:function(){return SectionLabel},zP:function(){return StepRow}});var a=s(85893),i=s(67294),n=s(67814),o=s(59417),r=s(52891);let l="/assets/fitting-room";function Hero(e){let{src:t,alt:s,imgClassName:i="",children:n}=e;return(0,a.jsxs)("div",{className:"relative",style:{backgroundColor:r.H},children:[(0,a.jsx)("img",{src:t,alt:s,width:1024,height:576,className:"w-full block ".concat(i)}),n]})}function SectionLabel(e){let{children:t}=e;return(0,a.jsx)("p",{className:"text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-400 mb-3",children:t})}function ExampleTile(e){let{src:t,good:s,title:i,body:r}=e;return(0,a.jsxs)("figure",{children:[(0,a.jsxs)("div",{className:"relative rounded-xl overflow-hidden border border-gray-200 bg-gray-50",children:[(0,a.jsx)("img",{src:t,alt:"",width:640,height:640,className:"w-full block aspect-square object-cover"}),(0,a.jsx)("span",{className:"absolute top-2 left-2 w-5 h-5 rounded-full flex items-center justify-center text-white shadow-sm ".concat(s?"bg-emerald-500":"bg-rose-500"),children:(0,a.jsx)(n.G,{icon:s?o.LEp:o.g82,className:"text-[9px]"})})]}),(0,a.jsxs)("figcaption",{className:"mt-2",children:[(0,a.jsx)("p",{className:"text-xs font-semibold text-gray-900",children:i}),(0,a.jsx)("p",{className:"mt-0.5 text-[11px] leading-relaxed text-gray-500",children:r})]})]})}function SetupShell(e){let{stepKey:t,header:s,footer:r,progress:l,onBack:d,backLabel:m,children:c}=e,u=(0,i.useRef)(null);return(0,i.useEffect)(()=>{var e;null===(e=u.current)||void 0===e||e.scrollTo({top:0})},[t]),(0,a.jsxs)("div",{className:"fixed inset-0 z-40 flex flex-col bg-white",children:[(0,a.jsx)("header",{className:"shrink-0 px-4 pt-3 pb-3 sm:px-6",children:(0,a.jsxs)("div",{className:"mx-auto w-full max-w-md",children:[(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[d?(0,a.jsx)("button",{type:"button",onClick:d,"aria-label":m,className:"-ml-2 w-9 h-9 shrink-0 rounded-full flex items-center justify-center text-gray-400 hover:bg-gray-100 hover:text-gray-900 transition-colors",children:(0,a.jsx)(n.G,{icon:o.acZ,className:"text-sm"})}):null,(0,a.jsx)("div",{className:"min-w-0 flex-1",children:s})]}),"number"==typeof l?(0,a.jsx)("div",{className:"mt-3 h-1 rounded-full bg-gray-100 overflow-hidden",children:(0,a.jsx)("div",{className:"h-full rounded-full bg-gray-900 transition-all duration-300 ease-out",style:{width:"".concat(Math.round(100*l),"%")}})}):null]})}),(0,a.jsx)("div",{ref:u,className:"flex-1 overflow-y-auto",children:(0,a.jsx)("div",{className:"mx-auto flex min-h-full w-full max-w-md flex-col justify-center px-4 py-5 sm:px-6",children:c})}),r?(0,a.jsx)("footer",{className:"shrink-0 border-t border-gray-100 bg-white px-4 py-4 sm:px-6 pb-[max(1rem,env(safe-area-inset-bottom))]",children:(0,a.jsx)("div",{className:"mx-auto w-full max-w-md",children:r})}):null]})}function SetupHeading(e){let{title:t,subtitle:s}=e;return(0,a.jsxs)("div",{className:"mb-5",children:[(0,a.jsx)("h1",{className:"text-[26px] !leading-[1.15] font-bold tracking-tight text-gray-900",children:t}),s?(0,a.jsx)("p",{className:"mt-2.5 text-sm leading-relaxed text-gray-500",children:s}):null]})}function PrimaryButton(e){let{children:t,onClick:s,type:i="button",form:n,disabled:o}=e;return(0,a.jsx)("button",{type:i,form:n,onClick:s,disabled:o,className:"w-full flex items-center justify-center gap-2 rounded-2xl bg-black py-3.5 px-4 text-base font-semibold text-white transition-colors hover:bg-gray-900 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-black",children:t})}function OptionRow(e){let{icon:t,title:s,body:i,onClick:r}=e;return(0,a.jsxs)("button",{type:"button",onClick:r,className:"flex w-full items-start gap-3.5 rounded-2xl border border-gray-200 bg-white p-4 text-left transition-colors hover:border-gray-900 active:bg-gray-50",children:[(0,a.jsx)("span",{className:"shrink-0 w-11 h-11 rounded-xl bg-gray-900 text-white flex items-center justify-center",children:(0,a.jsx)(n.G,{icon:t,className:"text-base"})}),(0,a.jsxs)("span",{className:"min-w-0 flex-1",children:[(0,a.jsx)("span",{className:"block text-[15px] font-semibold leading-snug text-gray-900",children:s}),(0,a.jsx)("span",{className:"mt-1 block text-xs leading-relaxed text-gray-500",children:i})]}),(0,a.jsx)(n.G,{icon:o._tD,className:"mt-4 shrink-0 text-[11px] text-gray-300"})]})}function StepRow(e){let{badge:t,title:s,body:i}=e;return(0,a.jsxs)("li",{className:"flex gap-3",children:[(0,a.jsx)("span",{className:"shrink-0 w-8 h-8 rounded-lg bg-gray-900 text-white flex items-center justify-center",children:"number"==typeof t?(0,a.jsx)("span",{className:"text-xs font-semibold",children:t}):(0,a.jsx)(n.G,{icon:t,className:"text-[11px]"})}),(0,a.jsxs)("span",{className:"min-w-0 pt-0.5",children:[(0,a.jsx)("span",{className:"block text-sm font-medium text-gray-900",children:s}),(0,a.jsx)("span",{className:"block text-xs leading-relaxed text-gray-500",children:i})]})]})}},55814:function(e,t,s){"use strict";s.r(t),s.d(t,{__N_SSP:function(){return k},default:function(){return GetFittingRoomPage}});var a=s(85893),i=s(67294),n=s(86896),o=s(9008),r=s.n(o),l=s(11163),d=s(43),m=s(80691),c=s(67814),u=s(59417),f=s(37838),g=s(56953),x=s(52810);let h=[{key:"intro",type:"value",titleId:"fittingRoomRequest.title",defaultTitle:"Find the size and spot that suit you",subtitleId:"fittingRoomRequest.bodyShort",defaultSubtitle:"Try a de

1sign big or small, anywhere on a photo of your own body, until you know what you want. Then show {artistName} exactly that.",image:"".concat(x.TF,"/hero-preferences.webp"),imageAltId:"fittingRoom.setup.heroPhotoAlt",defaultImageAlt:"A tattoo on a forearm inside a frame that can be resized",imageClass:"max-h-[24vh] object-cover",ctaId:"fittingRoomRequest.intro.cta",defaultCta:"Get started",nextKey:"how_it_works",progressStep:1},{key:"how_it_works",type:"value",titleId:"fittingRoomRequest.how.title",defaultTitle:"Four steps, all on your phone",image:"/assets/tatship_b2b_how_it_works_without_text.webp",imageAltId:"fittingRoomRequest.how.imageAlt",defaultImageAlt:"A photo of yourself, a saved tattoo design, the two together on your body, and your artist seeing the result",imageClass:"aspect-[16/6] object-cover",visual:"how_it_works",nextKey:"details",backKey:"intro",progressStep:2},{key:"details",type:"email_form",titleId:"fittingRoomRequest.details.title",defaultTitle:"Where shall we send it?",subtitleId:"fittingRoomRequest.details.subtitle",defaultSubtitle:"Your room opens from a link in your inbox, so it stays yours alone.",backKey:"how_it_works",progressStep:3},{key:"sent",type:"sent",titleId:"fittingRoomRequest.sent.title",defaultTitle:"Check your inbox",subtitleId:"fittingRoomRequest.sent.body",defaultSubtitle:"We sent your private fitting room link to {email}. Open it on your phone so you can take a photo of the spot you want tattooed.",image:"".concat(x.TF,"/email-sent.webp"),imageAltId:"fittingRoomRequest.sentHeroAlt",defaultImageAlt:"An email opening on a phone",progressStep:4}],p=Math.max(...h.map(e=>e.progressStep||0)),y=h[0],b=[{id:"mail",titleId:"fittingRoomRequest.step1.title",defaultTitle:"We email you a link to your fitting room",bodyId:"fittingRoomRequest.step1.body",defaultBody:"No app to download, no account to make."},{id:"photo",titleId:"fittingRoomRequest.step2.title",defaultTitle:"Choose an everyday photo of yourself"},{id:"design",titleId:"fittingRoomRequest.step3.title",defaultTitle:"Add a tattoo reference, or pick a common shape"},{id:"adjust",titleId:"fittingRoomRequest.step4.title",defaultTitle:"Find the size and spot that fit you"}],w="fitting-room-request";function ArtistIdentity(e){var t;let{merchant:s}=e;return(0,a.jsxs)("div",{className:"relative z-10 -mt-12 mb-4 flex flex-col items-center text-center",children:[(null===(t=s.logo_image)||void 0===t?void 0:t.cdnUrl)?(0,a.jsx)("img",{src:s.logo_image.cdnUrl,alt:s.artist_name,className:"w-20 h-20 rounded-full object-cover border border-gray-200 ring-4 ring-white bg-white"}):(0,a.jsx)("div",{className:"w-20 h-20 rounded-full ring-4 ring-white bg-gray-900 text-white flex items-center justify-center text-2xl font-semibold",children:(s.artist_name||"T").charAt(0).toUpperCase()}),(0,a.jsx)("p",{className:"mt-3 text-lg font-semibold text-gray-900",children:s.artist_name}),s.instagram_username&&(0,a.jsxs)("a",{href:"https://instagram.com/".concat(s.instagram_username),target:"_blank",rel:"noreferrer",className:"mt-1 inline-flex items-center gap-1.5 text-xs text-gray-400 hover:text-gray-900 transition-colors",children:[(0,a.jsx)(f.Z,{size:13}),s.instagram_username]}),s.artist_description&&(0,a.jsx)("p",{className:"mt-2 max-w-xs text-xs leading-relaxed text-gray-500",children:s.artist_description})]})}function PoweredByNote(){let e=(0,n.Z)();return(0,a.jsx)("p",{className:"text-center text-[11px] leading-relaxed text-gray-400",children:e.formatMessage({id:"fittingRoomRequest.poweredBy",defaultMessage:"AR Try-On Technology powered by Tatship"})})}function HowItWorks(e){let{artistName:t}=e,s=(0,n.Z)();return(0,a.jsx)("ol",{className:"space-y-3.5",children:b.map((e,i)=>(0,a.jsxs)("li",{className:"flex items-start gap-3",children:[(0,a.jsx)("span",{className:"mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-900 text-xs font-semibold text-white",children:i+1}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsx)("p",{className:"text-sm font-medium leading-snug text-gray-900",children:s.formatMessage({id:e.titleId,defaultMessage:e.defaultTitle},{artistName:t})}),e.bodyId&&(0,a.jsx)("p",{className:"mt-0.5 text-xs leading-relaxed text-gray-500",children:s.formatMessage({id:e.bodyId,defaultMessage:e.defaultBody},{artistName:t})})]})]},e.id))})}function FieldLabel(e){let{htmlFor:t,children:s}=e;return(0,a.jsx)("label",{htmlFor:t,className:"block text-xs font-medium text-gray-700 mb-1.5 uppercase tracking-wide",children:s})}let j="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-black focus:ring-0 outline-none transition-all bg-gray-50 focus:bg-white text-sm",N={invalid_email:{i

1d:"fittingRoomRequest.error.invalidEmail",defaultMessage:"That email address does not look right. Please check it and try again."},rate_limited:{id:"fittingRoomRequest.error.rateLimited",defaultMessage:"Too many requests from this device today. Please try again tomorrow."},merchant_not_found:{id:"fittingRoomRequest.error.merchantNotFound",defaultMessage:"This link is no longer active. Please ask your artist for a new one."}},v={id:"fittingRoomRequest.error.generic",defaultMessage:"Something went wrong sending your link. Please try again."};var k=!0;function GetFittingRoomPage(e){let{merchant:t,merchantRef:s}=e,o=(0,n.Z)(),{locale:f}=(0,l.useRouter)(),[b,k]=(0,i.useState)(y.key),[R,_]=(0,i.useState)(""),[M,S]=(0,i.useState)(""),[I,q]=(0,i.useState)(!1),[T,C]=(0,i.useState)(""),[A,F]=(0,i.useState)(""),P=t.artist_name,H=h.find(e=>e.key===b)||y,K=(0,m.vV)(R),handleSubmit=async e=>{if(e.preventDefault(),K&&!I){q(!0),F("");try{await d.Z.post("/fitting-room/public/request",{merchant_ref:s,email:R.trim(),name:M.trim(),locale:f}),C(R.trim()),k("sent")}catch(s){var t,a;let e=null==s?void 0:null===(a=s.response)||void 0===a?void 0:null===(t=a.data)||void 0===t?void 0:t.message;F(o.formatMessage(N[e]||v))}finally{q(!1)}}},E=H.subtitleId?o.formatMessage({id:H.subtitleId,defaultMessage:H.defaultSubtitle},{artistName:P,email:(0,a.jsx)("span",{className:"font-medium text-gray-900",children:T})}):void 0,L=(()=>{switch(H.type){case"value":return(0,a.jsx)(x.KM,{onClick:()=>H.nextKey&&k(H.nextKey),children:H.ctaId?o.formatMessage({id:H.ctaId,defaultMessage:H.defaultCta}):o.formatMessage({id:"fittingRoom.setup.continue",defaultMessage:"Continue"})});case"email_form":return(0,a.jsxs)(x.KM,{type:"submit",form:w,disabled:!K||I,children:[I&&(0,a.jsx)(c.G,{icon:u.LM3,spin:!0,className:"text-sm"}),I?o.formatMessage({id:"fittingRoomRequest.sending",defaultMessage:"Sending..."}):o.formatMessage({id:"fittingRoomRequest.submit",defaultMessage:"Email me my fitting room"})]});default:return null}})(),G=(0,a.jsxs)(a.Fragment,{children:[L,(0,a.jsx)("div",{className:L?"mt-2.5":"",children:(0,a.jsx)(PoweredByNote,{})})]});return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(r(),{children:[(0,a.jsx)("title",{children:o.formatMessage({id:"fittingRoomRequest.pageTitle",defaultMessage:"Try tattoo ideas with {artistName} | Tatship"},{artistName:P})}),(0,a.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1, maximum-scale=1"}),(0,a.jsx)("meta",{name:"robots",content:"noindex,nofollow,noarchive"})]}),(0,a.jsxs)(x.Pe,{stepKey:H.key,header:null,footer:G,progress:H.progressStep?H.progressStep/p:null,onBack:H.backKey?()=>k(H.backKey):void 0,backLabel:o.formatMessage({id:"fittingRoom.setup.back",defaultMessage:"Go back"}),children:[H.image&&(0,a.jsx)("div",{className:"overflow-hidden rounded-2xl ".concat("intro"===H.key?"":"mb-5"),children:(0,a.jsx)(x.VM,{src:H.image,alt:H.imageAltId?o.formatMessage({id:H.imageAltId,defaultMessage:H.defaultImageAlt}):"",imgClassName:H.imageClass||""})}),"intro"===H.key&&(0,a.jsx)(ArtistIdentity,{merchant:t}),"email_form"===H.type&&(0,a.jsx)("div",{className:"mb-4 flex h-14 w-14 items-center justify-center rounded-2xl",style:{backgroundColor:x.Hp},children:(0,a.jsx)(g.Z,{size:26,strokeWidth:1.75,className:"text-gray-900"})}),(0,a.jsx)(x.Zx,{title:o.formatMessage({id:H.titleId,defaultMessage:H.defaultTitle},{artistName:P}),subtitle:E}),A&&(0,a.jsx)("div",{className:"mb-5 rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-600",children:A}),"how_it_works"===H.visual&&(0,a.jsx)(HowItWorks,{artistName:P}),"email_form"===H.type&&(0,a.jsxs)("form",{id:w,onSubmit:handleSubmit,className:"space-y-4",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)(FieldLabel,{htmlFor:"fitting-room-email",children:o.formatMessage({id:"fittingRoomRequest.emailLabel",defaultMessage:"Your Email"})}),(0,a.jsx)("input",{id:"fitting-room-email",type:"email",value:R,onChange:e=>_(e.target.value),autoComplete:"email",enterKeyHint:"send",placeholder:"[email protected]",className:j})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)(FieldLabel,{htmlFor:"fitting-room-name",children:o.formatMessage({id:"fittingRoomRequest.nameLabel",defaultMessage:"First Name"})}),(0,a.jsx)("input",{id:"fitting-room-name",type:"text",value:M,onChange:e=>S(e.target.value),autoComplete:"given-name",enterKeyHint:"send",placeholder:o.formatMessage({id:"fittingRoomRequest.namePlaceholder",defaultMessage:"Optional"}),className:j})]})]}),"sent"===H.type&&(0,a.jsx)("p",{className:"text-xs text-gray-400",children:o.formatMessage({id:"fittingRoomRequest.sent.spamNote",defaultMessage:"Nothing after a few minutes? Check your spam folder, or {retry}."},{retry:(0,a.jsx)("button",{type:"button",onClick:()=>{C(""),F(""),k("details")},className:"underline hover:text-gray-900 transition-colors",children:o.formatMessage({id:"fittingRoomRequest.sent.retry",defaultMessage:"try another address"})})})})]})]})}},52891:function(e,t,s){"use strict";s.d(t,{H:function(){return a}});let a="#F7F4EB"}},function(e){e.O(0,[9774,2888,179],function(){return e(e.s=42187)}),_N_E=e.O()}]);