@solumflow-app/product-configurator 0.4.0 → 0.5.0

package/README.md

@@ -17,8 +17,13 @@ npm install @solumflow-app/product-configurator @solumflow-app/crm-client \
 
 `react`, `react-dom`, `three`, `@react-three/fiber` and `@react-three/drei` are
 peer dependencies: your site has one copy of each. three.js is only fetched when
-the configurator scrolls into view; without WebGL the visitor gets a dimension
-sketch, the choices and the price.
+the configurator scrolls into view. The dimension sketch is a second view: under
+the picture in the default layout, a tab beside the 3D view in `layout="fill"`,
+and the only view where the browser has no WebGL.
+
+`@stripe/stripe-js` and `@stripe/react-stripe-js` are optional peers, needed
+only when the panel takes orders itself (`checkout`, below); they are fetched
+when a visitor reaches the payment.
 
 ## Draw it
 
@@ -89,9 +94,99 @@ object builder, on the product page and on your site. The canvas background is
 transparent; your page decides what is behind it. The reflections come from a
 room three.js builds in the browser, so nothing is fetched from a CDN.
 
+## Give it the whole screen
+
+```tsx
+<div style={{ height: '100dvh' }}>
+  <ProductConfigurator
+    product={product}
+    attribute="meubel"
+    layout="fill"
+    actions={({ payload, priced }) => (
+      <button disabled={!payload || !priced} onClick={() => payload && order(payload)}>
+        Bestellen
+      </button>
+    )}
+  />
+</div>
+```
+
+- `layout="fill"` takes the whole box you give it -- give that box a height,
+  or the picture is zero pixels tall (a development build says so in the
+  console). The choices stand to the right, from 900px wide; below that under
+  the picture, with the price and the buttons always in view.
+- `views` says which views the picture offers: `['3d', 'sketch']` draws the tabs
+  "3D" and "Tekening" over its top right corner (the default in `fill`).
+- `actions` puts your own buttons in the panel, under the price. A function is
+  given the `payload` to submit (null while the choice cannot be priced) and
+  whether everything is `priced`, which an order needs. Without `actions`,
+  `onSubmit` and `submitLabel` draw one button there.
+- `wheelZoom`: `'modifier'` (the default in `fill`) zooms only with Ctrl or ⌘
+  held, so a page that scrolls past the configurator keeps scrolling; a pinch
+  zooms either way. `'always'` is the default layout's wheel.
+
+## The room, the light and the fronts
+
+What the configurator shows is set in the CRM, not on your site:
+
+- **A room.** A structure with `scene.room` draws a wall and a floor around the
+  furniture, and the panel gets a tab "Ruimte" where the visitor picks their
+  colours. That choice is a view: it reaches no price, no request and no
+  order. `onChange` reports it as `view`, `initialView` sets it. A shape that
+  draws a room should not also draw a wall of its own.
+- **The camera stays in front of the wall**: it turns at most 75° to either side
+  and never below the floor.
+- **LED strips give light** on what is around them, in their colour
+  temperature; a button "Avondlicht" dims the room to show it. The light of a
+  strip passes through a shelf: area lights cast no shadow.
+- **Fronts open.** A block can say how it opens (`motion`: a hinge or a slide)
+  and the structure what a choice opens and looks at (`focus`). Choosing a
+  drawer for compartment 2 then slides it out and turns the camera to it; a few
+  seconds later, or at the visitor's next move in the picture, it closes. With
+  `prefers-reduced-motion`, nothing moves: it simply stands open.
+
+## Order and ask from the panel
+
+The panel can take the order or the request itself: details, delivery, the
+terms, Stripe's payment field and a confirmation, all beside the furniture. Add
+one route to your site, which keeps the key on your server:
+
+```ts
+// app/api/solumflow/configurator/route.ts
+import { createConfiguratorCheckoutHandler } from '@solumflow-app/crm-client/configurator-checkout';
+
+export const POST = createConfiguratorCheckoutHandler({
+  baseUrl: process.env.CRM_URL!,
+  apiKey: process.env.CRM_API_KEY!, // crms_, with orders:write and requests:write
+});
+```
+
+```tsx
+<ProductConfigurator
+  product={product} // as getProduct returns it, with its id
+  attribute="meubel"
+  layout="fill"
+  checkout={{
+    endpoint: '/api/solumflow/configurator',
+    termsUrl: '/algemene-voorwaarden',
+    privacyUrl: '/privacy',
+  }}
+/>
+```
+
+"Bestellen" appears while everything is priced, "Offerte aanvragen" always
+(`allowOrder` and `allowRequest` switch either off). The order lands in the CRM
+with the configuration, and with the fireplace a preset stands for as a line of
+its own -- unless your order already names it. The route refuses a post from
+another site and passes on only what the payment needs. A changed price or
+structure is shown in the step, never as a broken page. A bank that needs its
+own page sends the visitor back to `returnUrl` (this page by default).
+
 ### Content Security Policy
 
