https://xbubble.ai/xbubble/assets/devices-DOrP3Be4.js

1import{d as Y,e as K,a,bb as G,h as re,j as e,w as P,L as I,k as V,s as $,bc as F,B as k,J as le,l as J,X as U,bd as oe,f as de}from"./index-CRPZpX17.js";import{k as ce,l as xe,m as me,n as pe,y as ue,o as he,R as X,P as W,O as Z,C as ee,T as te,D as ge,F as fe}from"./popover-5zndvtb5.js";import{C as be,A as je,I as ve}from"./invite-code-page-xhVh6mvp.js";import{O as Ne,a as Ce}from"./device-status-icons-7iM_qVs6.js";import{T as we,a as ye,b as O,c as De,d as Pe,e as _}from"./table-CILtHE9X.js";import{F as Se}from"./noPackages-DM38xhD5.js";import{n as E}from"./sb-loading-BS93ZLM4.js";import{R as se}from"./refresh-ccw-DyyvFge7.js";import{C as Ae}from"./chevron-down-C7lCUKQy.js";import{C as ke}from"./chevron-left-DDXlRq2t.js";import"./dapposLogo-T2t9YBIw.js";import"./incognito-BoJbb9iM.js";import"./search-BenPg9xh.js";function Q(d={}){const{variant:r="page",embeddedPairing:n}=d,{session:c}=Y(),l=K(),s=E("devices"),[u,m]=a.useState(""),[i,f]=a.useState(""),[b,v]=a.useState(""),j=a.useRef(null),h=a.useMemo(()=>G((c==null?void 0:c.address)??""),[c==null?void 0:c.address]),x=re({queryKey:["gateway_devices",h],enabled:!!h,queryFn:async()=>F.listUserDevices({eoa:h}),refetchInterval:6e4,staleTime:6e4,refetchIntervalInBackground:!0}),N=a.useCallback(async()=>{await l.invalidateQueries({queryKey:["gateway_devices",h]})},[l,h]),g=r==="embedded"&&n!=null,o=g&&n?n.pairingCode:u,w=g&&n?n.expiresAt:i,R=g&&n?n.name:b,q=a.useCallback(t=>{const p=x.data??[];if(j.current=new Set(p.map(L=>L.device.id)),g&&n){n.onPairingCodeReady(t);return}m(t.pairingCode),f(t.expiresAt),v(t.name)},[x.data,n,g]),T=a.useCallback(()=>{if(j.current=null,g&&n){n.onClosePairing();return}m(""),f(""),v("")},[n,g]),[y,ne]=a.useState(10),[D,S]=a.useState(1),C=a.useMemo(()=>x.data??[],[x.data]);a.useEffect(()=>{if(!o){j.current=null;return}const t=j.current;!t||!C.some(L=>!t.has(L.device.id))||T()},[C,T,o]);const A=a.useMemo(()=>Math.max(1,Math.ceil(C.length/y)),[C.length,y]),H=a.useMemo(()=>{const t=(D-1)*y,p=t+y;return C.slice(t,p)},[D,C,y]),z=D>1,B=D<A,ie=a.useMemo(()=>H.map(t=>{const p=t.device;return{deviceId:p.id,name:p.name||"—",status:p.status||"—",lastSeenAt:Ie(p.last_seen_at)}}),[H]),M=a.useMemo(()=>[{id:"name",header:s("tableName"),headerClassName:"h-auto w-auto min-w-[180px] px-5 py-2 text-[12px] font-medium text-[#858481] text-left",mobileValueClassName:"text-right",renderCell:t=>t.name},{id:"status",header:s("tableStatus"),headerClassName:"h-auto w-auto min-w-[140px] px-5 py-2 text-[12px] font-medium text-[#858481] text-left",mobileValueClassName:"text-right",renderCell:t=>e.jsx(Re,{status:t.status})},{id:"lastSeenAt",header:s("tableLastSeen"),headerClassName:"h-auto w-auto px-5 py-2 text-[12px] font-medium text-[#858481] text-left",mobileValueClassName:"text-right",renderCell:t=>t.lastSeenAt},{id:"actions",header:s("tableActions"),headerClassName:"h-auto px-5 min-w-[120px] py-2 text-right text-[12px] font-medium text-[#858481]",mobileValueClassName:"text-right",renderCell:t=>e.jsx(Me,{rowData:t,eoa:h,deviceId:t.deviceId,onRefresh:N})}],[h,N,s]);return a.useEffect(()=>{S(1)},[y]),a.useEffect(()=>{D>A&&S(A)},[D,A]),h?e.jsxs("section",{className:P("flex flex-col space-y-4",r==="embedded"?"mx-0 max-w-none flex-1 min-h-0 overflow-y-auto px-5 pb-6":"mx-4 max-w-[800px] px-4 pb-10 sm:pb-4 md:mx-auto"),children:[r==="page"?e.jsxs("div",{className:"flex flex-wrap gap-3 justify-between items-center",children:[e.jsxs("div",{className:"flex gap-2 items-center",children:[e.jsx("h2",{className:"text-[24px] font-semibold",children:s("title")}),e.jsx("button",{type:"button","aria-label":s("refreshDeviceListAria"),className:"px-0",onClick:N,children:e.jsx(se,{className:"size-5"})})]}),e.jsx("div",{className:"flex gap-2 items-center",children:e.jsx(ae,{eoa:h,onPairingCodeReady:q})})]}):null,x.isLoading?e.jsx("div",{className:"flex justify-center items-center p-10 rounded-md border",children:e.jsx(I,{className:"w-5 h-5 animate-spin text-muted-foreground"})}):x.isError?e.jsx("div",{className:"p-4 text-sm rounded-md border text-destructive",children:x.error instanceof Error?x.error.message:s("devicesLoadError")}):e.jsx(e.Fragment,{children:e.jsxs("div",{className:"overflow-hidden rounded-[12px] border border-[#0000000F]",children:[e.jsxs(we,{className:"border-b",children:[e.jsx(ye,{className:"hidden md:table-header-group",children:e.jsx(O,{children:M.map(t=>e.jsx(De,{className:t.headerClassName,children:t.header},t.id))})}),e.jsx(Pe,{children:C.length===0?e.jsx(O,{className:"hover:bg-transparent",children:e.jsx(_,{colSpan:M.length,className:"text-center",children:e.jsxs("div",{className:"flex flex-col h-[150px] gap-2 items-center justify-center ",children:[e.jsx(Se,{className:"size-6"}),e.jsx("span",{className:"text-xs font-normal text-[#858481]",children:s("emptyConnectedDevice")})]})})}):ie.map(t=>e.jsxs(O,{className:"border-b border-[#0000000F] hover:bg-gray-50",children:[e.jsx(_,{colSpan:M.length,className:"px-5 py-4 text-[12px] text-[#34322D] md:hidden",children:e.jsx("div",{className:"flex flex-col gap-2",children:M.map(p=>e.jsxs("div",{className:"flex gap-4 justify-between items-center",children:[e.jsx("span",{className:"text-[#858481]",children:p.header}),e.jsx("span",{className:p.mobileValueClassName,children:p.renderCell(t)})]}

1,p.id))})}),M.map(p=>e.jsx(_,{className:"hidden px-5 py-4 text-[12px] text-[#34322D] md:table-cell",children:p.renderCell(t)},p.id))]},t.deviceId))})]}),C.length>0?e.jsxs("section",{className:"flex items-center justify-center border-t border-[#0000000F] py-4 md:justify-between md:px-5",children:[e.jsxs("div",{className:"hidden gap-2 items-center md:flex",children:[e.jsx("span",{className:"text-xs text-[#34322d]",children:s("paginationShowRows")}),e.jsxs(ce,{children:[e.jsx(xe,{asChild:!0,children:e.jsxs("button",{type:"button",className:"flex items-center gap-1 rounded-[6px] border border-[#0000000F] px-2 py-[6px] text-xs text-[#34322d]","aria-label":s("paginationShowRows"),children:[y,e.jsx(Ae,{className:"w-3 h-3"})]})}),e.jsx(me,{className:"rounded-[8px]",children:[10,20,50,100].map(t=>e.jsx(pe,{onClick:()=>ne(t),children:t},t))})]})]}),e.jsxs("div",{className:"flex gap-2 items-center",children:[e.jsx("button",{type:"button",onClick:()=>S(1),className:P("flex items-center rounded-[6px] border border-[#0000000F] px-2 py-[6px] text-xs",z?"text-[#2aae67]":"text-[#34322d]"),children:s("paginationFirst")}),e.jsx("button",{type:"button",onClick:()=>z&&S(t=>t-1),className:"flex items-center","aria-label":s("paginationPrevAria"),children:e.jsx(ke,{className:P("h-4 w-4",z?"text-[#2aae67]":"text-[#85848180]")})}),e.jsxs("div",{className:"flex items-center rounded-[6px] border border-[#0000000F] px-2 py-[6px] text-xs text-[#34322d]",children:[e.jsx("span",{children:s("paginationPage")}),e.jsx("span",{className:"ml-1",children:D}),e.jsx("span",{className:"mx-1",children:s("paginationOf")}),e.jsx("span",{children:A})]}),e.jsx("button",{type:"button",onClick:()=>B&&S(t=>t+1),className:"flex items-center","aria-label":s("paginationNextAria"),children:e.jsx(ue,{className:P("h-4 w-4",B?"text-[#2aae67]":"text-[#85848180]")})}),e.jsx("button",{type:"button",onClick:()=>S(A),className:P("flex items-center rounded-[6px] border border-[#0000000F] px-2 py-[6px] text-xs",B?"text-[#2aae67]":"text-[#34322d]"),children:s("paginationLast")})]})]}):null]})}),e.jsx(Ee,{open:!!o,eoa:h,pairingCode:o,expiresAt:w,name:R,onPairingCodeReady:q,onClose:T})]}):e.jsx("section",{className:P("flex flex-col space-y-4",r==="embedded"?"mx-0 max-w-none px-5":"mx-4 max-w-[800px] md:mx-auto"),children:r==="page"?e.jsx("h2",{className:"text-xl font-semibold",children:s("title")}):null})}function ae(d){const{eoa:r,onPairingCodeReady:n,triggerClassName:c}=d,l=E("devices"),s=V({mutationFn:async()=>{const u=await F.createPairingCode({eoa:r});return{pairingCode:u.pairing_code,expiresAt:u.expires_at,name:""}},onSuccess:({pairingCode:u,expiresAt:m,name:i})=>{n({pairingCode:u,expiresAt:m,name:i})},onError:u=>{$(u instanceof Error?u.message:l("pairingCodeError"))}});return e.jsxs(k,{onClick:()=>s.mutate(),disabled:s.isPending,"aria-label":l("createPairingCodeAria"),className:P("flex gap-2 items-center px-2 h-7 rounded-full",c),children:[e.jsx(he,{className:"size-4 shrink-0"}),s.isPending?e.jsx(I,{className:"animate-spin size-4 shrink-0"}):null,e.jsx("span",{className:c?"text-sm font-medium":"text-xs",children:l("createDeviceButton")})]})}function Ee(d){const{open:r,eoa:n,pairingCode:c,expiresAt:l,name:s,onPairingCodeReady:u,onClose:m}=d,i=E("devices"),f=a.useMemo(()=>c.replace(/(\d{3})(?=\d)/g,"$1 "),[c]),[b,v]=a.useState(()=>Date.now());a.useEffect(()=>{if(!r)return;v(Date.now());const o=window.setInterval(()=>{v(Date.now())},1e3);return()=>window.clearInterval(o)},[r]);const j=a.useMemo(()=>{if(!l)return null;const w=new Date(l).getTime();return Number.isNaN(w)?null:w},[l]),h=j!==null&&b>=j,x=a.useMemo(()=>{if(j===null)return null;const o=Math.ceil((j-b)/1e3);return Math.max(0,o)},[j,b]),N=a.useMemo(()=>{if(x===null)return"--:--";const o=Math.floor(x/3600),w=Math.floor(x%3600/60),R=x%60;return o>0?`${String(o).padStart(2,"0")}:${String(w).padStart(2,"0")}:${String(R).padStart(2,"0")}`:`${String(w).padStart(2,"0")}:${String(R).padStart(2,"0")}`},[x]),g=V({mutationFn:async()=>{const o=await F.regeneratePairingCode({eoa:n,name:s||void 0});return{pairingCode:o.pairing_code,expiresAt:o.expires_at,name:s}},onSuccess:o=>{J(i("regeneratePairingCodeSuccess")),u(o)},onError:o=>{$(o instanceof Error?o.message:i("regeneratePairingCodeError"))}});return e.jsx(X,{open:r,onOpenChange:o=>{o||m()},children:e.jsxs(W,{children:[e.jsx(Z,{className:"fixed inset-0 bg-[#05050533] backdrop-blur-[4px]",style:{zIndex:80}}),e.jsxs(ee,{className:"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-32px)] sm:w-[408px] bg-white rounded-[24px] overflow-hidden p-0",style:{zIndex:80},children:[e.jsxs("div",{className:"relative px-5 pt-6 pr-12 pb-2",children:[e.jsx(te,{className:"text-[18px] leading-tight font-medium text-[#34322D]",children:i("pairingDialogAddNewDeviceTitle")}),e.jsx("p",{className:"mt-2 text-[12px] leading-5 text-[#6E6D6C]",children:i("pairingDialogAddNewDeviceDescription")}),e.jsx("button",{type:"button",onClick:m,"aria-label":i("closePairingCodeDialogAria"),className:"absolute top-5 right-5 text-[#6E6D6C] hover:text-[#1D1C1B]",children:e.jsx(U,{className:"w-6 h-6"})})]}),e.jsxs("div",{className:"px-4 py-4",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx("p",{className:"text-left text-[14px] leading-none font-medium text-[#34322D]",children:i("pairingDialogYourPairingCode")}),e.jsx("div",{className:"space-y-2 text-center",children:h?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"flex justify-center",children:e.jsxs(k,{onClick:()=>g.mutate(),disabled:g.isPending,"aria-label":i("regeneratePairingCodeAria"),className:"h-11 rounded-[12px] bg-[#2aae67] px-6 text-sm font-medium text-white hover:bg-[#2aae67]/95",children:[g.isPending?e.jsx(I,{className:"mr-2 w-4 h-4 animate-spin"}):null,i("pairingCodeGenerateNewCode")]})}),e.jsx("p",{className:"text-[12px] leading-none text-[#858481]",children:i("pairingCodeExpired")})]}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-[20px] justify-center flex items-center gap-2 leading-none font-medium tracking-[0.18em] text-[#34322D] ",children:[f,e.jsx(be,{text:f,className:"cursor-pointer"})]}),e.jsxs("div",{className:"flex flex-wrap gap-2 justify-center items-center",children:[e.jsx("p",{className:"text-[12px] leading-none text-[#858481]",children:i("pairingCodeExpiresIn",{time:N})}),e.jsxs(k,{variant:"ghost",onClick:()=>g.mutate(),disabled:g.isPending,"aria-label":i("regeneratePairingCodeAria"),className:"h-auto px-0 py-0 text-[12px] leading-none font-medium text-[#27AE60] hover:bg-transparent hover:text-[#27AE60]",children:[g.isPending?e.jsx(I,{className:"mr-1 w-3.5 h-3.5 animate-spin"}):null,i("regeneratePairingCodeButton")]})]})]})})]}),s?e.jsx("p",{className:"mt-4 text-xs leading-5 text-[#6B6A69] break-all",children:i("pairingCodeNameHint",{name:s})}):null,e.jsx("p",{className:"mt-4 text-[12px] leading-5 text-[#7D7C7B]",children:i("pairingCodeShareHint")})]})]})]})})}function Me(d){const{eoa:r,deviceId:n,onRefresh:c}=d,l=E("devices"),[s,u]=a.useState(!1),m=()=>u(!1),i=V({mutationFn:async()=>F.disableDevice({eoa:r,deviceId:n}),onSuccess:async()=>{J(l("disableSuccess")),m(),await c()},onError:b=>$(b instanceof Error?b.message:l("disableError"))}),f=i.isPending;return e.jsxs("div",{className:"flex flex-wrap gap-2 justify-end items-center",children:[e.jsx(k,{size:"sm",variant:"destructive",disabled:f,className:"bg-transparent roun

1ded-xl border border-destructive text-destructive hover:bg-transparent hover:border-destructive/80 h-[26px] text-xs","aria-label":l("disableDeviceAria",{deviceId:n}),onClick:()=>u(!0),children:l("removeDeviceButton")}),e.jsx(X,{open:s,onOpenChange:b=>{b||m()},children:e.jsxs(W,{children:[e.jsx(Z,{className:"fixed inset-0 bg-[#05050533] backdrop-blur-[4px]",style:{zIndex:80}}),e.jsxs(ee,{className:"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-32px)] sm:w-full sm:max-w-[407px] bg-white rounded-[16px] overflow-hidden p-4",style:{zIndex:80},children:[e.jsxs("div",{className:"relative py-2 pr-10",children:[e.jsx(te,{className:"text-lg font-semibold text-left",children:l("removeDeviceDialogTitle")}),e.jsx("button",{type:"button",onClick:m,"aria-label":l("removeDeviceCloseAria"),className:"absolute top-2 right-0 text-[#6E6D6C] hover:text-[#1D1C1B]",children:e.jsx(U,{className:"size-5"})})]}),e.jsxs("div",{className:"mt-4 space-y-4",children:[e.jsx("p",{className:"text-[14px] leading-5 text-[#646362]",children:l("removeDeviceNameLabel")}),e.jsx("p",{className:"text-[16px] leading-5  font-medium text-[#34322D]",children:d.rowData.name}),e.jsx(ge,{className:"text-[12px] leading-5 text-[#646362]",children:l("removeDeviceDialogDescription")})]}),e.jsxs("div",{className:"flex flex-row flex-wrap gap-2 justify-center mt-6",children:[e.jsx(k,{type:"button",className:"flex-1 min-w-[120px] rounded-[12px] h-[45px] py-3",disabled:i.isPending,onClick:()=>i.mutate(),children:l("removeDeviceConfirmButton")}),e.jsx(k,{type:"button",variant:"outline",className:"flex-1 min-w-[120px] rounded-[12px] h-[45px] py-3",onClick:m,children:l("cancel")})]})]})]})})]})}function Re(d){const{status:r}=d,c=r.trim().toLowerCase()==="online";return e.jsxs("span",{className:"inline-flex gap-2 items-center",children:[c?e.jsx(Ne,{className:"size-4 shrink-0","aria-hidden":!0}):e.jsx(Ce,{className:"size-4 shrink-0","aria-hidden":!0}),e.jsx("span",{children:r})]})}function Ie(d){if(!d)return"—";const r=le(d);return r.isValid()?r.format("YYYY-MM-DD HH:mm:ss"):d}function Fe(){const d=de(),r=K(),{session:n}=Y(),c=E("devices"),l=E("checkout"),s=a.useMemo(()=>G((n==null?void 0:n.address)??""),[n==null?void 0:n.address]),[u,m]=a.useState(""),[i,f]=a.useState(""),[b,v]=a.useState("");a.useEffect(()=>{d||(m(""),f(""),v(""))},[d]);const j=()=>{r.invalidateQueries({queryKey:["gateway_devices",s]})};return d?e.jsxs("div",{className:"flex h-full min-h-0 flex-col bg-[#F8F8F7]",children:[e.jsxs("div",{className:"grid shrink-0 grid-cols-3 items-center px-5 py-4",children:[e.jsx("div",{className:"flex items-center gap-1",children:e.jsx("button",{type:"button",className:"cursor-pointer border-0 bg-transparent p-0","aria-label":l("back"),onClick:()=>window.history.back(),children:e.jsx(fe,{className:"h-6 w-6 text-[#858481]"})})}),e.jsxs("div",{className:"flex min-w-0 items-center justify-center gap-1.5",children:[e.jsx("span",{className:"truncate text-[16px] font-medium text-[#34322d]",children:c("title")}),e.jsx("button",{type:"button",className:"shrink-0 cursor-pointer rounded-md border-0 bg-transparent p-0.5","aria-label":c("refreshDeviceListAria"),onClick:j,children:e.jsx(se,{className:"size-5 text-[#34322d]"})})]}),e.jsx("div",{className:"flex min-w-0 justify-end",children:s?e.jsx(ae,{eoa:s,triggerClassName:"h-7 gap-1 rounded-full border-0 bg-[#2aae67] px-2 py-1 text-[13px] font-medium text-white shadow-none hover:bg-[#2aae67]/90 hover:text-white [&_svg]:text-white",onPairingCodeReady:({pairingCode:h,expiresAt:x,name:N})=>{m(h),f(x),v(N)}}):null})]}),e.jsx("div",{className:"flex min-h-0 flex-1 flex-col",children:e.jsx(Q,{variant:"embedded",embeddedPairing:{pairingCode:u,expiresAt:i,name:b,onPairingCodeReady:({pairingCode:h,expiresAt:x,name:N})=>{m(h),f(x),v(N)},onClosePairing:()=>{m(""),f(""),v("")}}})})]}):e.jsx(Q,{})}const Ge=function(){const r=oe.useSearch();return e.jsx(je,{fallback:e.jsx(ve,{referral:r.referral}),children:e.jsx(Fe,{})})};export{Ge as component};