https://www.flowcall.co/_next/static/chunks/7187-2b35bb3892dabf98.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7187],{7187:(e,t,s)=>{s.r(t),s.d(t,{default:()=>p});var a=s(5155),l=s(2115),r=s(7780),i=s(802),x=s(9088);i.Ay.registerPlugin(x.u);let d=[{label:"Item SKU",value:"HY#193193301"},{label:"Order ID",value:"#4392"},{label:"Order status",value:"Out of stock"},{label:"Shipping",value:"Processing"},{label:"Items",value:"2"},{label:"Value",value:"8900 INR"}],n=[{title:"Ticket created",subtitle:"Category - order tracking request",time:"5 mins ago",iconBg:"#ecf0ea",icon:"plus"},{title:"Ticket assigned to human agent",subtitle:"Assigned to Nikita S.",time:"6 mins ago",iconBg:"#f8f0ff",icon:"profile"},{title:"Ticket updated",subtitle:"Auto fetched shipping and order details",time:"6 mins ago",iconBg:"#e5f1ff",icon:"chat"},{title:"First response",subtitle:"Agent responded to ticket",time:"6 mins ago",iconBg:"#e5f1ff",icon:"chat"}];function c(e){let{type:t,bg:s}=e;return(0,a.jsxs)("div",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-full",style:{width:32,height:32,backgroundColor:s},children:["plus"===t&&(0,a.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",children:(0,a.jsx)("path",{d:"M11 5H7V1C7 0.734784 6.89464 0.48043 6.70711 0.292893C6.51957 0.105357 6.26522 0 6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H5V11C5 11.2652 5.10536 11.5196 5.29289 11.7071C5.48043 11.8946 5.73478 12 6 12C6.26522 12 6.51957 11.8946 6.70711 11.7071C6.89464 11.5196 7 11.2652 7 11V7H11C11.2652 7 11.5196 6.89464 11.7071 6.70711C11.8946 6.51957 12 6.26522 12 6C12 5.73478 11.8946 5.48043 11.7071 5.29289C11.5196 5.10536 11.2652 5 11 5Z",fill:"#9FB79B"})}),"profile"===t&&(0,a.jsxs)("svg",{width:"10",height:"12",viewBox:"0 0 10.0001 11.996",fill:"none",children:[(0,a.jsx)("path",{d:"M5.00008 5C6.38079 5 7.50008 3.88071 7.50008 2.5C7.50008 1.11929 6.38079 0 5.00008 0C3.61937 0 2.50008 1.11929 2.50008 2.5C2.50008 3.88071 3.61937 5 5.00008 5Z",fill:"#D3B0ED"}),(0,a.jsx)("path",{d:"M9.30308 7.99C9.04008 7.068 8.29508 6.388 7.35808 6.216C5.80008 5.929 4.17708 5.93 2.61408 6.221C1.70808 6.39 0.956077 7.085 0.697077 7.99L0.0190774 10.364C-0.0479226 10.6 0.0660774 10.851 0.290077 10.955C1.75508 11.636 3.38408 11.996 5.00008 11.996C6.61608 11.996 8.24508 11.636 9.71008 10.955C9.93308 10.851 10.0481 10.601 9.98108 10.364L9.30308 7.991V7.99Z",fill:"#D3B0ED"})]}),"chat"===t&&(0,a.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 12 11.9996",fill:"none",children:(0,a.jsx)("path",{d:"M10 0H2C1.46957 0 0.960859 0.210714 0.585786 0.585786C0.210714 0.960859 0 1.46957 0 2L0 7C0 7.53043 0.210714 8.03914 0.585786 8.41421C0.960859 8.78929 1.46957 9 2 9H3.732L5.584 11.777C5.62966 11.8455 5.69152 11.9016 5.76409 11.9405C5.83666 11.9793 5.91769 11.9996 6 11.9996C6.08231 11.9996 6.16334 11.9793 6.23591 11.9405C6.30848 11.9016 6.37034 11.8455 6.416 11.777L8.268 9H10C10.5304 9 11.0391 8.78929 11.4142 8.41421C11.7893 8.03914 12 7.53043 12 7V2C12 1.46957 11.7893 0.960859 11.4142 0.585786C11.0391 0.210714 10.5304 0 10 0Z",fill:"#BACDE3"})})]})}function o(){return(0,a.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 12.0015 12",fill:"none",children:[(0,a.jsx)("path",{d:"M6 1.08075C7.602 1.08075 7.79175 1.0875 8.42475 1.116C8.80513 1.12057 9.18188 1.19059 9.5385 1.323C9.79934 1.41936 10.0352 1.57315 10.2285 1.773C10.4283 1.96634 10.5821 2.20216 10.6785 2.463C10.8109 2.81962 10.8809 3.19637 10.8855 3.57675C10.914 4.20975 10.9207 4.40175 10.9207 6.0015C10.9207 7.60125 10.914 7.79325 10.8855 8.42625C10.8809 8.80663 10.8109 9.18338 10.6785 9.54C10.5789 9.79883 10.4261 10.0339 10.23 10.23C10.0339 10.4261 9.79883 10.5

