https://rentgain.ai/assets/AddFamilyMember-bcCo1X_K.js

1import{r as x,j as e}from"./vendor-react-BmaOEVXd.js";import{M as H}from"./MainLayout-CD8lUdKW.js";import{P as _}from"./PageHeader-Ckt4mSZE.js";import{cE as T,aG as P,ag as a,aF as R,c0 as Y,O as q}from"./index-DaR3WIIn.js";import{I as $}from"./input-BipKJZcK.js";import{T as V}from"./textarea-B63Cn4hE.js";import{f as W}from"./familyApi-BzQ6P8Xg.js";import{b as D}from"./vendor-router-YJ1kuUK4.js";import{u as F}from"./vendor-i18n-DFLJMoQz.js";import{a as L}from"./glass-DL169LZi.js";import{L as O}from"./LottieIcon-X3VbOzp_.js";import{i as X}from"./info-circle-BeewFnju.js";import{C as B,T as K}from"./surfaces-BcLkVwT_.js";import{a as U}from"./gamesKit-BnikS6ci.js";import{I as G,g as I,F as J}from"./FamilyKit-D0k3keru.js";import{G as Q}from"./gift-C4d_wDYh.js";import{m as S}from"./vendor-motion-2QGaoAUv.js";import{M as C}from"./mail-DWxNBylI.js";import{M as Z}from"./message-square-CKo2GEBu.js";import{S as ee}from"./send-Df5xYVSN.js";import{I as ae}from"./info-Dt1-5WMC.js";import"./vendor-ui-DP4RxKPZ.js";import"./vendor-query-CvUMyKt2.js";import"./vendor-firebase--9_-N0hd.js";import"./vendor-supabase-B_SzD5j0.js";import"./index.es-DWwTiEcw.js";import"./avatar-B078HGUn.js";import"./gamesStyle-kQJFIoHk.js";const se=/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/,w=2,M=10,z=240;function te(){const i=D(),{t:s}

1=F(),[t,n]=x.useState(""),[d,g]=x.useState(""),[c,f]=x.useState(""),[o,y]=x.useState(!1),[r,v]=x.useState(!1),[m,l]=x.useState({email:!1,name:!1,message:!1}),p=x.useMemo(()=>{const h=t.trim(),b=d.trim(),k=c.trim();return{email:h?se.test(h)?"":s("family.emailInvalid"):s("family.emailRequired"),name:b?b.length<w?s("family.nameTooShort",{count:w}):"":s("family.nameRequired"),message:k?k.length<M?s("family.messageTooShort",{count:M}):"":s("family.messageRequired")}},[t,d,c,s]),j=!p.email&&!p.name&&!p.message;return{email:t,setEmail:n,name:d,setName:g,message:c,setMessage:f,busy:o,formErrors:p,isFormValid:j,shouldShowError:h=>r||m[h],markTouched:h=>l(b=>({...b,[h]:!0})),handleInvite:async()=>{if(v(!0),!j){const b=p.email||p.name||p.message;T({title:b,variant:"destructive"});return}y(!0);const h=await W.inviteByEmail({email:t,name:d,message:c});if(y(!1),h.status==="OK"){T({title:s("family.inviteSent"),description:s("family.inviteSentDesc")}),i("/family-details",{replace:!0});return}T({title:s("family.error"),description:h.error||s("family.failedToInvite"),variant:"destructive"})}}}const A="#EB5858";function E({label:i,error:s,counter:t,multiline:n=!1,children:d,fieldId:g}){return e.jsxs("div",{className:"flex flex-col",children:[e.jsx("label",{htmlFor:g,className:"font-medium text-[var(--mc-text-secondary)]",style:{fontSize:a(14),marginBottom:a(8)},children:i}),e.jsx(G,{radius:n?20:100,padding:0,accent:s?A:J,style:{minHeight:a(n?112:60),display:"flex",alignItems:n?"stretch":"center"},children:d}),(s||t)&&e.jsxs("div",{className:"flex items-start justify-between",style:{padding:`${a(5)} ${a(15)}`,gap:a(12),fontSize:a(12)},children:[s?e.jsx("p",{id:`${g}-error`,role:"alert",style:{color:A},children:s}):e.jsx("span",{}),t&&e.jsx("span",{className:"shrink-0 text-[var(--mc-text-secondary)]",children:t})]})]})}function ie({state:i}){const{t:s}=F(),t=P(),n={email:x.useId(),name:x.useId(),message:x.useId()},{formErrors:d,shouldShowError:g,markTouched:c,busy:f}=i,o=l=>g(l)&&d[l]||void 0,y=t?"rgb(255 255 255 / 0.68)":"var(--mc-text-secondary)",r={fontSize:a(16),color:t?"#FFFFFF":"var(--mc-text-primary)","--mc-field-hint":y},v="min-w-0 flex-1 bg-transparent outline-none placeholder:text-[var(--mc-field-hint)] disabled:opacity-60",m=[1,2,3];return e.jsx(L,{calm:!0,className:"mc-screen !p-0",children:e.jsxs("form",{noValidate:!0,onSubmit:l=>{l.preventDefault(),i.handleInvite()},className:"flex flex-col",style:{padding:`${a(20)} ${a(20)} ${a(32)}`,gap:a(20)},children:[e.jsxs(B,{radius:24,padding:24,className:"flex flex-col",children:[e.jsxs(G,{radius:18,padding:16,accent:I,children:[e.jsxs("div",{className:"flex items-start",style:{gap:a(10)},children:[e.jsx("span",{className:"min-w-0 flex-1 font-semibold",style:{fontSize:a(16),lineHeight:1.4,color:I},children:s("mobile.familyInviteNoticeTitle")}),e.jsx(K,{src:X,size:26,color:I})]}),e.jsx("p",{className:"font-medium text-[var(--mc-text-secondary)]",style:{marginTop:a(8),fontSize:a(15),lineHeight:1.4},children:s("mobile.familyInviteNoticeText")})]}),e.jsx("div",{className:"flex justify-center",style:{marginTop:a(20)},children:e.jsx("span",{style:{height:a(130),width:a(130)},children:e.jsx(O,{src:"/lottie/invite_family.json",className:"h-full w-full",fallbackEmoji:"👨‍👩‍👧"})})}),e.jsx("h2",{className:"text-center font-bold text-[var(--mc-text-primary)]",style:{marginTop:a(12),fontSize:a(22)},children:s("mobile.familyInviteScreenTitle")}),e.jsx("p",{className:"text-center text-[var(--mc-text-secondary)]",style:{marginTop:a(8),fontSize:a(16),lineHeight:1.4},children:s("mobile.familyInviteScreenDescription")}),e.jsxs("div",{className:"flex flex-col",style:{marginTop:a(24),gap:a(16)},children:[e.jsx(E,{label:s("mobile.familyEmail"),fieldId:n.email,error:o("email"),children:e.jsx("input",{id:n.email,type:"email",inputMode:"email",autoComplete:"email",value:i.email,onChange:l=>i.setEmail(l.target.value),onBlur:()=>c("email"),placeholder:s("mobile.familyWriteYourEmail"),disabled:f,"aria-invalid":!!o("email")||void 0,"aria-describedby":o("email")?`${n.email}-error`:void 0,className:v,style:{...r,padding:`0 ${a(10)} 0 ${a(24)}`,height:a(58)}})}),e.jsx(E,{label:s("mobile.familyYourName"),fieldId:n.name,error:o("name"),children:e.jsx("input",{id:n.name,type:"text",autoComplete:"name",autoCapitalize:"words",value:i.name,onChange:l=>i.setName(l.target.value),onBlur:()=>c("name"),placeholder:s("mobile.familyNameHint"),disabled:f,"aria-invalid":!!o("name")||void 0,"aria-describedby":o("name")?`${n.name}-error`:void 0,className:v,style:{...r,padding:`0 ${a(10)} 0 ${a(24)}`,height:a(58)}})}),e.jsx(E,{label:s("mobile.familyMessage"),fieldId:n.message,multiline:!0,error:o("message"),counter:`${i.message.trim().length}/${z}`,children:e.jsx("textarea",{id:n.message,rows:3,maxLength:z,value:i.message,onChange:l=>i.setMessage(l.target.value),onBlur:()=>c("message"),placeholder:s("mobile.familyDefaultInviteMessage"),disabled:f,"aria-invalid":!!o("message")||void 0,"aria-describedby":o("message")?`${n.message}-error`:void 0,className:`${v} resize-none`,style:{...r,padding:`${a(16)} ${a(10)} ${a(16)} ${a(24)}`,minHeight:a(110)}})})]}),e.jsx("div",{style:{marginTop:a(24)},children:e.jsx(U,{label:s("mobile.familySendInvitation"),loading:f,onPress:i.isFormValid?()=>{i.handleInvite()}:void 0})})]}),e.jsxs(B,{radius:24,padding:20,accent:"teal",children:[e.jsx("h3",{className:"font-semibold text-[var(--mc-text-primary)]",style:{fontSize:a(16)},children:s("family.howItWorks")}),e.jsx("ol",{className:"flex flex-col",style:{marginTop:a(14),gap:a(14)},children:m.map(l=>e.jsxs("li",{className:"flex items-start",style:{gap:a(12)},children:[e.jsx("span",{className:"grid shrink-0 place-items-center rounded-full font-bold",style:{width:a(28),height:a(28),fontSize:a(13),color:"var(--mc-accent-ink)",background:"color-mix(in srgb, var(--mc-accent) 14%, transparent)"},children:l}),e.jsxs("div",{className:"min-w-0 flex-1",children:[e.jsx("p",{className:"font-semibold text-[var(--mc-text-primary)]",style:{fontSize:a(14),lineHeight:1.3}

1,children:s(`family.step${l}Title`)}),e.jsx("p",{className:"text-[var(--mc-text-secondary)]",style:{marginTop:a(2),fontSize:a(13),lineHeight:1.35},children:s(`family.step${l}Desc`)})]})]},l))}),e.jsxs("p",{className:"text-[var(--mc-text-secondary)]",style:{marginTop:a(16),fontSize:a(13),lineHeight:1.4},children:[e.jsxs("span",{className:"font-semibold",style:{color:I},children:[s("family.importantNotice"),". "]}),s("family.noticeText")]})]})]})})}function le({step:i,title:s,description:t,delay:n,isLast:d}){return e.jsxs(S.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.4,delay:n},className:"relative z-10 flex gap-4",children:[e.jsxs("div",{className:"relative shrink-0",children:[!d&&e.jsx("div",{className:"absolute left-[15px] top-8 h-[calc(100%+1.5rem)] w-[2px] bg-[#D8ECF7]"}),e.jsx("div",{className:"relative z-10 w-8 h-8 rounded-full bg-[#EAF8FE] text-primary ring-4 ring-card flex items-center justify-center text-sm font-bold",children:i})]}),e.jsxs("div",{className:"min-w-0 flex-1",children:[e.jsx("h4",{className:"text-sm font-semibold text-foreground leading-tight",children:s}),e.jsx("p",{className:"text-xs text-muted-foreground leading-relaxed mt-1",children:t})]})]})}function He(){const i=R(),s=te();return i?e.jsx(H,{children:e.jsx(ie,{state:s})}):e.jsx(re,{state:s})}function re({state:i}){const s=D(),{t}=F(),{email:n,setEmail:d,name:g,setName:c,message:f,setMessage:o,busy:y,formErrors:r,isFormValid:v,shouldShowError:m,markTouched:l,handleInvite:p}=i,j=[{title:t("family.step1Title"),description:t("family.step1Desc")},{title:t("family.step2Title"),description:t("family.step2Desc")},{title:t("family.step3Title"),description:t("family.step3Desc")}];return e.jsx(H,{children:e.jsxs(L,{calm:!0,className:"profile-page pb-12",children:[e.jsx(_,{title:t("common.addFamilyMember"),subtitle:t("family.heroSubtitle"),onBack:()=>s(-1),icon:e.jsx(Q,{className:"w-5 h-5 text-primary"}),className:"mobile-detail-owned-header"}),e.jsx("div",{className:"w-full px-4 py-6 sm:px-6 sm:py-8 lg:px-8",children:e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-5 gap-8 items-start",children:[e.jsxs(S.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:.35},className:"profile-surface glass-card lg:col-span-3 rounded-[28px] p-5 space-y-5 md:p-6",children:[e.jsxs("div",{className:"flex items-start gap-3 pb-1",children:[e.jsx("div",{className:"w-11 h-11 rounded-2xl bg-primary/10 flex items-center justify-center shrink-0",children:e.jsx(C,{className:"w-5 h-5 text-primary"})}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("h2",{className:"text-lg font-bold text-foreground",children:t("family.inviteYourFamily")}),e.jsx("p",{className:"text-sm text-muted-foreground mt-1 leading-relaxed",children:t("family.heroSubtitle")})]})]}),e.jsxs("div",{children:[e.jsxs("label",{className:"text-sm font-semibold text-foreground mb-2 flex items-center gap-2",children:[e.jsx(C,{className:"w-4 h-4 text-primary"}),t("family.emailLabel")]}),e.jsx($,{type:"email",value:n,onChange:u=>d(u.target.value),onBlur:()=>l("email"),placeholder:t("family.emailPlaceholder"),className:`h-12 rounded-xl bg-background placeholder:text-muted-foreground/45 ${m("email")&&r.email?"border-destructive focus-visible:ring-destructive/30":""}`,"aria-invalid":m("email")&&!!r.email}),m("email")&&r.email&&e.jsx("p",{className:"text-xs font-medium text-destructive mt-1.5",children:r.email}),(!m("email")||!r.email)&&e.jsx("p",{className:"text-xs text-muted-foreground mt-1.5",children:t("family.emailHint")})]}),e.jsxs("div",{children:[e.jsxs("label",{className:"text-sm font-semibold text-foreground mb-2 flex items-center gap-2",children:[e.jsx(Y,{className:"w-4 h-4 text-primary"}),t("family.nameLabel")]}),e.jsx($,{value:g,onChange:u=>c(u.target.value),onBlur:()=>l("name"),placeholder:t("family.namePlaceholder"),className:`h-12 rounded-xl bg-background placeholder:text-muted-foreground/45 ${m("name")&&r.name?"border-destructive focus-visible:ring-destructive/30":""}`,"aria-invalid":m("name")&&!!r.name}),m("name")&&r.name&&e.jsx("p",{className:"text-xs font-medium text-destructive mt-1.5",children:r.name}),(!m("name")||!r.name)&&e.jsx("p",{className:"text-xs text-muted-foreground mt-1.5",children:t("family.nameHint",{count:w})})]}),e.jsxs("div",{children:[e.jsxs("label",{className:"text-sm font-semibold text-foreground mb-2 flex items-center gap-2",children:[e.jsx(Z,{className:"w-4 h-4 text-primary"}),t("family.messageLabel")]}),e.jsx(V,{value:f,onChange:u=>o(u.target.value),onBlur:()=>l("message"),placeholder:t("family.messagePlaceholder"),className:`min-h-28 rounded-xl resize-none bg-background placeholder:text-muted-foreground

1/45 ${m("message")&&r.message?"border-destructive focus-visible:ring-destructive/30":""}`,maxLength:240,"aria-invalid":m("message")&&!!r.message}),e.jsxs("div",{className:"flex items-start justify-between gap-3 mt-1.5",children:[m("message")&&r.message?e.jsx("p",{className:"text-xs font-medium text-destructive",children:r.message}):e.jsx("p",{className:"text-xs text-muted-foreground",children:t("family.messageHint",{min:M,max:240})}),e.jsxs("p",{className:"text-xs text-muted-foreground shrink-0",children:[f.trim().length,"/240"]})]})]}),e.jsx(S.div,{whileTap:v&&!y?{scale:.97}:{},className:"pt-1",children:e.jsxs(q,{onClick:p,disabled:y||!v,className:"w-full h-[52px] rounded-full bg-gradient-to-r from-[#65CDFE] to-[#017AFF] cta-blue hover:opacity-90 text-white font-semibold shadow-lg active:scale-[0.97] disabled:bg-none disabled:bg-[#D4D8E1] disabled:text-[#8C9099] disabled:opacity-100 disabled:cursor-not-allowed disabled:shadow-none",children:[e.jsx(ee,{className:"w-5 h-5 mr-2"}),t(y?"family.sendingInvite":"family.sendInvite")]})})]}),e.jsxs("div",{className:"lg:col-span-2 space-y-4 lg:sticky lg:top-24",children:[e.jsxs(S.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:.1},className:"profile-surface glass-card rounded-[28px] p-5",children:[e.jsx("h3",{className:"text-base font-bold text-foreground mb-4",children:t("family.howItWorks")}),e.jsx("div",{className:"space-y-6",children:j.map((u,N)=>e.jsx(le,{step:N+1,title:u.title,description:u.description,delay:.15+N*.07,isLast:N===j.length-1},N))})]}),e.jsxs(S.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:.2},className:"profile-notice flex gap-3 rounded-[24px] p-5",children:[e.jsx(ae,{className:"w-5 h-5 text-amber-500 shrink-0 mt-0.5"}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-sm font-semibold text-amber-700 dark:text-amber-400",children:t("family.importantNotice")}),e.jsx("p",{className:"text-sm text-amber-700/80 dark:text-amber-300/70 mt-1 leading-relaxed",children:t("family.noticeText")})]})]})]})]})})]})})}export{He as default};