https://beanbook.app/_next/static/chunks/4851.fb2dbcc539bf42a8.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4851],{54851:(e,t,a)=>{a.r(t),a.d(t,{WEEKLY_RECAP_FAMILY_DOT_COLOR:()=>o.hj,WEEKLY_RECAP_X_AXIS_LEFT_PAD_RATIO:()=>o.t9,WEEKLY_RECAP_X_AXIS_RIGHT_PAD_RATIO:()=>o.eQ,WEEKLY_RECAP_X_TICK_COUNT:()=>o.tf,WEEKLY_RECAP_Y_AXIS_EDGE_PAD_RATIO:()=>o.Gg,WEEKLY_RECAP_Y_TICK_COUNT:()=>o.Ch,buildAxis:()=>o.YC,default:()=>c,getAxisRatio:()=>o.N6});var s=a(95155),l=a(80034),n=a(15239),i=a(12115),o=a(5423);let r={floral:"bg-[#D556B2]",fruity:"bg-[#63B534]","clean-balanced":"bg-[#474747]",sweet:"bg-[#D39A2F]","nutty-cocoa":"bg-[#8B5A3C]"};function c(e){var t;let{recap:a,isLoading:c=!1,error:d=null,onBeanSelect:x}=e,[p,u]=(0,i.useState)("all"),[h,m]=(0,i.useState)(null),[f,b]=(0,i.useState)(!1),g=(0,i.useRef)(null),[v,w]=(0,i.useState)(0);if((0,i.useEffect)(()=>{if(!a||0===a.sections.length){u("all"),m(null);return}"all"===p||a.sections.some(e=>e.id===p)||u("all")},[a,p]),(0,i.useEffect)(()=>{if("function"!=typeof window.matchMedia)return;let e=window.matchMedia("(hover: none), (pointer: coarse)"),t=()=>{b(e.matches)};return(t(),"function"==typeof e.addEventListener)?(e.addEventListener("change",t),()=>e.removeEventListener("change",t)):(e.addListener(t),()=>e.removeListener(t))},[]),(0,i.useEffect)(()=>{m(null)},[p,null==a?void 0:a.generatedAt]),(0,i.useEffect)(()=>{let e=g.current;if(!e)return;let t=()=>{w(e.clientWidth)};if(t(),"undefined"==typeof ResizeObserver)return;let a=new ResizeObserver(()=>t());return a.observe(e),()=>a.disconnect()},[]),c)return(0,s.jsx)("section",{"aria-label":"Loading weekly bean recap",className:"overflow-hidden rounded-[26px] border border-[#D7E2E8]/85 bg-[linear-gradient(145deg,rgba(255,255,255,0.98),rgba(246,250,252,0.96))] p-4 shadow-[0_14px_34px_rgba(15,23,42,0.06)] md:p-5",children:(0,s.jsxs)("div",{className:"animate-pulse",children:[(0,s.jsx)("div",{className:"h-3 w-20 rounded-full bg-slate-200"}),(0,s.jsx)("div",{className:"mt-3 h-8 w-44 rounded-full bg-slate-200"}),(0,s.jsx)("div",{className:"mt-2 h-4 w-32 rounded-full bg-slate-200"}),(0,s.jsx)("div",{className:"mt-5 flex gap-2 overflow-hidden",children:Array.from({length:4}).map((e,t)=>(0,s.jsx)("div",{className:"h-10 w-24 rounded-full bg-slate-200"},"weekly-recap-toggle-skeleton-".concat(t)))}),(0,s.jsx)("div",{className:"mt-5",children:(0,s.jsxs)("div",{className:"relative h-[336px] overflow-hidden rounded-[20px] border border-white/80 bg-white/65",children:[(0,s.jsx)("div",{className:"absolute inset-y-0 left-[20%] w-px bg-slate-200"}),(0,s.jsx)("div",{className:"absolute inset-y-0 left-[52%] w-px bg-slate-200"}),(0,s.jsx)("div",{className:"absolute inset-y-0 left-[84%] w-px bg-slate-200"}),(0,s.jsx)("div",{className:"absolute inset-x-0 top-[24%] h-px bg-slate-200"}),(0,s.jsx)("div",{className:"absolute inset-x-0 top-[58%] h-px bg-slate-200"}),(0,s.jsx)("div",{className:"absolute left-[27%] top-[30%] h-8 w-8 rounded-full bg-slate-300"}),(0,s.jsx)("div",{className:"absolute left-[34%] top-[28%] h-4 w-24 rounded-full bg-slate-200"}),(0,s.jsx)("div",{className:"absolute left-[34%] top-[34%] h-3 w-20 rounded-full bg-slate-200"})]})})]})});if(d)return(0,s.jsx)("section",{className:"rounded-[24px] border border-rose-200/80 bg-rose-50/90 p-4 text-sm text-rose-700 md:p-5",children:d});if(!a||0===a.sections.length)return null;let y=a.sections.filter(e=>e.items.length>0);if(0===y.length)return null;let N="all"===p,j=null!=(t=y.find(e=>e.id===p))?t:y[0],_=N?"bg-white/60":j.tintClassName,k=y.reduce((e,t)=>e+t.items.length,0),P=Math.round(22.4),A=y.flatMap(e=>e.items.map((t,a)=>({...t,familyId:e.id,familyTitle:e.title,familyTintClassName:e.tintClassName,pointIndex:a}))),E=(0,o.YC)(A.map(e=>e.displayPriceValue),6,{padMinRatio:.1,padMaxRatio:.3,spreadTicksAcrossAxis:!0}),C=(0,o.YC)(A.map(e=>e.bagSizeGrams),5,{padRatio:.16,spreadTicksAcrossAxis:!0}),I=function(e){var t,a;let s=new Map;e.map(e=>{var t,a;return(null==(a=e.priceLabel.match(/^[^\d.-]+/))||null==(t=a[0])?void 0:t.trim())||""}).filter(Boolean).forEach(e=>{var t;s.set(e,(null!=(t=s.get(e))?t:0)+1)});let l=null!=(a=null==(t=Array.from(s.entries()).sort((e,t)=>