1789 9.54 10.6785C9.18338 10.8109 8.80663 10.8809 8.42625 10.8855C7.79325 10.914 7.60125 10.9207 6.0015 10.9207C4.40175 10.9207 4.20975 10.914 3.57675 10.8855C3.19637 10.8809 2.81962 10.8109 2.463 10.6785C2.20216 10.5821 1.96634 10.4283 1.773 10.2285C1.57315 10.0352 1.41936 9.79934 1.323 9.5385C1.19059 9.18188 1.12057 8.80513 1.116 8.42475C1.0875 7.79175 1.08075 7.59975 1.08075 6C1.08075 4.40025 1.0875 4.20825 1.116 3.57525C1.12057 3.19487 1.19059 2.81812 1.323 2.4615C1.41936 2.20066 1.57315 1.96484 1.773 1.7715C1.96634 1.57165 2.20216 1.41786 2.463 1.3215C2.81962 1.18909 3.19637 1.11907 3.57675 1.1145C4.20975 1.086 4.40175 1.07925 6.0015 1.07925M6 0C4.37025 0 4.16625 0.00675 3.525 0.036C3.02772 0.0461126 2.53575 0.140449 2.07 0.315C1.66947 0.465419 1.30673 0.7017 1.00725 1.00725C0.7017 1.30673 0.465419 1.66947 0.315 2.07C0.140449 2.53575 0.0461126 3.02772 0.036 3.525C0.00675 4.16625 0 4.37025 0 6C0 7.62975 0.00675 7.83375 0.036 8.475C0.0461126 8.97228 0.140449 9.46425 0.315 9.93C0.465419 10.3305 0.7017 10.6933 1.00725 10.9927C1.30673 11.2983 1.66947 11.5346 2.07 11.685C2.53622 11.8597 3.02871 11.9541 3.5265 11.964C4.16625 11.9932 4.37025 12 6 12C7.62975 12 7.83375 11.9932 8.475 11.964C8.97279 11.9541 9.46528 11.8597 9.9315 11.685C10.3301 11.5307 10.692 11.2949 10.9942 10.9927C11.2964 10.6905 11.5322 10.3286 11.6865 9.93C11.8612 9.46378 11.9556 8.97129 11.9655 8.4735C11.9948 7.83375 12.0015 7.62975 12.0015 5.9985C12.0015 4.36725 11.9948 4.16475 11.9655 3.5235C11.9547 3.02664 11.8599 2.53519 11.685 2.07C11.5346 1.66947 11.2983 1.30673 10.9927 1.00725C10.6933 0.7017 10.3305 0.465419 9.93 0.315C9.46425 0.140449 8.97228 0.0461126 8.475 0.036C7.83375 0.00675 7.62975 0 6 0Z",fill:"#A6A3B5"}),(0,a.jsx)("path",{d:"M6 2.91907C5.39064 2.91907 4.79496 3.09976 4.28829 3.43831C3.78162 3.77685 3.38672 4.25804 3.15353 4.82102C2.92033 5.384 2.85932 6.00348 2.9782 6.60114C3.09708 7.1988 3.39052 7.74778 3.8214 8.17866C4.25229 8.60955 4.80127 8.90299 5.39893 9.02187C5.99658 9.14075 6.61607 9.07973 7.17905 8.84654C7.74203 8.61335 8.22321 8.21845 8.56176 7.71178C8.9003 7.20511 9.081 6.60943 9.081 6.00007C9.081 5.59546 9.00131 5.19482 8.84647 4.82102C8.69164 4.44722 8.46469 4.10757 8.1786 3.82147C7.8925 3.53537 7.55285 3.30843 7.17905 3.15359C6.80524 2.99876 6.4046 2.91907 6 2.91907ZM6 8.00032C5.60439 8.00032 5.21766 7.883 4.88872 7.66321C4.55978 7.44342 4.3034 7.13103 4.15201 6.76553C4.00062 6.40003 3.961 5.99785 4.03818 5.60984C4.11536 5.22183 4.30587 4.86542 4.58561 4.58568C4.86535 4.30594 5.22176 4.11543 5.60977 4.03825C5.99778 3.96107 6.39996 4.00068 6.76546 4.15208C7.13096 4.30347 7.44336 4.55985 7.66315 4.88879C7.88294 5.21773 8.00025 5.60446 8.00025 6.00007C8.00025 6.53057 7.78951 7.03934 7.41439 7.41446C7.03927 7.78958 6.5305 8.00032 6 8.00032Z",fill:"#A6A3B5"}),(0,a.jsx)("path",{d:"M9.2025 3.51751C9.60014 3.51751 9.9225 3.19516 9.9225 2.79751C9.9225 2.39987 9.60014 2.07751 9.2025 2.07751C8.80485 2.07751 8.4825 2.39987 8.4825 2.79751C8.4825 3.19516 8.80485 3.51751 9.2025 3.51751Z",fill:"#A6A3B5"})]})}function p(){let{onCycleComplete:e}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=(0,l.useRef)(null),s=(0,l.useRef)(null),p=(0,l.useRef)(null),u=(0,l.useRef)(null),h=(0,l.useRef)(null),f=(0,l.useRef)(null),m=(0,l.useRef)(null),g=(0,l.useRef)(null),C=(0,l.useRef)(null),b=(0,l.useRef)(null);(0,r.U)("CustomerDetails",b,t);let[j,y]=(0,l.useState)(!1),v=(0,l.useRef)(null);return(0,l.useEffect)(()=>{let e=t.current,a=s.current;if(!e||!a)return;let l=()=>{let{width:t,height:s}=e.getBoundingClientRect(),l=Math.min(t/760,s/600),r=Math.min(t<768?1.4*l:l,1);a.style.transform="translate(-50%, -50%) scale(".concat(r,")")},r=new ResizeObserver(l);return r.observe(e),l(),()=>r.disconnect()},[]),(0,l.useEffect)(()=>{let e,t=2*Math.PI*16,s=()=>{if(b.current&&v.current){let e=b.current,s=e.progress()*t;v.current.style.strokeDasharray="".concat(s," ").concat(t);let a=!e.paused();a!==j&&y(a)}e=requestAnimationFrame(s)};return e=requestAnimationFrame(s),()=>cancelAnimationFrame(e)},[j]),(0,l.useLayoutEffect)(()=>{let s=i.Ay.matchMedia();return s.add("all",()=>