-If your site sends a CSP, allow the CRM's storage origin in two directives:
+If your site sends a CSP, allow the CRM's storage origin in two directives
+(and Stripe's, `js.stripe.com` in `script-src` and `frame-src`, when the panel
+takes payments):
 
 - `img-src`: textures and their maps are loaded as images;
 - `connect-src`: 3D models (`.glb`) are fetched.

package/dist/checkout-step-H45B2AXW.js

@@ -0,0 +1 @@
+import {a as a$2}from'./chunk-5SFWVZIX.js';import {g,e,a as a$1,b,h,d,f,i}from'./chunk-Y4YXTBBE.js';import {a}from'./chunk-6ON4U6IB.js';import'./chunk-GA7MFMMF.js';import {lazy,useId,useRef,useState,Suspense}from'react';import {jsxs,jsx}from'react/jsx-runtime';var M=lazy(()=>import('./stripe-payment-MYZ6OYY4.js'));function _(l){let{checkout:a$3,labels:o,quote:b$1}=l,d$1=useId(),g$1=useRef(g()),[m,q]=useState(null),[r,p]=useState({busy:false,error:null,order:null,paid:false}),h$1=t=>a$2(t,l.locale,l.currency),C=e(a$3,l.selection,b$1),u=useRef({place:"",count:0}),D=async t=>{let i=`${t.countryCode}|${t.postalCode}`;if(!t.countryCode||!t.postalCode||i===u.current.place)return;u.current={place:i,count:u.current.count+1};let c=u.current.count,s=await f(a$3.endpoint,{action:"shipping",productId:a$3.productId,configuration:C,address:t});c===u.current.count&&q("action"in s&&s.action==="shipping"?s:null);},K=async t=>{t.preventDefault();let i$1=new FormData(t.currentTarget),c=f=>String(i$1.get(f)??"").trim();p(f=>({...f,busy:true,error:null}));let s=await f(a$3.endpoint,{action:"order",productId:a$3.productId,configuration:C,buyer:{email:c("email"),firstName:c("firstName"),lastName:c("lastName"),phone:c("phone")||void 0},address:{line1:`${c("street")} ${c("houseNumber")}`.trim(),postalCode:c("postalCode"),city:c("city"),countryCode:c("countryCode")},shippingMethodId:c("shippingMethodId")||void 0,idempotencyKey:g$1.current});if("action"in s&&s.action==="order"){p({busy:false,error:null,order:s,paid:false});return}let N="error"in s?s.error:"";N!=="unavailable"&&(g$1.current=g()),p({busy:false,error:i(N,o),order:null,paid:false});};return r.paid&&r.order?jsxs("div",{className:"pc-checkout",role:"status","data-test":"configurator-order-placed",children:[jsx("h3",{className:"pc-checkout-title",children:o.checkoutOrderPlaced}),jsxs("p",{children:[o.checkoutOrderNumber,":"," ",jsx("strong",{children:r.order.orderNumber})]}),jsx("p",{className:"pc-price-note",children:o.checkoutPaymentReceived})]}):jsxs("div",{className:"pc-checkout","data-test":"configurator-checkout",children:[jsxs("button",{type:"button",className:"pc-checkout-back",onClick:l.onBack,children:["\u2190 ",o.checkoutBack]}),jsxs("section",{className:"pc-field",children:[jsx("h3",{className:"pc-checkout-title",children:o.checkoutSummary}),jsx("ul",{className:"pc-checkout-lines",children:b$1.lines.map(t=>jsxs("li",{children:[jsx("span",{children:t.label}),jsx("span",{children:t.amountCents===null?"":h$1(t.amountCents)})]},t.key))})]}),r.order?jsxs("section",{className:"pc-field",children:[jsxs("p",{className:"pc-checkout-total",children:[jsx("span",{children:o.checkoutTotal}),jsx("strong",{children:h$1(r.order.totalCents)})]}),r.order.publishableKey?jsx(a,{fallback:jsx("p",{className:"pc-checkout-error",role:"alert",children:o.checkoutPaymentsUnavailable}),children:jsx(Suspense,{fallback:jsx("p",{className:"pc-scene-note",children:"\u2026"}),children:jsx(M,{publishableKey:r.order.publishableKey,stripeAccount:r.order.stripeAccount,clientSecret:r.order.clientSecret,returnUrl:a$3.returnUrl??(typeof window>"u"?"":window.location.href),payLabel:o.checkoutPay,onPaid:()=>p(t=>({...t,paid:true}))})})}):jsx("p",{className:"pc-checkout-error",role:"alert",children:o.checkoutPaymentsUnavailable})]}):jsxs("form",{className:"pc-checkout-form",onSubmit:K,children:[jsx("h3",{className:"pc-checkout-title",children:o.checkoutDetails}),jsx(a$1,{id:d$1,labels:o,nameRequired:true}),jsx(b,{id:d$1,labels:o,countries:a$3.countries??h,onPlaceChange:D}),jsxs("fieldset",{className:"pc-field",children:[jsx("legend",{className:"pc-label",children:o.checkoutDelivery}),m===null?jsx("p",{className:"pc-price-note",children:o.checkoutDeliveryAfterAddress}):m.requiresShipping?jsx("div",{className:"pc-choices",children:m.methods.map((t,i)=>jsxs("label",{className:"pc-choice",children:[jsx("input",{type:"radio",name:"shippingMethodId",value:t.id,defaultChecked:i===0,required:true}),jsxs("span",{children:[t.name,jsx("small",{children:t.amountCents>0?h$1(t.amountCents):""})]})]},t.id))}):null]}),jsx(d,{id:d$1,labels:o,termsUrl:a$3.termsUrl,privacyUrl:a$3.privacyUrl}),r.error?jsx("p",{className:"pc-checkout-error",role:"alert",children:r.error}):null,jsx("button",{type:"submit",className:"pc-checkout-primary",disabled:r.busy,"data-test":"configurator-to-payment",children:o.checkoutToPayment})]})]})}export{_ as CheckoutStep};

package/dist/chunk-5SFWVZIX.js

@@ -0,0 +1 @@
+function m(r,n,i){let t=r%100===0;return new Intl.NumberFormat(n,{style:"currency",currency:i,minimumFractionDigits:t?0:2,maximumFractionDigits:t?0:2}).format(r/100)}export{m as a};

package/dist/chunk-6ON4U6IB.js

@@ -0,0 +1 @@
+import {Component}from'react';var e=class extends Component{constructor(){super(...arguments);this.state={failed:false};}static getDerivedStateFromError(){return {failed:true}}render(){return this.state.failed?this.props.fallback:this.props.children}};export{e as a};

package/dist/chunk-GA7MFMMF.js

@@ -0,0 +1 @@
+var d=Object.defineProperty;var e=(c,a)=>{for(var b in a)d(c,b,{get:a[b],enumerable:true});};export{e as a};