diff --git a/scripts/__dropins__/storefront-order/containers/OrderSearch.js b/scripts/__dropins__/storefront-order/containers/OrderSearch.js index 0aa0105ed6..8d3bf6df48 100644 --- a/scripts/__dropins__/storefront-order/containers/OrderSearch.js +++ b/scripts/__dropins__/storefront-order/containers/OrderSearch.js @@ -1 +1 @@ -import{jsxs as _,jsx as o}from"@dropins/tools/preact-jsx-runtime.js";import{classes as D}from"@dropins/tools/lib.js";import{Card as U,InLineAlert as C,Icon as x,Button as V}from"@dropins/tools/components.js";import{F as L}from"../chunks/CustomerDetailsContent.js";import{useState as N,useCallback as R,useEffect as I,useMemo as k}from"@dropins/tools/preact-hooks.js";import*as O from"@dropins/tools/preact-compat.js";import{Text as y,useText as G}from"@dropins/tools/i18n.js";import{events as w}from"@dropins/tools/event-bus.js";import{c as A,g as H}from"../chunks/getCustomer.js";import"../chunks/fetch-graphql.js";import"@dropins/tools/fetch-graphql.js";const P=e=>O.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},O.createElement("path",{vectorEffect:"non-scaling-stroke",fillRule:"evenodd",clipRule:"evenodd",d:"M1 20.8953L12.1922 1.5L23.395 20.8953H1ZM13.0278 13.9638L13.25 10.0377V9H11.25V10.0377L11.4722 13.9638H13.0278ZM11.2994 16V17.7509H13.2253V16H11.2994Z",fill:"currentColor"})),X=({onSubmit:e,loading:t,inLineAlert:n,fieldsConfig:a})=>_(U,{variant:"secondary",className:"dropin-order-search-form",children:[o("h2",{className:"dropin-order-search-form__title",children:o(y,{id:"Order.OrderSearchForm.title"})}),o("p",{children:o(y,{id:"Order.OrderSearchForm.description"})}),n.text?o(C,{"data-testid":"orderAlert",className:"dropin-order-search-form__alert",type:n.type,variant:"secondary",heading:n.text,icon:o(x,{source:P})}):null,o(L,{className:"dropin-order-search-form__wrapper",name:"orderSearchForm",loading:t,fieldsConfig:a,onSubmit:e,children:o("div",{className:"dropin-order-search-form__button-container",children:o(V,{className:"dropin-order-search-form__button",size:"medium",variant:"primary",type:"submit",disabled:t,children:o(y,{id:"Order.OrderSearchForm.button"})},"logIn")})})]});var T=(e=>(e.BOOLEAN="BOOLEAN",e.DATE="DATE",e.DATETIME="DATETIME",e.DROPDOWN="DROPDOWN",e.FILE="FILE",e.GALLERY="GALLERY",e.HIDDEN="HIDDEN",e.IMAGE="IMAGE",e.MEDIA_IMAGE="MEDIA_IMAGE",e.MULTILINE="MULTILINE",e.MULTISELECT="MULTISELECT",e.PRICE="PRICE",e.SELECT="SELECT",e.TEXT="TEXT",e.TEXTAREA="TEXTAREA",e.UNDEFINED="UNDEFINED",e.VISUAL="VISUAL",e.WEIGHT="WEIGHT",e.EMPTY="",e))(T||{});const B=e=>{if(!e)return null;const t=new FormData(e);if(e.querySelectorAll('input[type="checkbox"]').forEach(a=>{t.has(a.name)||t.set(a.name,"false"),a.checked&&t.set(a.name,"true")}),t&&typeof t.entries=="function"){const a=t.entries();if(a&&typeof a[Symbol.iterator]=="function")return JSON.parse(JSON.stringify(Object.fromEntries(a)))||{}}return{}},p=(e,t)=>{if(typeof e!="function")return;const n=e();if(!t||Object.keys(t).length===0){window.location.href=n;return}const a=new URLSearchParams;Object.entries(t).forEach(([u,f])=>{a.append(u,String(f))});const s=n.includes("?")?"&":"?";window.location.href=`${n}${s}${a.toString()}`},M=e=>{try{return new URL(window.location.href).searchParams.get(e)}catch{return null}},j=({onError:e,isAuth:t,renderSignIn:n,routeCustomerOrderDetails:a,routeOrderDetails:s})=>{const[u,f]=N({text:"",type:"success"}),[E,h]=N(!1),m=G({invalidSearch:"Order.Errors.invalidSearch",email:"Order.OrderSearchForm.email",postcode:"Order.OrderSearchForm.postcode",number:"Order.OrderSearchForm.orderNumber"}),b=R(async r=>{const c=M("orderRef"),i=c&&c.length>20;if(!r&&!c||!(r!=null&&r.number)&&!(r!=null&&r.token)&&!c)return null;if(t&&r&&r.email){const d=await A();(d==null?void 0:d.email)===r.email?p(a,{orderRef:r==null?void 0:r.number}):i||p(s,{orderRef:r.token})}else i||p(s,{orderRef:r==null?void 0:r.token})},[t,a,s]);I(()=>{const r=w.on("order/data",c=>{b(c)},{eager:!0});return()=>{r==null||r.off()}},[b]),I(()=>{const r=M("orderRef"),c=r&&r.length>20?r:null;r&&(c?p(s,{orderRef:r}):t?p(a,{orderRef:r}):n({render:!0,formValues:{number:r}}))},[t,a,s,n]);const v=k(()=>[{entityType:"CUSTOMER_ADDRESS",is_unique:!1,label:m.email,options:[],defaultValue:"",fieldType:T.TEXT,className:"",required:!0,orderNumber:1,name:"email",id:"email",code:"email"},{entityType:"CUSTOMER_ADDRESS",is_unique:!1,label:m.postcode,options:[],defaultValue:"",fieldType:T.TEXT,className:"",required:!0,orderNumber:2,name:"postcode",id:"postcode",code:"postcode"},{entityType:"CUSTOMER_ADDRESS",is_unique:!1,label:m.number,options:[],defaultValue:"",fieldType:T.TEXT,className:"",required:!0,orderNumber:3,name:"number",id:"number",code:"number"}],[m]);return{onSubmit:R(async(r,c)=>{if(!c)return null;h(!0);const i=B(r.target);await H(i).then(l=>{l||f({text:m.invalidSearch,type:"warning"}),w.emit("order/data",l)}).catch(async l=>{var g;let d=!0;e==null||e({error:l.message});const S=t?await A():{email:""};(S==null?void 0:S.email)===(i==null?void 0:i.email)?p(a,i.number):d=n==null?void 0:n({render:(g=l==null?void 0:l.message)==null?void 0:g.includes("Please login to view the order."),formValues:i}),d&&f({text:l.message,type:"warning"})}).finally(()=>{h(!1)})},[t,e,n,a,m.invalidSearch]),inLineAlert:u,loading:E,normalizeFieldsConfig:v}},te=({className:e,isAuth:t,renderSignIn:n,routeCustomerOrderDetails:a,routeOrderDetails:s,onError:u})=>{const{onSubmit:f,loading:E,inLineAlert:h,normalizeFieldsConfig:m}=j({onError:u,isAuth:t,renderSignIn:n,routeCustomerOrderDetails:a,routeOrderDetails:s});return o("div",{className:D(["dropin-order-search",e]),children:o(X,{onSubmit:f,loading:E,inLineAlert:h,fieldsConfig:m})})};export{te as OrderSearch,te as default}; +import{jsxs as v,jsx as n}from"@dropins/tools/preact-jsx-runtime.js";import{classes as _}from"@dropins/tools/lib.js";import{Card as U,InLineAlert as C,Icon as x,Button as V}from"@dropins/tools/components.js";import{F as L}from"../chunks/CustomerDetailsContent.js";import{useState as R,useCallback as D,useEffect as O,useMemo as k}from"@dropins/tools/preact-hooks.js";import*as g from"@dropins/tools/preact-compat.js";import{Text as S,useText as H}from"@dropins/tools/i18n.js";import{events as w}from"@dropins/tools/event-bus.js";import{c as A,g as P}from"../chunks/getCustomer.js";import"../chunks/fetch-graphql.js";import"@dropins/tools/fetch-graphql.js";const X=e=>g.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},g.createElement("path",{vectorEffect:"non-scaling-stroke",fillRule:"evenodd",clipRule:"evenodd",d:"M1 20.8953L12.1922 1.5L23.395 20.8953H1ZM13.0278 13.9638L13.25 10.0377V9H11.25V10.0377L11.4722 13.9638H13.0278ZM11.2994 16V17.7509H13.2253V16H11.2994Z",fill:"currentColor"})),B=({onSubmit:e,loading:t,inLineAlert:o,fieldsConfig:r})=>v(U,{variant:"secondary",className:"dropin-order-search-form",children:[n("h2",{className:"dropin-order-search-form__title",children:n(S,{id:"Order.OrderSearchForm.title"})}),n("p",{children:n(S,{id:"Order.OrderSearchForm.description"})}),o.text?n(C,{"data-testid":"orderAlert",className:"dropin-order-search-form__alert",type:o.type,variant:"secondary",heading:o.text,icon:n(x,{source:X})}):null,n(L,{className:"dropin-order-search-form__wrapper",name:"orderSearchForm",loading:t,fieldsConfig:r,onSubmit:e,children:n("div",{className:"dropin-order-search-form__button-container",children:n(V,{className:"dropin-order-search-form__button",size:"medium",variant:"primary",type:"submit",disabled:t,children:n(S,{id:"Order.OrderSearchForm.button"})},"logIn")})})]});var T=(e=>(e.BOOLEAN="BOOLEAN",e.DATE="DATE",e.DATETIME="DATETIME",e.DROPDOWN="DROPDOWN",e.FILE="FILE",e.GALLERY="GALLERY",e.HIDDEN="HIDDEN",e.IMAGE="IMAGE",e.MEDIA_IMAGE="MEDIA_IMAGE",e.MULTILINE="MULTILINE",e.MULTISELECT="MULTISELECT",e.PRICE="PRICE",e.SELECT="SELECT",e.TEXT="TEXT",e.TEXTAREA="TEXTAREA",e.UNDEFINED="UNDEFINED",e.VISUAL="VISUAL",e.WEIGHT="WEIGHT",e.EMPTY="",e))(T||{});const j=e=>{if(!e)return null;const t=new FormData(e);if(e.querySelectorAll('input[type="checkbox"]').forEach(r=>{t.has(r.name)||t.set(r.name,"false"),r.checked&&t.set(r.name,"true")}),t&&typeof t.entries=="function"){const r=t.entries();if(r&&typeof r[Symbol.iterator]=="function")return JSON.parse(JSON.stringify(Object.fromEntries(r)))||{}}return{}},p=(e,t)=>{if(typeof e!="function")return;const o=e();if(!t||Object.keys(t).length===0){window.location.href=o;return}const r=new URLSearchParams;Object.entries(t).forEach(([u,f])=>{r.append(u,String(f))});const c=o.includes("?")?"&":"?";window.location.href=`${o}${c}${r.toString()}`},I=e=>{try{return new URL(window.location.href).searchParams.get(e)}catch{return null}},q=({onError:e,isAuth:t,renderSignIn:o,routeCustomerOrder:r,routeGuestOrder:c})=>{const[u,f]=R({text:"",type:"success"}),[E,h]=R(!1),m=H({invalidSearch:"Order.Errors.invalidSearch",email:"Order.OrderSearchForm.email",postcode:"Order.OrderSearchForm.postcode",number:"Order.OrderSearchForm.orderNumber"}),b=D(async a=>{const s=I("orderRef"),i=s&&s.length>20;if(!a&&!s||!(a!=null&&a.number)&&!(a!=null&&a.token)&&!s)return null;if(t&&a&&a.email){const d=await A();(d==null?void 0:d.email)===a.email?p(r,{orderRef:a==null?void 0:a.number}):i||p(c,{orderRef:a.token})}else i||p(c,{orderRef:a==null?void 0:a.token})},[t,r,c]);O(()=>{const a=w.on("order/data",s=>{b(s)},{eager:!0});return()=>{a==null||a.off()}},[b]),O(()=>{const a=I("orderRef"),s=a&&a.length>20?a:null;a&&(s?p(c,{orderRef:a}):t?p(r,{orderRef:a}):o==null||o({render:!0,formValues:{number:a}}))},[t,r,c,o]);const M=k(()=>[{entityType:"CUSTOMER_ADDRESS",is_unique:!1,label:m.email,options:[],defaultValue:"",fieldType:T.TEXT,className:"",required:!0,orderNumber:1,name:"email",id:"email",code:"email"},{entityType:"CUSTOMER_ADDRESS",is_unique:!1,label:m.postcode,options:[],defaultValue:"",fieldType:T.TEXT,className:"",required:!0,orderNumber:2,name:"postcode",id:"postcode",code:"postcode"},{entityType:"CUSTOMER_ADDRESS",is_unique:!1,label:m.number,options:[],defaultValue:"",fieldType:T.TEXT,className:"",required:!0,orderNumber:3,name:"number",id:"number",code:"number"}],[m]);return{onSubmit:D(async(a,s)=>{if(!s)return null;h(!0);const i=j(a.target);await P(i).then(l=>{l||f({text:m.invalidSearch,type:"warning"}),w.emit("order/data",l)}).catch(async l=>{var N;let d=!0;e==null||e({error:l.message});const y=t?await A():{email:""};(y==null?void 0:y.email)===(i==null?void 0:i.email)?p(r,i.number):d=o==null?void 0:o({render:(N=l==null?void 0:l.message)==null?void 0:N.includes("Please login to view the order."),formValues:i}),d&&f({text:l.message,type:"warning"})}).finally(()=>{h(!1)})},[t,e,o,r,m.invalidSearch]),inLineAlert:u,loading:E,normalizeFieldsConfig:M}},te=({className:e,isAuth:t,renderSignIn:o,routeCustomerOrder:r,routeGuestOrder:c,onError:u})=>{const{onSubmit:f,loading:E,inLineAlert:h,normalizeFieldsConfig:m}=q({onError:u,isAuth:t,renderSignIn:o,routeCustomerOrder:r,routeGuestOrder:c});return n("div",{className:_(["dropin-order-search",e]),children:n(B,{onSubmit:f,loading:E,inLineAlert:h,fieldsConfig:m})})};export{te as OrderSearch,te as default}; diff --git a/scripts/__dropins__/storefront-order/hooks/containers/useOrderSearch.d.ts b/scripts/__dropins__/storefront-order/hooks/containers/useOrderSearch.d.ts index c28b1c69d0..e1e6f8b152 100644 --- a/scripts/__dropins__/storefront-order/hooks/containers/useOrderSearch.d.ts +++ b/scripts/__dropins__/storefront-order/hooks/containers/useOrderSearch.d.ts @@ -1,6 +1,6 @@ import { FieldEnumList, inLineAlertProps, useOrderSearchProps } from '../../types'; -export declare const useOrderSearch: ({ onError, isAuth, renderSignIn, routeCustomerOrderDetails, routeOrderDetails, }: useOrderSearchProps) => { +export declare const useOrderSearch: ({ onError, isAuth, renderSignIn, routeCustomerOrder, routeGuestOrder, }: useOrderSearchProps) => { onSubmit: (event: Event, valid: boolean) => Promise; inLineAlert: inLineAlertProps; loading: boolean; diff --git a/scripts/__dropins__/storefront-order/types/orderSearch.types.d.ts b/scripts/__dropins__/storefront-order/types/orderSearch.types.d.ts index ca6070d024..891162fd2c 100644 --- a/scripts/__dropins__/storefront-order/types/orderSearch.types.d.ts +++ b/scripts/__dropins__/storefront-order/types/orderSearch.types.d.ts @@ -7,7 +7,7 @@ export interface inLineAlertProps { text: string; type: 'success' | 'warning' | 'error'; } -type RouteSignInProps = { +export type RouteSignInProps = { render: boolean; formValues?: { number: number | string; @@ -16,18 +16,13 @@ type RouteSignInProps = { }; export interface OrderSearchProps { className?: string; - onError?: (errorInformation: errorInformationProps) => boolean | Promise | undefined; + onError?: (errorInformation: errorInformationProps) => void; isAuth: boolean; - renderSignIn: ({ render, formValues }: RouteSignInProps) => boolean; - routeCustomerOrderDetails: () => string; - routeOrderDetails: () => string; + renderSignIn?: ({ render, formValues, }: RouteSignInProps) => boolean | undefined; + routeCustomerOrder?: () => string; + routeGuestOrder?: () => string; } -export interface useOrderSearchProps { - onError?: (errorInformation: errorInformationProps) => boolean | Promise | undefined; - isAuth?: boolean; - renderSignIn: ({ render, formValues }: RouteSignInProps) => boolean; - routeCustomerOrderDetails?: () => string; - routeOrderDetails?: () => string; +export interface useOrderSearchProps extends Omit { } export interface OrderSearchFormProps { onSubmit?: (event: SubmitEvent, isValid: boolean) => Promise;