1{i.Ay.set(h.current,{left:20,width:73}),i.Ay.set(f.current,{opacity:1}),i.Ay.set(m.current,{opacity:.5}),i.Ay.set(g.current,{opacity:1}),i.Ay.set(C.current,{opacity:0}),i.Ay.set(p.current,{opacity:1}),i.Ay.set(u.current,{opacity:1});let s=i.Ay.timeline({defaults:{ease:"power2.out"},repeat:-1,repeatDelay:1,paused:!0,onRepeat:e});b.current=s,x.u.create({trigger:t.current,start:"top 80%",end:"bottom 20%",onEnter:()=>s.play(),onLeave:()=>s.pause(),onEnterBack:()=>s.play(),onLeaveBack:()=>s.pause()}),s.to({},{duration:1.5}),s.to(h.current,{left:117,width:93,duration:.5,ease:"power2.inOut"}),s.to(f.current,{opacity:.5,duration:.4},"<"),s.to(m.current,{opacity:1,color:"#1a1824",duration:.4},"<"),s.to(g.current,{opacity:0,duration:.4},"<"),s.to(C.current,{opacity:1,duration:.4},"<+0.1"),s.to({},{duration:3}),s.to(u.current,{opacity:0,duration:.6,ease:"power2.in"}),s.to(p.current,{opacity:0,duration:.6,ease:"power2.in"},"<"),s.set(h.current,{left:20,width:73}),s.set(f.current,{opacity:1}),s.set(m.current,{opacity:.5,color:"#646076"}),s.set(g.current,{opacity:1}),s.set(C.current,{opacity:0}),s.to(u.current,{opacity:1,duration:.6,ease:"power2.out"}),s.to(p.current,{opacity:1,duration:.6,ease:"power2.out"},"<")},t),()=>s.revert()},[]),(0,a.jsx)("div",{ref:t,className:"relative h-full w-full overflow-hidden rounded-2xl bg-linear-to-b from-[#eaeefe] to-[#fef8f1] md:rounded-3xl",children:(0,a.jsxs)("div",{ref:s,className:"absolute top-1/2 left-1/2",style:{width:760,height:600,transformOrigin:"center center"},children:[(0,a.jsx)("div",{ref:p,"data-ui":"shadow-card",className:"absolute rounded-tl-[26px] rounded-tr-[26px] border-t border-r border-l border-[#e5e5e5]",style:{left:124,top:92,width:512,height:508,backgroundColor:"rgba(255,255,255,0.2)",boxShadow:"inset 0px 2px 0px 0px white"}}),(0,a.jsxs)("div",{ref:u,"data-ui":"main-card",className:"absolute overflow-hidden rounded-tl-[20px] rounded-tr-[20px]",style:{left:132,top:100,width:496,height:508,boxShadow:"0px 1px 0px 1px rgba(131,128,147,0.04), 0px 20px 24px 0px rgba(0,0,0,0.02)"},children:[(0,a.jsxs)("div",{"data-ui":"url-bar",className:"absolute top-0 left-0 overflow-hidden border-b border-[#f3f2f7]",style:{width:496,height:40,backgroundColor:"rgba(255,255,255,0.5)"},children:[(0,a.jsx)("div",{className:"absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-[17px] border border-[#e6e5ed] px-[10px] pt-[5px] pb-[6px]",children:(0,a.jsx)("p",{className:"text-[12px] leading-[1.12] text-[#838093]",children:"app.flowcall.co/insights"})}),(0,a.jsxs)("div",{className:"absolute top-1/2 left-[16px] flex -translate-y-1/2 items-center gap-[6px]",children:[(0,a.jsx)("div",{className:"size-[8px] rounded-full bg-[#ff4b59]"}),(0,a.jsx)("div",{className:"size-[8px] rounded-full bg-[#ffc600]"}),(0,a.jsx)("div",{className:"size-[8px] rounded-full bg-[#00ca48]"})]})]}),(0,a.jsxs)("div",{className:"absolute left-0 border-r border-[rgba(207,205,217,0.2)]",style:{top:40,width:200,height:468,backgroundColor:"rgba(255,255,255,0.4)"},children:[(0,a.jsx)("div",{"data-ui":"title-row",className:"flex items-center border-r border-b border-[rgba(230,229,237,0.7)] px-[16px] pt-[11px] pb-[10px]",style:{backgroundColor:"rgba(255,255,255,0.4)"},children:(0,a.jsx)("p",{className:"font-mono text-[10px] leading-[1.12] text-[#646076] uppercase",children:"Customer details"})}),(0,a.jsxs)("div",{className:"px-0 py-[12px]",children:[(0,a.jsxs)("div",{className:"flex items-center gap-[12px] px-[16px] py-[9px]",children:[(0,a.jsx)("div",{"data-ui":"initial-avatar",className:"flex size-[32px] shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#f0e6d3]",children:(0,a.jsx)("p",{className:"text-[11px] font-medium text-[rgba(0,0,0,0.6)]",children:"AK"})}),(0,a.jsxs)("div",{className:"flex flex-1 flex-col gap-[2px]",children:[(0,a.jsx)("p",{className:"text-[16px] leading-[1.12] font-medium text-[#1a1824]",children:"Alice K"}),(0,a.jsx)("p",{className:"text-[14px] leading-normal text-[#838093]",children:"@alice.k_ig"})]}),(0,a.jsxs)("div",{className:"absolute top-[44px] left-[154px] flex items-center gap-[6px]",children:[(0,a.jsx)("img",{src:"/icons/logo-whatsapp-2.svg",alt:"WhatsApp",width:"12",height:"12",className:"size-3"}),(0,a.jsx)(o,{})]})]}),(0,a.jsxs)("div",{className:"overflow-hidden rounded-[8px] px-[16px] py-[8px] text-[12px] leading-[16

1px]",children:[(0,a.jsxs)("div",{"data-ui":"stats-row-1",className:"flex items-start py-[6px]",children:[(0,a.jsx)("p",{className:"flex-1 text-[#939790]",children:"Past orders"}),(0,a.jsx)("p",{className:"text-right font-semibold text-[#1a1824]",children:"8"})]}),(0,a.jsxs)("div",{"data-ui":"stats-row-2",className:"flex items-start border-t border-[rgba(230,229,237,0.5)] py-[6px]",children:[(0,a.jsx)("p",{className:"flex-1 text-[#939790]",children:"Returns"}),(0,a.jsx)("p",{className:"text-right font-semibold text-[#1a1824]",children:"2"})]})]}),(0,a.jsxs)("div",{className:"overflow-hidden rounded-[8px] px-[16px] pb-[8px]",children:[(0,a.jsx)("div",{className:"flex items-end justify-between pt-[12px] pb-[8px]",children:(0,a.jsx)("p",{className:"text-[11px] leading-[16px] font-medium tracking-[0.55px] text-[#6a6e68] uppercase",children:"Open order"})}),d.map((e,t)=>(0,a.jsxs)("div",{"data-ui":"field-row-".concat(t+1),className:"flex flex-col border-t border-[rgba(230,229,237,0.5)] py-[6px] leading-[16px]",children:[(0,a.jsx)("p",{className:"text-[10px] text-[#939790]",children:e.label}),(0,a.jsx)("p",{className:"text-[11px] text-[#4b5049]",children:e.value})]},e.label))]})]})]}),(0,a.jsxs)("div",{className:"absolute border-b border-[rgba(230,229,237,0.5)]",style:{left:200,top:40,width:296,height:460,backgroundColor:"rgba(255,255,255,0.8)"},children:[(0,a.jsxs)("div",{"data-ui":"tab-bar",className:"relative flex items-center gap-[24px] border-b border-[#e6e5ed] px-[20px] py-[10px] whitespace-nowrap",children:[(0,a.jsx)("p",{ref:f,className:"font-mono text-[11px] leading-[1.12] text-[#646076] uppercase",children:"Open ticket"}),(0,a.jsx)("p",{ref:m,className:"font-mono text-[11px] leading-[1.12] text-[#646076] uppercase",style:{opacity:.5},children:"Closed tickets"}),(0,a.jsx)("p",{className:"font-mono text-[11px] leading-[1.12] text-[#646076] uppercase opacity-50",children:"Past orders"}),(0,a.jsx)("div",{ref:h,className:"absolute bottom-[-1px] h-[2px] bg-[#3f3d4d]",style:{left:20,width:73}})]}),(0,a.jsxs)("div",{ref:g,className:"absolute",style:{top:52,left:20,width:278},children:[(0,a.jsxs)("div",{className:"flex flex-col gap-[4px]",children:[(0,a.jsx)("p",{className:"via-1/2 bg-linear-to-r from-[#ff9466] via-[#f433ff] to-[#0062cc] bg-clip-text text-[11px] leading-[1.36]",style:{WebkitTextFillColor:"transparent"},children:"Ticket summary"}),(0,a.jsx)("p",{className:"text-[11px] leading-[1.36] text-[#838093]",children:"Customer placed an order 4 days ago but haven't received a confirmation or status update. Our systems display Order item out and stock and under processing. Mood - slightly frustrated."})]}),(0,a.jsxs)("div",{className:"relative mt-[20px] flex flex-col gap-[21px]",children:[(0,a.jsx)("div",{className:"absolute top-[34px] left-[15px] h-[202px]",children:(0,a.jsxs)("svg",{width:"1",height:"202",className:"overflow-visible",children:[(0,a.jsx)("line",{x1:"0",y1:"0",x2:"0",y2:"45",stroke:"#d1d0d9",strokeWidth:"1",strokeDasharray:"3 3"}),(0,a.jsx)("line",{x1:"0",y1:"80",x2:"0",y2:"124",stroke:"#d1d0d9",strokeWidth:"1",strokeDasharray:"3 3"}),(0,a.jsx)("line",{x1:"0",y1:"159",x2:"0",y2:"202",stroke:"#d1d0d9",strokeWidth:"1",strokeDasharray:"3 3"})]})}),n.map((e,t)=>(0,a.jsxs)("div",{"data-ui":"timeline-row-".concat(t+1),className:"flex flex-col",children:[(0,a.jsxs)("div",{className:"flex items-center gap-[12px]",children:[(0,a.jsx)(c,{type:e.icon,bg:e.iconBg}),(0,a.jsxs)("div",{className:"flex flex-1 flex-col gap-[2px] text-[12px] leading-[16px]",children:[(0,a.jsx)("p",{className:"font-medium text-[#646076]",children:e.title}

1),(0,a.jsx)("p",{className:"text-[#838093]",children:e.subtitle})]})]}),(0,a.jsx)("div",{className:"py-[4px] pr-[12px] pl-[44px]",children:(0,a.jsx)("p",{className:"text-[12px] leading-[16px] text-[#939790]",children:e.time})})]},e.title))]})]}),(0,a.jsxs)("div",{ref:C,className:"absolute flex flex-col gap-[12px]",style:{top:49,left:8,width:280,opacity:0},children:[(0,a.jsxs)("div",{"data-ui":"ticket-card-1",className:"flex flex-col overflow-hidden rounded-[6px] border border-[#e6e5ed]",children:[(0,a.jsxs)("div",{className:"flex items-center gap-[2px] border-b border-[#e6e5ed] px-[12px] py-[7px] text-[12px] leading-[16px]",children:[(0,a.jsx)("p",{className:"flex-1 font-medium text-[#1a1824]",children:"HY31031"}),(0,a.jsx)("p",{className:"flex-1 text-right text-[11px] text-[#ee4c06]",children:"Order cancellation"})]}),(0,a.jsxs)("div",{className:"flex items-center px-[12px] py-[6px] text-[11px] leading-[16px] font-medium text-[#646076]",children:[(0,a.jsx)("p",{className:"w-[97px]",children:"637.4 INR"}),(0,a.jsx)("p",{className:"flex-1 text-right",children:"2 Items"})]}),(0,a.jsxs)("div",{className:"flex items-start gap-[12px] px-[12px] py-[4px] text-[11px] leading-[16px] text-[#646076]",children:[(0,a.jsx)("p",{className:"flex-1",children:"10% Rice Water Daily Cleanser 8ML"}),(0,a.jsx)("p",{className:"font-semibold",children:"239.2"})]}),(0,a.jsxs)("div",{className:"flex items-start gap-[12px] px-[12px] py-[4px] text-[11px] leading-[16px] text-[#646076]",children:[(0,a.jsx)("p",{className:"flex-1",children:"Ceramide Rich Daily Cream"}),(0,a.jsx)("p",{className:"font-semibold",children:"359..2"})]}),(0,a.jsx)("div",{className:"flex items-start border-t border-[#e6e5ed] bg-[#fbfafb] px-[12px] py-[4px]",children:(0,a.jsx)("p",{className:"flex-1 text-[10px] leading-[16px] text-[#646076]",children:"Cancelled on 1/12/25 - 9:26 PM"})})]}),(0,a.jsxs)("div",{"data-ui":"ticket-card-2",className:"flex flex-col overflow-hidden rounded-[6px] border border-[#e6e5ed]",children:[(0,a.jsxs)("div",{className:"flex items-center gap-[2px] border-b border-[#e6e5ed] px-[12px] py-[7px] text-[12px] leading-[16px]",children:[(0,a.jsx)("p",{className:"flex-1 font-medium text-[#1a1824]",children:"HY22042"}),(0,a.jsx)("p",{className:"flex-1 text-right text-[11px] text-[#543ac1]",children:"Order Exchange"})]}),(0,a.jsxs)("div",{className:"flex items-center px-[12px] py-[6px] text-[11px] leading-[16px] font-medium text-[#646076]",children:[(0,a.jsx)("p",{className:"w-[97px]",children:"503.5 INR"}),(0,a.jsx)("p",{className:"flex-1 text-right",children:"1 Item"})]}),(0,a.jsxs)("div",{className:"flex items-start gap-[12px] px-[12px] py-[4px] text-[11px] leading-[16px] text-[#646076]",children:[(0,a.jsx)("p",{className:"flex-1",children:"Vitamin C Face Serum 60ML"}),(0,a.jsx)("p",{className:"font-semibold",children:"503.5 INR"})]}),(0,a.jsx)("div",{className:"flex items-start border-t border-[#e6e5ed] bg-[#fbfafb] px-[12px] py-[4px]",children:(0,a.jsx)("p",{className:"flex-1 text-[10px] leading-[16px] text-[#646076]",children:"Exchange request placed on 1/5/25 - 9:26 PM"})})]})]})]})]}),(0,a.jsxs)("button",{onClick:()=>{b.current&&(b.current.paused()?b.current.play():b.current.pause())},className:"absolute bottom-4 left-4 z-10 hidden size-10 cursor-pointer items-center justify-center rounded-full bg-slate-300 transition-colors hover:bg-slate-400 md:flex","aria-label":j?"Pause animation":"Play animation",children:[(0,a.jsxs)("svg",{className:"absolute inset-0 size-10 -rotate-90",viewBox:"0 0 40 40",children:[(0,a.jsx)("circle",{cx:"20",cy:"20",r:"16",fill:"none",stroke:"rgba(255,255,255,0.3)",strokeWidth:"2.5"}),(0,a.jsx)("circle",{ref:v,cx:"20",cy:"20",r:"16",fill:"none",stroke:"white",strokeWidth:"2.5",strokeLinecap:"round",strokeDasharray:"0 100.5"})]}),j?(0,a.jsxs)("svg",{width:"10",height:"10",viewBox:"0 0 12 12",fill:"none",className:"relative z-10",children:[(0,a.jsx)("rect",{x:"1.5",y:"1",width:"3",height:"10",rx:"0.8",fill:"white"}),(0,a.jsx)("rect",{x:"7.5",y:"1",width:"3",height:"10",rx:"0.8",fill:"white"})]}):(0,a.jsx)("svg",{width:"10",height:"10",viewBox:"0 0 12 12",fill:"none",className:"relative z-10 ml-0.5",children:(0,a.jsx)("path",{d:"M1.5 1V11L10.5 6L1.5 1Z",fill:"white"})})]})]})})}}}]);