https://www.drinktrade.com/cdn/shop/t/2127/assets/step-template-ge…?v=103188970783978657761790175399

1import{useState,useEffect,useRef,useMemo}from"preact/hooks";import{dispatchStepEvent}from"onboarding-dispatch-event";import{html}from"htm/preact";import{useStorage}from"onboarding-use-storage";import{storeOnboardingData}from"onboarding-storage-utils";import{ONBOARDING_STORAGE_KEYS,ONBOARDING_EVENTS}from"onboarding-step-constants";export function App({sectionSettings:e,blockSettings:t,stepId:n,sectionId:r,namespace:o="onboarding"}){const a=useMemo((()=>{const e={"plan-good":[],"plan-better":[]};return t?.forEach((t=>{"cta"===t._type&&t.recommendations?.length>0&&t.recommendations.forEach((n=>{"tier"===n.field&&e[n.value]&&e[n.value].push(t._id)}))})),e}),[t]),[i]=useStorage(o,ONBOARDING_STORAGE_KEYS.STEP_DATA),s=useRef(null),[l,d]=useState(!1),[u,c]=useState(null),[f]=useStorage(o,ONBOARDING_STORAGE_KEYS.CURRENT_STEP_STATE),p=useMemo((()=>f?.currentStepId===n),[f,n]),m=useMemo((()=>i&&Array.isArray(i)?{roastLevel:i.find((e=>"roast_level"===e.field))?.value||null,decaf:i.find((e=>"decaf"===e.field))?.value||null,brewMethod:i.find((e=>"brew_method"===e.field))?.value||null,additions:i.find((e=>"additions"===e.field))?.value||null,bagSize:i.find((e=>"bag_size"===e.field))?.value||null,grindType:i.find((e=>"grind_type"===e.field))?.value||null,flavor:i.find((e=>"flavor"===e.field))?.value||null,quizFunnel:i.find((e=>"quiz_funnel"===e.field))?.value||null,plan:i.find((e=>"plan"===e.field))?.value||null}:{}),[i]),E=e=>{storeOnboardingData(o,ONBOARDING_STORAGE_KEYS.RECOMMENDATIONS_STATE,e)};if(useEffect((()=>{const i=JSON.stringify(m);if(s.current===i)return;if(!(m.roastLevel&&m.brewMethod&&m.flavor&&m.decaf))return;s.current=i,d(!0),c(null),E("requested");const l=m.roastLevel,u=m.brewMethod,f=m.flavor,_="TRUE"===m.decaf||!1,g=m.grindType,v=m.bagSize||"Standard Bag",S={roast:l,decaf:_,brew_method:u,bag_size:v,flavor:f,additions:m.additions||"additions-black",recommend_products:!0,use_monthly_framing:!0,query:{product:{title:!0,tasteGroup:!0,description:!0,country:!0,process:!0,primaryFlavor:!0,secondaryFlavor:!0,tertiaryFlavor:!0,roastLevelDescription:!0,brand:{name:!0,logo:!0,city:!0,images:!0,description:!0,why_we_love_them:!0},ratingsData:!0},taste_collection:{flavor_notes:!0}}};g&&(S.grind_type=g);const O="gift"===m.quizFunnel,y="Big Bag"===v,h="pay-per-shipment"===m.plan;O&&y&&h&&(S.tier="classics",S.use_monthly_framing_v3_fallback=!0),fetch((()=>{const e=t?.find((e=>"text"===e._type&&"endpoint"===e.key));if(!e?.value)throw new Error("Endpoint configuration is missing or empty");return e.value})(),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(S)}).then((e=>e.json())).then((t=>{d(!1),E("received");const i=p,s=new CustomEvent(ONBOARDING_EVENTS.API_RESPONSE_RECEIVED,{detail:{storageKey:ONBOARDING_STORAGE_KEYS.RECOMMENDATIONS_RESULT,data:t,navigateToStep:i&&e.navigate_to_step||null,namespace:o}});document.dispatchEvent(s);const l="premium"===t.tier?a["plan-better"]:a["plan-good"];dispatchStepEvent({eventType:ONBOARDING_EVENTS.CTA_SELECTED,selectedBlockIds:l,stepId:n,stepDataKey:ONBOARDING_STORAGE_KEYS.STEP_DATA,sectionId:r})})).catch((e=>{c(e),d(!1),E("errored")}))}),[m]),l&&(()=>{const e=t?.find((e=>"boolean"===e._type&&"loadingAnimation"===e.key));return!0===e?.value})())return html`
2      <div class="flex justify-center items-center py-20">
3        <div class="flex flex-col items-center">
4          <div
5            class="animate-spin rounded-full h-8 w-8 border-2 border-gray-300 border-t-black mb-3"
6          ></div>
7          <p class="text-gray-600 text-sm">Loading recommendations...</p>
8        </div>
9      </div>
10    `;if(u)throw u instanceof Error?u:new Error(String(u));return html``}