1t[1]-e[1])[0])?void 0:t[0])?a:"";return{label:l?"Price (".concat(l,")"):"Price",tickPrefix:l}}(A),L=376,M=Math.max(0,v-42-12),R=A.map(e=>{let t=(0,o.N6)(e.displayPriceValue,E.min,E.max),a=1-(0,o.N6)(e.bagSizeGrams,C.min,C.max);return{...e,xRatio:t,yRatio:a,xPx:t*M,yPx:a*L,offsetXPx:0,offsetYPx:0,isActiveFamily:N||e.familyId===j.id}}),T=function(e,t){let a=new Map,s=new Set;for(let n=0;n<e.length;n+=1){var l;if(s.has(n))continue;let i=[n];s.add(n);for(let a=0;a<i.length;a+=1){let l=e[i[a]];for(let a=0;a<e.length;a+=1){if(s.has(a))continue;let n=e[a];Math.hypot(l.xPx-n.xPx,l.yPx-n.yPx)>t.clusterDistancePx||(s.add(a),i.push(a))}}if(i.length<2){let t=e[n];a.set(t.postId,{x:0,y:0});continue}let o=i.map(t=>e[t]),r=t.pinActivePoint&&null!=(l=o.find(e=>e.isActiveFamily))?l:null,c=r?o.filter(e=>e.postId!==r.postId):o,d=Math.max(0,t.baseRadiusPx),x=Math.max(4,t.ringGapPx);r&&a.set(r.postId,{x:0,y:0}),c.forEach((e,t)=>{let s=Math.floor(t/6),l=t%6,n=Math.min(6,c.length-6*s),i=d+s*x,o=(r?-Math.PI/2:-Math.PI/4)+2*Math.PI*l/Math.max(1,n);a.set(e.postId,{x:Math.cos(o)*i,y:Math.sin(o)*i})})}return a}(R,{clusterDistancePx:Math.max(18,.72*P),baseRadiusPx:P,ringGapPx:Math.max(10,.72*P),pinActivePoint:!1}),Y=R.map(e=>{var t;let a=null!=(t=T.get(e.postId))?t:{x:0,y:0};return{...e,offsetXPx:a.x,offsetYPx:a.y}}),U=(e,t)=>{if(t&&1){(0,l.kT)(t,"weekly_recap"),window.open(t,"_blank","noopener,noreferrer");return}null==x||x(e)},z=(0,s.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,s.jsx)("button",{type:"button",onClick:()=>u("all"),className:"rounded-full border px-3 py-2 transition ".concat(N?"bg-primary border-primary text-white":"border-slate-200/80 bg-white/85 text-slate-600 hover:border-slate-300/80 hover:bg-white"),children:(0,s.jsxs)("span",{className:"flex items-center gap-2",children:[(0,s.jsx)("span",{className:"text-[12px] font-light italic leading-none [font-family:var(--font-merriweather)] md:text-[13px]",children:"All"}),(0,s.jsx)("span",{className:"rounded-full px-1.5 py-0.5 text-[10px] font-medium leading-none ".concat(N?"bg-white/20 text-white":"bg-slate-700/80 text-white"),children:k})]})},"all"),y.map(e=>{var t;let a=!N&&j.id===e.id;return(0,s.jsx)("button",{type:"button",onClick:()=>u(e.id),className:"rounded-full border px-3 py-2 transition ".concat(a?"".concat(e.tintClassName," border-slate-300/75 text-slate-900"):"border-slate-200/80 bg-white/85 text-slate-600 hover:border-slate-300/80 hover:bg-white"),children:(0,s.jsxs)("span",{className:"flex items-center gap-2",children:[(0,s.jsx)("span",{className:"text-[12px] font-light italic leading-none [font-family:var(--font-merriweather)] md:text-[13px]",children:e.title}),(0,s.jsx)("span",{className:"rounded-full px-1.5 py-0.5 text-[10px] font-medium leading-none text-white ".concat(null!=(t=r[e.id])?t:"bg-slate-700/80"),children:e.items.length})]})},e.id)})]});return(0,s.jsxs)("section",{className:"overflow-hidden rounded-[26px] border border-[#D7E2E8]/85 bg-[linear-gradient(145deg,rgba(255,255,255,0.98),rgba(246,250,252,0.96))] shadow-[0_14px_34px_rgba(15,23,42,0.06)]",children:[(0,s.jsxs)("div",{className:"px-4 pb-3 pt-4 md:px-5 md:pb-3.5 md:pt-5",children:[(0,s.jsx)("h2",{className:"font-serif text-[19px] italic leading-[1.08] text-slate-900 md:text-[22px]",children:a.title}),(0,s.jsx)("p",{className:"mt-2 font-sans text-[11px] font-light text-slate-500 md:text-[12px]",children:a.subtitle})]}),(0,s.jsx)("div",{className:"bg-white p-[10px] transition-[height] duration-200 ease-out",style:{height:"".concat(440,"px")},children:(0,s.jsxs)("div",{className:"relative h-full overflow-hidden rounded-[20px] transition-[height] duration-200 ease-out",style:{height:"".concat(420,"px")},ref:g,children:[(0,s.jsx)("div",{className:"absolute inset-0 opacity-70 transition-colors duration-200 ease-out ".concat(_)}),(0,s.jsxs)("div",{className:"absolute",style:{left:"".concat(42,"px"),right:"".concat(12,"px"),top:"".concat(18,"px"),bottom:"".concat(46,"px")},children:[E.ticks.map((e,t)=>(0,s.jsx)("div",{className:"pointer-events-none absolute inset-y-0 border-l border-slate-900/10 transition-[left] duration-200 ease-out",style:{left:"".concat(100*(0,o.N6)(e,E.min,E.max),"%")}

1},"weekly-recap-x-grid-".concat(t))),C.ticks.map((e,t)=>{let a=1-(0,o.N6)(e,C.min,C.max);return(0,s.jsx)("div",{className:"pointer-events-none absolute inset-x-0 border-t border-slate-900/10 transition-[top] duration-200 ease-out",style:{top:"".concat(a*L,"px")}},"weekly-recap-y-grid-".concat(t))}),Y.map(e=>{var t;let a=e.yRatio*L,l=e.isActiveFamily,i=f&&h===e.postId,o=e.xRatio>.68,c=e.yRatio<.2,d=e.yRatio>.82,x=null!=(t=r[e.familyId])?t:"bg-slate-700/80",p=e.beanImageUrl||e.roasterLogoUrl;return(0,s.jsx)("div",{className:"group absolute min-w-0 -translate-x-1/2 -translate-y-1/2 text-left transition-[left,top] duration-200 ease-out hover:z-30 focus-within:z-30 ".concat(i?"z-30":l?"z-20":"z-10"),style:{left:"calc(".concat(100*e.xRatio,"% + ").concat(e.offsetXPx,"px)"),top:"".concat(a+e.offsetYPx,"px")},children:(0,s.jsxs)("span",{className:"relative block transition-transform duration-200 ease-out group-hover:scale-[1.04]",children:[(0,s.jsx)("button",{type:"button",title:"".concat(e.line1,"\n").concat(e.line2),"aria-label":"".concat(e.familyTitle,": ").concat(e.line1,". ").concat(e.line2,"."),onClick:()=>((e,t)=>{if(!f||h===e)return void U(e,t);m(e)})(e.postId,e.beanUrl),className:"block focus:outline-none",children:l?(0,s.jsx)("span",{className:"flex items-center justify-center overflow-hidden rounded-full border border-white bg-white transition-[width,height] duration-200 ease-out",style:{width:"".concat(P,"px"),height:"".concat(P,"px")},children:e.roasterLogoUrl?(0,s.jsx)(n.default,{src:e.roasterLogoUrl,alt:e.roasterName,width:P,height:P,unoptimized:!0,className:"h-full w-full object-cover"}):(0,s.jsx)("span",{className:"text-[11px] font-semibold text-slate-600",children:e.line1.charAt(0).toUpperCase()})}):(0,s.jsxs)("span",{className:"relative flex items-center justify-center",children:[(0,s.jsx)("span",{className:"block rounded-full transition-all duration-150 ".concat(i?"opacity-0":"group-hover:opacity-0 group-focus-visible:opacity-0"," ").concat(x),style:{width:"".concat(9,"px"),height:"".concat(9,"px")}}),(0,s.jsx)("span",{className:"absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-full border border-white bg-white transition-all duration-200 ease-out ".concat(i?"opacity-100":"opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100"),style:{width:"".concat(P,"px"),height:"".concat(P,"px")},children:e.roasterLogoUrl?(0,s.jsx)(n.default,{src:e.roasterLogoUrl,alt:e.roasterName,width:P,height:P,unoptimized:!0,className:"h-full w-full object-cover"}):(0,s.jsx)("span",{className:"text-[11px] font-semibold text-slate-600",children:e.line1.charAt(0).toUpperCase()})})]})}),(0,s.jsx)("div",{className:"absolute hidden min-w-[180px] max-w-[220px] rounded-[16px] border border-slate-200 bg-white p-2.5 shadow-[0_10px_30px_rgba(15,23,42,0.16)] group-hover:flex group-focus-within:flex ".concat(i?"!flex":""," ").concat(o?"right-[calc(100%+12px)] items-end text-right":"left-[calc(100%+12px)] items-start text-left"),style:{top:c?"calc(100% + 10px)":d?"auto":"50%",bottom:d?"calc(100% + 10px)":"auto",transform:c||d?"none":"translateY(-50%)"},children:(0,s.jsxs)("div",{className:"flex w-full items-start gap-2 ".concat(o?"flex-row-reverse text-right":""),children:[(0,s.jsxs)("button",{type:"button",onClick:()=>U(e.postId,e.beanUrl),className:"flex min-w-0 flex-1 items-start gap-2 rounded-[12px] text-left transition-opacity hover:opacity-90 focus:outline-none ".concat(o?"flex-row-reverse text-right":""),children:[(0,s.jsx)("span",{className:"relative h-10 w-10 shrink-0 overflow-hidden rounded-[10px] bg-slate-100",children:p?(0,s.jsx)(n.default,{src:p,alt:e.beanName,fill:!0,unoptimized:!0,className:"object-cover"}):(0,s.jsx)("span",{className:"flex h-full w-full items-center justify-center text-[11px] font-semibold text-slate-500",children:e.line1.charAt(0).toUpperCase()})}),(0,s.jsxs)("span",{className:"flex min-w-0 flex-col ".concat(o?"items-end":"items-start"),children:[(0,s.jsx)("span",{className:"whitespace-normal break-words text-[12px] font-medium leading-[1.15] text-slate-900",children:e.line1}),(0,s.jsx)("span",{className:"mt-0.5 whitespace-nowrap text-[10.5px] font-light leading-[1.2] text-slate-500",children:e.line2})]})]}),e.beanUrl?(0,s.jsx)("a",{href:e.beanUrl,target:"_blank",rel:"noreferrer","aria-label":"Open ".concat(e.line1," in a 

1new tab"),className:"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-slate-200 text-slate-500 transition-colors hover:border-slate-300 hover:bg-slate-50 hover:text-slate-700",children:(0,s.jsxs)("svg",{viewBox:"0 0 20 20",className:"h-3.5 w-3.5",fill:"none",stroke:"currentColor",strokeWidth:"1.8",children:[(0,s.jsx)("path",{d:"M11 4h5v5",strokeLinecap:"round",strokeLinejoin:"round"}),(0,s.jsx)("path",{d:"M10 10l6-6",strokeLinecap:"round",strokeLinejoin:"round"}),(0,s.jsx)("path",{d:"M8 6H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2",strokeLinecap:"round",strokeLinejoin:"round"})]})}):null]})})]})},e.postId)})]}),C.ticks.map((e,t)=>{let a=1-(0,o.N6)(e,C.min,C.max);return(0,s.jsx)("div",{className:"pointer-events-none absolute left-2 -translate-y-1/2 text-[10.5px] leading-none text-slate-600/85 transition-[top] duration-200 ease-out md:text-[11px]",style:{top:"".concat(18+a*L,"px")},children:function(e){if(e>=1e3){let t=e/1e3;return"".concat(t%1==0?t.toFixed(0):t.toFixed(1),"kg")}return"".concat(Math.round(e),"g")}(e)},"weekly-recap-y-tick-".concat(t))}),(0,s.jsx)("div",{className:"pointer-events-none absolute bottom-2 left-2 right-2",style:{height:"".concat(38,"px")},children:(0,s.jsx)("div",{className:"absolute bottom-0",style:{left:"".concat(34,"px"),right:"".concat(12,"px"),top:0},children:E.ticks.map((e,t)=>(0,s.jsxs)("div",{className:"absolute bottom-0 flex -translate-x-1/2 flex-col items-center transition-[left] duration-200 ease-out",style:{left:"".concat(100*(0,o.N6)(e,E.min,E.max),"%")},children:[(0,s.jsx)("span",{className:"h-1.5 w-px bg-slate-500/55"}),(0,s.jsx)("span",{className:"mt-1 text-[10.5px] leading-none text-slate-600/85 md:text-[11px]",children:function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return 0===e?"".concat(t,"0"):e>=100||e>=10?"".concat(t).concat(e.toFixed(0)):e>=1?"".concat(t).concat(e.toFixed(1)):"".concat(t).concat(e.toFixed(2))}(e,I.tickPrefix)})]},"weekly-recap-x-tick-".concat(t)))})})]})}),(0,s.jsx)("div",{className:"px-4 pb-4 pt-3 md:px-5 md:pb-5 md:pt-3.5",children:z})]})}}}]);