@dropins/storefront-account 0.1.0-alpha11 → 0.1.0-alpha12

package/containers/OrdersList.js

@@ -1 +1 @@
-import{jsx as e,jsxs as h,Fragment as w}from"@dropins/tools/preact-jsx-runtime.js";import{classes as b,Slot as T}from"@dropins/tools/lib.js";import{S as P,c as B,E as F,C as _}from"../chunks/AddressFormWrapper.js";import"@dropins/tools/preact-compat.js";import{Card as H,Icon as k,ContentGrid as K,Image as V,Header as q,Picker as J,Pagination as W}from"@dropins/tools/components.js";import{useText as x}from"@dropins/tools/i18n.js";import{useState as v,useEffect as M,useMemo as j,useCallback as z}from"@dropins/tools/preact-hooks.js";import"@dropins/tools/event-bus.js";import{g as G}from"../chunks/getOrderHistoryList.js";import"../chunks/removeCustomerAddress.js";import"@dropins/tools/fetch-graphql.js";import"@dropins/tools/preact.js";const Y={size:"32",stroke:"2"},E=({minifiedView:i,orderNumber:r,orderToken:t,routeOrdersList:s,routeOrderDetails:n})=>{const d=i?"minifiedView":"fullSizeView",l=x({viewAllOrdersButton:`Account.${d}.OrdersList.viewAllOrdersButton`,ariaLabelLink:`Account.${d}.OrdersList.ariaLabelLink`});return s?e("a",{className:b(["dropin-orders-list-action",["dropin-orders-list-action--minifiedView",i]]),"data-testid":"ordersListActionButtonMinifiedView",href:s(),children:e(H,{"data-testid":"ordersListActionMinifiedView",variant:"secondary",children:h("div",{className:"dropin-orders-list-action__card-wrapper",children:[e("p",{children:l.viewAllOrdersButton}),e(k,{source:P,...Y})]})})}):e("a",{"aria-label":`${l.ariaLabelLink} ${r??t}`,href:B(n)?n(r,t):"#",className:"dropin-orders-list-action","data-testid":"ordersListActionButton",children:e(k,{source:P,...Y})})},R=()=>{const[i,r]=v(window.innerWidth<768);return M(()=>{const t=()=>{r(window.innerWidth<768)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[]),i},U=({minifiedView:i,item:r,withThumbnails:t,children:s,slots:n,routeTracking:d,...l})=>{var o,A,c,C,y,N;const u=i?"minifiedView":"fullSizeView",p=x({orderNumber:`Account.${u}.OrdersList.OrdersListCard.orderNumber`,itemsAmount:`Account.${u}.OrdersList.OrdersListCard.itemsAmount`,carrier:`Account.${u}.OrdersList.OrdersListCard.carrier`,deliveryDateText:`Account.${u}.OrdersList.OrdersListCard.orderDate`}),O=R();return h(H,{variant:"secondary",...l,className:b(["dropin-orders-list-card",["dropin-orders-list-card--full",((o=r==null?void 0:r.items)==null?void 0:o.length)>6]]),children:[e("div",{className:"dropin-orders-list-card--content",children:n!=null&&n.OrdersListCard?e(T,{"data-testid":`ordersListCard${r.id}`,name:"OrdersListCard",slot:n==null?void 0:n.OrdersListCard,context:{orderHistoryListItem:r}}):h(w,{children:[e("div",{children:r==null?void 0:r.status}),h("p",{children:[p.deliveryDateText," ",r==null?void 0:r.orderDate]}),h("p",{children:[p.orderNumber," ",r.number]}),(A=r==null?void 0:r.shipments)==null?void 0:A.map(a=>{var L;return(L=a==null?void 0:a.tracking)==null?void 0:L.map(f=>h("p",{"data-testid":f.number,children:[e("span",{children:`${p.carrier} ${f.carrier.toLocaleUpperCase()} `}),e("a",{href:(d==null?void 0:d(f))??"",className:"dropin-orders-list-card--content--track_number",children:f.number})]},a.id))}),h("p",{children:["$",(c=r==null?void 0:r.total)==null?void 0:c.grandTotal.value]}),h("p",{"data-testid":"itemsAmount",children:[((C=r==null?void 0:r.items)==null?void 0:C.length)??0," ",p.itemsAmount]}),(y=r==null?void 0:r.items)==null?void 0:y.map((a,L)=>{if(L>=0&&L<10)return h("p",{className:"dropin-orders-list-card--content--product-name",children:[h("span",{className:"dropin-orders-list-card--content--quantity",children:[(a==null?void 0:a.quantityOrdered)>1?a==null?void 0:a.quantityOrdered:null," "]}),a==null?void 0:a.productName.replaceAll("-"," ")]},`${L}_${a.id}`);if(L===11)return e("p",{children:"..."},"ellipsis")})]})}),t&&((N=r==null?void 0:r.items)!=null&&N.length)?e(K,{maxColumns:O?3:9,emptyGridContent:e(w,{}),className:b(["dropin-orders-list-card--images",["dropin-orders-list-card--images-3",O]]),"data-testid":"ordersListCardImages",children:r.items.map((a,L)=>{var $;const f=($=a==null?void 0:a.product)==null?void 0:$.smallImage.url,g=a==null?void 0:a.productName;return e(V,{src:f,width:65,height:65,alt:g},a.id+L)})}):null,e("div",{className:"dropin-orders-list-card--actions",children:s})]})},Q=({ordersInMinifiedView:i,minifiedView:r,pageSize:t,selectedDate:s,selectedPage:n,handleSetFirstOrderDate:d})=>{const[l,u]=v([]),[p,O]=v({totalPages:1,currentPage:1,pageSize:1}),[o,A]=v(!1);return M(()=>{A(!0),G(r?i:t,s,n).then(c=>{!c||!c.items||(O(c.pageInfo),u(c.items),d==null||d(c.dateOfFirstOrder))}).finally(()=>{A(!1)})},[d,r,i,t,s,n]),{loading:o,orderHistoryListItems:l,pageInfo:p}},m=(i,r=1)=>{const t=new Date,s=new Date(t);switch(i){case"sixMonthsAgo":{s.setMonth(s.getMonth()-r);break}case"oneYearAgo":{s.setFullYear(s.getFullYear()-r);break}default:return""}return{from:s==null?void 0:s.toISOString().split("T")[0],to:`${t==null?void 0:t.toISOString().split("T")[0]} 23:59:59`}},X=i=>{const r=[],t=new Date().getFullYear();for(let s=i;s<=t-1;s++)r.push({value:`{"from":"${s}-01-01","to":"${s+1}-01-01 23:59:59"}`,text:s.toString()});return r},Z=()=>{const i=x({pastSixMonths:"Account.fullSizeView.OrdersList.OrdersListSelectDate.pastSixMonths",currentYear:"Account.fullSizeView.OrdersList.OrdersListSelectDate.currentYear",viewAll:"Account.fullSizeView.OrdersList.OrdersListSelectDate.viewAll"}),[r,t]=v(),[s,n]=v(JSON.stringify(m("sixMonthsAgo",6))),[d,l]=v(1);M(()=>{window==null||window.scrollTo({top:100,behavior:"smooth"})},[d]);const u=j(()=>{const o=[{value:JSON.stringify(m("sixMonthsAgo",6)),text:i.pastSixMonths},{value:JSON.stringify(m("oneYearAgo",1)),text:i.currentYear},{value:"viewAll",text:i.viewAll}];if(r){const c=new Date(r).getFullYear();o==null||o.splice(2,0,...X(c))}return o},[i,r]),p=z(o=>{t(o)},[]),O=z(o=>{const c=o.target.value;n(c),l(1)},[]);return{selectableDateList:u,selectedDate:s,selectedPage:d,handleSelectDate:O,setSelectedPage:l,handleSetFirstOrderDate:p}},rr=({className:i,withHeader:r=!0,minifiedView:t=!1,withThumbnails:s=!0,withFilter:n=!0,ordersInMinifiedView:d=1,pageSize:l=10,routeOrdersList:u,routeOrderDetails:p,routeTracking:O,slots:o})=>{const c=x({containerTitle:`Account.${t?"minifiedView":"fullSizeView"}.OrdersList.containerTitle`}),{selectableDateList:C,selectedDate:y,handleSelectDate:N,selectedPage:a,setSelectedPage:L,handleSetFirstOrderDate:f}=Z(),{pageInfo:g,loading:$,orderHistoryListItems:D}=Q({minifiedView:t,pageSize:l,ordersInMinifiedView:d,selectedDate:y,selectedPage:a,handleSetFirstOrderDate:f});return h("div",{children:[r?e(q,{"aria-label":c.containerTitle,role:"region",title:c.containerTitle,divider:!t,className:t?"dropin-orders-list-header":""}):null,h("div",{className:b(["dropin-orders-list",i]),children:[!t&&n?e("div",{className:"dropin-orders-list--date-select",children:e(J,{value:y,name:"orderDatePicker",options:C,handleSelect:N})}):null,$?e(w,{children:Array.from(Array(g==null?void 0:g.pageSize).keys()).map(S=>e(_,{testId:"orderSkeletonLoader",withCard:!1},S))}):e(w,{children:D.length?e(w,{children:D.map((S,I)=>e(U,{routeTracking:O,minifiedView:t,item:S,withThumbnails:s,slots:o,children:o!=null&&o.OrdersListAction?e(T,{"data-testid":`ordersListActionSlot_${I}`,name:"OrdersListAction",slot:o==null?void 0:o.OrdersListAction,context:{orderHistoryListItem:S}}):e(E,{minifiedView:t,orderNumber:S.number,orderToken:S.token,routeOrderDetails:p})},I))}):e(F,{isEmpty:!D.length,typeList:"orders",minifiedView:t})}),!t&&(g==null?void 0:g.totalPages)>1?e(W,{totalPages:g==null?void 0:g.totalPages,currentPage:a,onChange:L}):null,t?e(E,{minifiedView:t,routeOrdersList:u}):null]})]})},hr=({className:i,withHeader:r,minifiedView:t,withThumbnails:s,withFilter:n,ordersInMinifiedView:d,pageSize:l,routeOrdersList:u,routeOrderDetails:p,routeTracking:O,slots:o})=>e("div",{className:b(["dropin-orders-list",i]),"data-testid":"ordersListId",children:e(rr,{className:i,withHeader:r,minifiedView:t,withThumbnails:s,withFilter:n,ordersInMinifiedView:d,pageSize:l,routeOrdersList:u,routeOrderDetails:p,routeTracking:O,slots:o})});export{hr as OrdersList,hr as default};
+import{jsx as s,jsxs as f,Fragment as C}from"@dropins/tools/preact-jsx-runtime.js";import{classes as N,Slot as _}from"@dropins/tools/lib.js";import{S as z,c as B,E as K,C as V}from"../chunks/AddressFormWrapper.js";import"@dropins/tools/preact-compat.js";import{Card as F,Icon as Y,ContentGrid as q,Image as P,Header as J,Picker as R,Pagination as W}from"@dropins/tools/components.js";import{useText as M}from"@dropins/tools/i18n.js";import{useState as O,useEffect as k,useMemo as j,useCallback as E}from"@dropins/tools/preact-hooks.js";import"@dropins/tools/event-bus.js";import{g as G}from"../chunks/getOrderHistoryList.js";import"../chunks/removeCustomerAddress.js";import"@dropins/tools/fetch-graphql.js";import"@dropins/tools/preact.js";const T={size:"32",stroke:"2"},H=({minifiedView:i,orderNumber:r,orderToken:t,routeOrdersList:e,routeOrderDetails:n})=>{const o=i?"minifiedView":"fullSizeView",l=M({viewAllOrdersButton:`Account.${o}.OrdersList.viewAllOrdersButton`,ariaLabelLink:`Account.${o}.OrdersList.ariaLabelLink`});return e?s("a",{className:N(["dropin-orders-list-action",["dropin-orders-list-action--minifiedView",i]]),"data-testid":"ordersListActionButtonMinifiedView",href:e(),children:s(F,{"data-testid":"ordersListActionMinifiedView",variant:"secondary",children:f("div",{className:"dropin-orders-list-action__card-wrapper",children:[s("p",{children:l.viewAllOrdersButton}),s(Y,{source:z,...T})]})})}):s("a",{"aria-label":`${l.ariaLabelLink} ${r??t}`,href:B(n)?n(r,t):"#",className:"dropin-orders-list-action","data-testid":"ordersListActionButton",children:s(Y,{source:z,...T})})},U=()=>{const[i,r]=O(window.innerWidth<768);return k(()=>{const t=()=>{r(window.innerWidth<768)};return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[]),i},Q=({minifiedView:i,item:r,withThumbnails:t,children:e,slots:n,routeTracking:o,routeOrderProduct:l,...A})=>{var h,y,$,w,D,b;const p=i?"minifiedView":"fullSizeView",L=M({orderNumber:`Account.${p}.OrdersList.OrdersListCard.orderNumber`,itemsAmount:`Account.${p}.OrdersList.OrdersListCard.itemsAmount`,carrier:`Account.${p}.OrdersList.OrdersListCard.carrier`,deliveryDateText:`Account.${p}.OrdersList.OrdersListCard.orderDate`}),d=U(),u=B(l);return f(F,{variant:"secondary",...A,className:N(["dropin-orders-list-card",["dropin-orders-list-card--full",((h=r==null?void 0:r.items)==null?void 0:h.length)>6]]),children:[s("div",{className:"dropin-orders-list-card--content",children:n!=null&&n.OrdersListCard?s(_,{"data-testid":`ordersListCard${r.id}`,name:"OrdersListCard",slot:n==null?void 0:n.OrdersListCard,context:{orderHistoryListItem:r}}):f(C,{children:[s("div",{children:r==null?void 0:r.status}),f("p",{children:[L.deliveryDateText," ",r==null?void 0:r.orderDate]}),f("p",{children:[L.orderNumber," ",r.number]}),(y=r==null?void 0:r.shipments)==null?void 0:y.map(a=>{var g;return(g=a==null?void 0:a.tracking)==null?void 0:g.map(c=>f("p",{"data-testid":c.number,children:[s("span",{children:`${L.carrier} ${c.carrier.toLocaleUpperCase()} `}),s("a",{href:(o==null?void 0:o(c))??"",className:"dropin-orders-list-card--content--track_number",children:c.number})]},a.id))}),f("p",{children:["$",($=r==null?void 0:r.total)==null?void 0:$.grandTotal.value]}),f("p",{"data-testid":"itemsAmount",children:[((w=r==null?void 0:r.items)==null?void 0:w.length)??0," ",L.itemsAmount]}),(D=r==null?void 0:r.items)==null?void 0:D.map((a,g)=>{if(g>=0&&g<10)return f("p",{className:"dropin-orders-list-card--content--product-name",children:[f("span",{className:"dropin-orders-list-card--content--quantity",children:[(a==null?void 0:a.quantityOrdered)>1?a==null?void 0:a.quantityOrdered:null," "]}),a==null?void 0:a.productName.replaceAll("-"," ")]},`${g}_${a.id}`);if(g===11)return s("p",{children:"..."},"ellipsis")})]})}),t&&((b=r==null?void 0:r.items)!=null&&b.length)?s(q,{maxColumns:d?3:9,emptyGridContent:s(C,{}),className:N(["dropin-orders-list-card--images",["dropin-orders-list-card--images-3",d]]),"data-testid":"ordersListCardImages",children:r.items.map((a,g)=>{var v;const c=(v=a==null?void 0:a.product)==null?void 0:v.smallImage.url,x=a==null?void 0:a.productName;return u?s("a",{href:l==null?void 0:l(a),target:"_blank",rel:"noreferrer",children:s(P,{src:c,width:65,height:65,alt:x})},a.id+g):s(P,{src:c,width:65,height:65,alt:x},a.id+g)})}):null,s("div",{className:"dropin-orders-list-card--actions",children:e})]})},X=({ordersInMinifiedView:i,minifiedView:r,pageSize:t,selectedDate:e,selectedPage:n,handleSetFirstOrderDate:o})=>{const[l,A]=O([]),[p,L]=O({totalPages:1,currentPage:1,pageSize:1}),[d,u]=O(!1);return k(()=>{u(!0),G(r?i:t,e,n).then(h=>{!h||!h.items||(L(h.pageInfo),A(h.items),o==null||o(h.dateOfFirstOrder))}).finally(()=>{u(!1)})},[o,r,i,t,e,n]),{loading:d,orderHistoryListItems:l,pageInfo:p}},I=(i,r=1)=>{const t=new Date,e=new Date(t);switch(i){case"sixMonthsAgo":{e.setMonth(e.getMonth()-r);break}case"oneYearAgo":{e.setFullYear(e.getFullYear()-r);break}default:return""}return{from:e==null?void 0:e.toISOString().split("T")[0],to:`${t==null?void 0:t.toISOString().split("T")[0]} 23:59:59`}},Z=i=>{const r=[],t=new Date().getFullYear();for(let e=i;e<=t-1;e++)r.push({value:`{"from":"${e}-01-01","to":"${e+1}-01-01 23:59:59"}`,text:e.toString()});return r},rr=()=>{const i=M({pastSixMonths:"Account.fullSizeView.OrdersList.OrdersListSelectDate.pastSixMonths",currentYear:"Account.fullSizeView.OrdersList.OrdersListSelectDate.currentYear",viewAll:"Account.fullSizeView.OrdersList.OrdersListSelectDate.viewAll"}),[r,t]=O(),[e,n]=O(JSON.stringify(I("sixMonthsAgo",6))),[o,l]=O(1);k(()=>{window==null||window.scrollTo({top:100,behavior:"smooth"})},[o]);const A=j(()=>{const d=[{value:JSON.stringify(I("sixMonthsAgo",6)),text:i.pastSixMonths},{value:JSON.stringify(I("oneYearAgo",1)),text:i.currentYear},{value:"viewAll",text:i.viewAll}];if(r){const h=new Date(r).getFullYear();d==null||d.splice(2,0,...Z(h))}return d},[i,r]),p=E(d=>{t(d)},[]),L=E(d=>{const h=d.target.value;n(h),l(1)},[]);return{selectableDateList:A,selectedDate:e,selectedPage:o,handleSelectDate:L,setSelectedPage:l,handleSetFirstOrderDate:p}},tr=({className:i,withHeader:r=!0,minifiedView:t=!1,withThumbnails:e=!0,withFilter:n=!0,ordersInMinifiedView:o=1,pageSize:l=10,routeOrdersList:A,routeOrderDetails:p,routeTracking:L,routeOrderProduct:d,slots:u})=>{const y=M({containerTitle:`Account.${t?"minifiedView":"fullSizeView"}.OrdersList.containerTitle`}),{selectableDateList:$,selectedDate:w,handleSelectDate:D,selectedPage:b,setSelectedPage:a,handleSetFirstOrderDate:g}=rr(),{pageInfo:c,loading:x,orderHistoryListItems:v}=X({minifiedView:t,pageSize:l,ordersInMinifiedView:o,selectedDate:w,selectedPage:b,handleSetFirstOrderDate:g});return f("div",{children:[r?s(J,{"aria-label":y.containerTitle,role:"region",title:y.containerTitle,divider:!t,className:t?"dropin-orders-list-header":""}):null,f("div",{className:N(["dropin-orders-list",i]),children:[!t&&n?s("div",{className:"dropin-orders-list--date-select",children:s(R,{value:w,name:"orderDatePicker",options:$,handleSelect:D})}):null,x?s(C,{children:Array.from(Array(c==null?void 0:c.pageSize).keys()).map(S=>s(V,{testId:"orderSkeletonLoader",withCard:!1},S))}):s(C,{children:v.length?s(C,{children:v.map((S,m)=>s(Q,{routeTracking:L,routeOrderProduct:d,minifiedView:t,item:S,withThumbnails:e,slots:u,children:u!=null&&u.OrdersListAction?s(_,{"data-testid":`ordersListActionSlot_${m}`,name:"OrdersListAction",slot:u==null?void 0:u.OrdersListAction,context:{orderHistoryListItem:S}}):s(H,{minifiedView:t,orderNumber:S.number,orderToken:S.token,routeOrderDetails:p})},m))}):s(K,{isEmpty:!v.length,typeList:"orders",minifiedView:t})}),!t&&(c==null?void 0:c.totalPages)>1?s(W,{totalPages:c==null?void 0:c.totalPages,currentPage:b,onChange:a}):null,t?s(H,{minifiedView:t,routeOrdersList:A}):null]})]})},Lr=({className:i,withHeader:r,minifiedView:t,withThumbnails:e,withFilter:n,ordersInMinifiedView:o,pageSize:l,routeOrdersList:A,routeOrderDetails:p,routeTracking:L,routeOrderProduct:d,slots:u})=>s("div",{className:N(["dropin-orders-list",i]),"data-testid":"ordersListId",children:s(tr,{className:i,withHeader:r,minifiedView:t,withThumbnails:e,withFilter:n,ordersInMinifiedView:o,pageSize:l,routeOrdersList:A,routeOrderDetails:p,routeTracking:L,routeOrderProduct:d,slots:u})});export{Lr as OrdersList,Lr as default};

package/package.json

@@ -1 +1 @@
-{"name": "@dropins/storefront-account", "version": "0.1.0-alpha11", "@dropins/elsie": "0.32.0"}
+{"name": "@dropins/storefront-account", "version": "0.1.0-alpha12", "@dropins/elsie": "0.32.0"}

package/types/ordersList.types.d.ts

@@ -1,6 +1,6 @@
 import { SlotProps } from '@dropins/tools/types/elsie/src/lib';
 import { HTMLAttributes } from 'preact/compat';
-import { OrderDetails, ShipmentsTracingModel } from '../data/models';
+import { OrderDetails, OrderItem, ShipmentsTracingModel } from '../data/models';
 
 export interface OrdersListActionContext {
     orderHistoryListItem: OrderDetails;
@@ -22,6 +22,7 @@ export interface OrdersListProps extends HTMLAttributes<HTMLDivElement> {
     ordersInMinifiedView?: 1 | 2 | 3;
     pageSize: number;
     routeTracking?: (shipping: ShipmentsTracingModel) => string;
+    routeOrderProduct?: (product: OrderItem) => string;
 }
 export interface OrdersListWrapperProps extends OrdersListProps {
 }
@@ -33,6 +34,7 @@ export interface OrdersListCardProps extends HTMLAttributes<HTMLDivElement> {
         OrdersListCard?: SlotProps<OrdersListCardContext>;
     };
     routeTracking?: (shipping: ShipmentsTracingModel) => string;
+    routeOrderProduct?: (product: OrderItem) => string;
 }
 export interface OrdersListActionProps {
     minifiedView: boolean;