d6a40592ff
The two newly-shipped components (Footer with cream/brand/paper tones, CheckoutStepper with active/completed/upcoming states) are now documented in the design system at /design/footer and /design/checkout-stepper. Sidebar entries added under "Sections" and "Components" respectively, with DE + EN copy. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 line
8.6 KiB
JavaScript
1 line
8.6 KiB
JavaScript
import{B as e,C as t,D as n,G as r,S as i,T as a,b as ee,c as o,ft as s,j as c,l,m as u,o as d,p as f,r as p,s as m,u as h,ut as g}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a as _,o as v,t as y}from"./vue-router-Cyqru1db.js";import{t as b}from"./Logo-xADhl1RY.js";import{t as x}from"./i18n-D7Ao3GC7.js";import{l as S,p as C,s as w,u as T}from"./api-DlB23x7f.js";import{t as E}from"./Button-D1Rp2Xe1.js";import{t as D}from"./CheckoutStepper-Dfp8a-R5.js";import{t as O}from"./ExpressCheckoutMount-B8ZSjQ8W.js";import{t as k}from"./checkout-BywUzOLD.js";var A={class:`rounded-md border border-line bg-paper text-ink flex flex-col`,"aria-label":`Order summary`},j={key:0,class:`px-6 pt-6 pb-3 border-b border-line`},M={class:`font-display text-xl font-normal text-brand leading-none`},N={key:1,class:`flex flex-col divide-y divide-line`},P={class:`relative shrink-0 w-14 h-14 rounded-sm bg-cream overflow-hidden flex items-center justify-center`},F=[`src`,`alt`],I={key:1,class:`absolute -top-1 -right-1 min-w-[20px] h-[20px] px-1 rounded-full bg-brand text-accent text-[11px] font-bold flex items-center justify-center`,"aria-hidden":`true`},L={class:`flex-1 min-w-0`},R={class:`font-display text-[15px] leading-tight truncate text-ink`},z={key:0,class:`text-[12px] text-muted truncate`},B={class:`shrink-0 text-[14px] font-semibold text-ink tabular-nums`},V={class:`px-6 py-5 flex flex-col gap-2 border-t border-line`},H={class:`flex items-baseline justify-between text-[14px]`},U={class:`text-ink tabular-nums`},W={class:`flex items-baseline justify-between text-[14px]`},G={class:`text-ink tabular-nums`},K={key:0,class:`flex items-baseline justify-between text-[14px]`},q={class:`text-ink tabular-nums`},J={class:`mt-2 pt-3 border-t border-line flex items-baseline justify-between`},Y={class:`font-display text-2xl text-brand tabular-nums`},X={key:2,class:`px-6 pb-6`},Z={__name:`CheckoutSummary`,props:{items:{type:Array,required:!0,validator:e=>e.every(e=>e&&typeof e.productId==`string`&&Number.isInteger(e.quantity))},subtotal:{type:Number,required:!0},shipping:{type:Number,default:0},tax:{type:Number,default:0},total:{type:Number,required:!0},currency:{type:String,default:`€`},ctaLabel:{type:String,default:``},ctaLoading:{type:Boolean,default:!1},ctaDisabled:{type:Boolean,default:!1},heading:{type:String,default:``}},emits:[`submit`],setup(e){function n(e,t){return typeof e!=`number`||!Number.isFinite(e)?``:`${t} ${e.toFixed(2).replace(`.`,`,`)}`}return(r,i)=>(t(),h(`aside`,A,[e.heading?(t(),h(`header`,j,[m(`h2`,M,s(e.heading),1)])):l(``,!0),e.items.length?(t(),h(`ul`,N,[(t(!0),h(p,null,a(e.items,r=>(t(),h(`li`,{key:r.productId,class:`flex items-center gap-4 px-6 py-4`},[m(`div`,P,[r.product?.image?(t(),h(`img`,{key:0,src:r.product.image,alt:r.product?.title||``,loading:`lazy`,decoding:`async`,class:`w-full h-full object-contain p-2`},null,8,F)):l(``,!0),r.quantity>1?(t(),h(`span`,I,s(r.quantity),1)):l(``,!0)]),m(`div`,L,[m(`p`,R,s(r.product?.title),1),r.product?.size?(t(),h(`p`,z,s(r.product.size),1)):l(``,!0)]),m(`span`,B,s(n(r.lineTotal??r.unitPrice*r.quantity,e.currency)),1)]))),128))])):l(``,!0),m(`dl`,V,[m(`div`,H,[i[1]||=m(`dt`,{class:`text-muted`},`Subtotal`,-1),m(`dd`,U,s(n(e.subtotal,e.currency)),1)]),m(`div`,W,[i[2]||=m(`dt`,{class:`text-muted`},`Versand`,-1),m(`dd`,G,s(n(e.shipping,e.currency)),1)]),e.tax>0?(t(),h(`div`,K,[i[3]||=m(`dt`,{class:`text-muted`},`MwSt. (19 %, inkl.)`,-1),m(`dd`,q,s(n(e.tax,e.currency)),1)])):l(``,!0),m(`div`,J,[i[4]||=m(`dt`,{class:`eyebrow`},`Gesamt`,-1),m(`dd`,Y,s(n(e.total,e.currency)),1)])]),e.ctaLabel?(t(),h(`div`,X,[u(E,{variant:`primary`,size:`lg`,block:``,loading:e.ctaLoading,disabled:e.ctaDisabled,onClick:i[0]||=e=>r.$emit(`submit`)},{default:c(()=>[f(s(e.ctaLabel),1)]),_:1},8,[`loading`,`disabled`])])):l(``,!0)]))}},te={class:`min-h-svh flex flex-col bg-cream`},Q={class:`sticky top-0 z-30 bg-cream border-b border-line shrink-0`},ne={class:`mx-auto w-full max-w-7xl px-4 sm:px-8 md:px-12 lg:px-16 py-3 grid grid-cols-[1fr_auto_1fr] items-center gap-3 sm:gap-6`},re={class:`justify-self-center min-w-0`},ie={class:`text-ink flex-1 lg:flex lg:flex-col lg:justify-center`},ae={class:`mx-auto w-full max-w-7xl px-6 sm:px-8 md:px-12 lg:px-16 pt-5 pb-28 sm:pt-7 sm:pb-32 md:pt-8 md:pb-32 lg:pt-10 lg:pb-32`},oe={key:0,class:`flex flex-col gap-2 mb-8 md:mb-10`},se={class:`font-display font-normal leading-[1.05] tracking-tight text-ink text-headline-md`},ce={class:`italic font-light text-brand`},le={key:1,class:`flex flex-col gap-2 mb-8 md:mb-10`},ue={class:`font-display text-2xl font-normal text-ink leading-none`},de={key:0,class:`text-[14px] text-muted max-w-2xl`},fe={key:2,class:`flex justify-center`},pe={class:`w-full max-w-2xl`},me=[`aria-label`],he={class:`flex flex-col gap-4 rounded-md border border-line bg-paper p-6 md:p-8`},ge={class:`font-display text-xl font-normal text-brand leading-none`},_e={key:0,class:`text-sm text-danger`,role:`alert`,"aria-live":`polite`},ve={class:`min-w-0`},ye=4.9,$=.19,be={__name:`CheckoutPage`,setup(a){let{t:p}=x(),E=C(),A=k(),j=_(),M=v(),N=e(null),P=e(!1),F=e(``),I=e(null),L=d(()=>typeof window>`u`?`/checkout/processing`:`${window.location.origin}/checkout/processing?order=${N.value?.orderId||``}`);async function R({wallet:e}){if(!E.items.length){F.value=p(`checkout.error.empty`);return}F.value=``,P.value=!0;try{let t=await w({wallet:e});N.value=t,await ee();let n=await I.value?.confirm();if(n?.error){F.value=n.error.message||p(`checkout.error.payment`);return}if(n?.paymentIntent?.status===`succeeded`){let e=t.orderId;await S(),A.reset(),M.push({path:`/checkout/success`,query:{order:e}})}}catch(e){F.value=e?.message||p(`checkout.error.generic`)}finally{P.value=!1}}function z(e){F.value=e?.message||p(`checkout.error.payment`),P.value=!1}let B=d(()=>E.subtotal),V=d(()=>E.items.length?ye:0),H=d(()=>+(B.value+V.value).toFixed(2)),U=d(()=>E.items.length?+((B.value+V.value)*$/(1+$)).toFixed(2):0),W=d(()=>[{key:`cart`,label:p(`checkout.step.cart`),to:`/checkout/cart`,completed:E.items.length>0},{key:`account`,label:p(`checkout.step.account`),to:`/checkout/account`,completed:A.accountComplete},{key:`shipping`,label:p(`checkout.step.shipping`),to:`/checkout/shipping`,completed:A.shippingComplete},{key:`payment`,label:p(`checkout.step.payment`),to:`/checkout/payment`,completed:!1}]),G=d(()=>{let e=j.path.split(`/`)[2]||`cart`;return[`cart`,`account`,`shipping`,`payment`].includes(e)?e:`cart`}),K=d(()=>G.value===`cart`&&!E.isEmpty),q=d(()=>{switch(G.value){case`cart`:return{title:p(`checkout.cart.title`),sub:``};case`account`:return{title:p(`checkout.account.heading`),sub:p(`checkout.account.sub`)};case`shipping`:return{title:p(`checkout.section.shipping`),sub:p(`checkout.shipping.sub`)};case`payment`:return{title:p(`checkout.section.payment`),sub:p(`checkout.payment.sub`)};default:return{title:``,sub:``}}});return i(()=>{T()}),(e,i)=>{let a=n(`router-view`);return t(),h(`div`,te,[m(`header`,Q,[m(`div`,ne,[u(r(y),{to:`/`,class:`shrink-0 justify-self-start`,"aria-label":r(p)(`checkout.home`)},{default:c(()=>[u(b,{class:`w-9 md:w-12 h-auto text-brand`})]),_:1},8,[`aria-label`]),m(`div`,re,[u(D,{steps:W.value,"active-key":G.value,"aria-label":r(p)(`checkout.stepper.label`)},null,8,[`steps`,`active-key`,`aria-label`])]),u(r(y),{to:`/shop`,class:`shrink-0 justify-self-end hidden sm:inline-flex items-center text-[13px] font-semibold text-brand hover:underline whitespace-nowrap`},{default:c(()=>[f(s(r(p)(`checkout.backToShopping`)),1)]),_:1})])]),m(`main`,ie,[m(`div`,ae,[G.value===`cart`?(t(),h(`header`,oe,[m(`h1`,se,[f(s(r(p)(`checkout.headline`))+` `,1),m(`em`,ce,s(r(p)(`checkout.headline.em`)),1)])])):q.value.title?(t(),h(`header`,le,[m(`h2`,ue,s(q.value.title),1),q.value.sub?(t(),h(`p`,de,s(q.value.sub),1)):l(``,!0)])):l(``,!0),G.value===`cart`&&r(E).isEmpty?(t(),h(`div`,fe,[m(`div`,pe,[u(a)])])):(t(),h(`div`,{key:3,class:g([`grid gap-8 md:gap-10 lg:gap-12 lg:items-start`,K.value?`lg:grid-cols-[0.9fr_1.1fr]`:`lg:grid-cols-[1.1fr_0.9fr]`])},[K.value?(t(),h(`aside`,{key:0,class:`flex flex-col gap-4 lg:sticky lg:top-[calc(var(--checkout-bar-h,72px)+1rem)]`,"aria-label":r(p)(`checkout.section.express`)},[m(`div`,he,[m(`h2`,ge,s(r(p)(`checkout.section.express`)),1),u(O,{ref_key:`expressMountRef`,ref:I,intent:N.value,"return-url":L.value,busy:P.value,onPay:R,onError:z},null,8,[`intent`,`return-url`,`busy`])]),F.value?(t(),h(`p`,_e,s(F.value),1)):l(``,!0)],8,me)):l(``,!0),m(`div`,ve,[u(a)]),G.value===`cart`?l(``,!0):(t(),o(Z,{key:1,items:r(E).items,subtotal:B.value,shipping:V.value,tax:U.value,total:H.value,heading:r(p)(`checkout.summary.heading`),class:`lg:sticky lg:top-[calc(var(--checkout-bar-h,72px)+1rem)]`},null,8,[`items`,`subtotal`,`shipping`,`tax`,`total`,`heading`]))],2))])])])}}};export{be as default}; |