Create return page (#204)

* Integrate CreateReturn container

* Add order build (manually)

* Update dependencies

* Manually add alpha20 build (test)

* Manually add alpha20 build (test)

* Install latest version of storefront-order dropin

* Install latest order dropin version

---------

Co-authored-by: Konstantin Fandelyuk <[email protected]>

blocks/commerce-create-return/commerce-create-return.css

@@ -0,0 +1,5 @@
+/* stylelint-disable no-empty-source */
+
+body:not(.columns) main div.order-create-return {
+    margin-top: var(--spacing-large);
+}

blocks/commerce-create-return/commerce-create-return.js

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable import/no-extraneous-dependencies */
+import { render as orderRenderer } from '@dropins/storefront-order/render.js';
+import { CreateReturn } from '@dropins/storefront-order/containers/CreateReturn.js';
+import { checkIsAuthenticated } from '../../scripts/configs.js';
+import { ORDER_DETAILS_PATH, CUSTOMER_ORDER_DETAILS_PATH } from '../../scripts/constants.js';
+
+// Initialize
+import '../../scripts/initializers/order.js';
+
+export default async function decorate(block) {
+  await orderRenderer.render(CreateReturn, {
+    routeReturnSuccess: (orderData) => (checkIsAuthenticated() ? `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderData.number}` : `${ORDER_DETAILS_PATH}?orderRef=${orderData.token}`),
+  })(block);
+}

blocks/commerce-order-status/commerce-order-status.js

@@ -3,13 +3,24 @@
 import { render as orderRenderer } from '@dropins/storefront-order/render.js';
 import { OrderStatus } from '@dropins/storefront-order/containers/OrderStatus.js';
 import { checkIsAuthenticated } from '../../scripts/configs.js';
+import { CREATE_RETURN_PATH, CUSTOMER_CREATE_RETURN_PATH } from '../../scripts/constants.js';
 
 // Initialize
 import '../../scripts/initializers/order.js';
 
 export default async function decorate(block) {
   await orderRenderer.render(OrderStatus, {
-    routeCreateReturn: (orderData) => (checkIsAuthenticated() ? `/customer/create-return?orderId=${orderData.id}` : `/create-return?orderId=${orderData.id}`),
+    routeCreateReturn: ({ token, number: orderNumber }) => {
+      const isAuthenticated = checkIsAuthenticated();
+
+      const { searchParams } = new URL(window.location.href);
+      const orderRefFromUrl = searchParams.get('orderRef');
+      const newOrderRef = isAuthenticated ? orderNumber : token;
+
+      const encodedOrderRef = encodeURIComponent(orderRefFromUrl || newOrderRef);
+
+      return checkIsAuthenticated() ? `${CUSTOMER_CREATE_RETURN_PATH}?orderRef=${encodedOrderRef}` : `${CREATE_RETURN_PATH}?orderRef=${encodedOrderRef}`;
+    },
     routeOnSuccess: () => '/cart',
   })(block);
 }

package.json

@@ -35,11 +35,11 @@
   "dependencies": {
     "@adobe/magento-storefront-event-collector": "^1.8.0",
     "@adobe/magento-storefront-events-sdk": "^1.8.0",
-    "@dropins/storefront-account": "0.1.0-alpha19",
+    "@dropins/storefront-account": "0.1.0-alpha20",
     "@dropins/storefront-auth": "0.0.1-alpha25",
     "@dropins/storefront-cart": "0.10.0",
     "@dropins/storefront-checkout": "0.1.0-alpha53",
-    "@dropins/storefront-order": "0.1.0-alpha19",
+    "@dropins/storefront-order": "0.1.0-alpha21",
     "@dropins/storefront-pdp": "0.4.0",
     "@dropins/tools": "^0.35.0"
   }

scripts/__dropins__/storefront-account/hooks/components/useForm.d.ts

@@ -5,9 +5,9 @@ export declare const useForm: ({ fieldsConfig, onSubmit, onChange, setInputChang
     formData: Record<string, string | number>;
     errors: Record<string, string>;
     formRef: import('preact').RefObject<HTMLFormElement>;
-    handleInputChange: (event: Event) => void;
+    handleInputChange: (event: Event, errorsProp: Record<string, string>) => void;
     onFocus: (event: Event) => void;
-    handleBlur: (event: Event) => void;
+    handleBlur: (event: Event, errorsProp: Record<string, string>) => void;
     handleSubmit: (event: SubmitEvent) => void;
     handleValidationSubmit: (disableShowError?: boolean) => boolean;
 };

scripts/__dropins__/storefront-order/api.js

@@ -1,7 +1,7 @@
 /*! Copyright 2024 Adobe
 All Rights Reserved. */
-import{Initializer as I}from"@dropins/tools/lib.js";import{events as d}from"@dropins/tools/event-bus.js";import{f as n,h as m}from"./chunks/fetch-graphql.js";import{g as P,r as U,s as Y,a as q,b as Q}from"./chunks/fetch-graphql.js";import{h as l}from"./chunks/network-error.js";import{P as u,a as _,G as c,O as p,B as O,R as h,c as T}from"./chunks/transform-order-details.js";import{O as D,A as R}from"./chunks/getGuestOrder.graphql.js";import{t as G}from"./chunks/getCustomer.js";import{a as H,g as K}from"./chunks/getCustomer.js";import{g as J}from"./chunks/getAttributesForm.js";import{g as W}from"./chunks/getStoreConfig.js";import{g as Z}from"./chunks/getCustomerOrdersReturn.js";import{c as re,r as te}from"./chunks/requestGuestOrderCancel.js";import{r as se}from"./chunks/reorderItems.js";import"@dropins/tools/fetch-graphql.js";import"./chunks/convertCase.js";const b=`
-query ORDER_BY_NUMBER($orderNumber: String!) {
+import{Initializer as I}from"@dropins/tools/lib.js";import{events as o}from"@dropins/tools/event-bus.js";import{f as n,h as m}from"./chunks/fetch-graphql.js";import{g as U,r as Y,s as q,a as Q,b as H}from"./chunks/fetch-graphql.js";import{h as l}from"./chunks/network-error.js";import{P as u,a as _,G as p,O as c,B as O,R as D,c as b}from"./chunks/transform-order-details.js";import{O as R,A as h}from"./chunks/getGuestOrder.graphql.js";import{t as T}from"./chunks/getCustomer.js";import{g as j,a as J}from"./chunks/getCustomer.js";import{g as W}from"./chunks/getAttributesForm.js";import{g as Z}from"./chunks/getStoreConfig.js";import{g as re}from"./chunks/getCustomerOrdersReturn.js";import{g as ae,r as se}from"./chunks/requestReturn.js";import{c as oe,r as ie}from"./chunks/requestGuestOrderCancel.js";import{r as me}from"./chunks/reorderItems.js";import"@dropins/tools/fetch-graphql.js";import"./chunks/convertCase.js";import"./chunks/transform-attributes-form.js";const G=`
+query ORDER_BY_NUMBER($orderNumber: String!, $pageSize: Int) {
  customer {
     orders(
       filter: { number: { eq: $orderNumber } }
@@ -17,9 +17,28 @@ query ORDER_BY_NUMBER($orderNumber: String!) {
         carrier
         shipping_method
         is_virtual
-        returns {
+        returns(pageSize: $pageSize) {
           ...OrderReturns
         }
+        items_eligible_for_return {
+          ...OrderItemDetails
+          ... on BundleOrderItem {
+            ...BundleOrderItemDetails
+          }
+          ... on GiftCardOrderItem {
+            ...GiftCardDetails
+            product {
+              ...ProductDetails
+            }
+          }
+          ... on DownloadableOrderItem {
+            product_name
+            downloadable_links {
+              sort_order
+              title
+            }
+          }
+        }
         applied_coupons {
           code
         }
@@ -88,13 +107,13 @@ query ORDER_BY_NUMBER($orderNumber: String!) {
 }
 ${u}
 ${_}
-${c}
 ${p}
+${c}
 ${O}
-${D}
 ${R}
 ${h}
-`,f=async(e,r,t)=>await n(b,{method:"GET",cache:"force-cache",variables:{orderNumber:e}}).then(a=>{var s;return(s=a.errors)!=null&&s.length?m(a.errors):T(t??"orderData",a,r)}).catch(l),y=`
+${D}
+`,y=async({orderId:e,returnRef:r,queryType:t,returnsPageSize:a=50})=>await n(G,{method:"GET",cache:"force-cache",variables:{orderNumber:e,pageSize:a}}).then(s=>{var d;return(d=s.errors)!=null&&d.length?m(s.errors):b(t??"orderData",s,r)}).catch(l),f=`
 query ORDER_BY_TOKEN($token: String!) {
   guestOrderByToken(input: { token: $token }) {
     email
@@ -110,7 +129,10 @@ query ORDER_BY_TOKEN($token: String!) {
     gift_receipt_included
     available_actions
     is_virtual
-    returns {
+    items_eligible_for_return {
+      ...OrderItemDetails
+    }
+    returns(pageSize: 50) {
       ...OrderReturns
     }
     payment_methods {
@@ -182,10 +204,10 @@ query ORDER_BY_TOKEN($token: String!) {
 }
 ${u}
 ${_}
-${c}
 ${p}
+${c}
 ${O}
-${D}
 ${R}
 ${h}
-`,A=async(e,r)=>await n(y,{method:"GET",cache:"no-cache",variables:{token:e}}).then(t=>{var a;return(a=t.errors)!=null&&a.length?m(t.errors):G(t,r)}).catch(l),$=async e=>{var i;const r=(e==null?void 0:e.orderRef)??"",t=(e==null?void 0:e.returnRef)??"",a=r&&typeof(e==null?void 0:e.orderRef)=="string"&&((i=e==null?void 0:e.orderRef)==null?void 0:i.length)>20,s=(e==null?void 0:e.orderData)??null;if(s){d.emit("order/data",{...s,returnNumber:t});return}if(!r){console.error("Order Token or number not received.");return}const o=a?await A(r,t):await f(r,t,"orderData");o?d.emit("order/data",{...o,returnNumber:t}):d.emit("order/error",{source:"order",type:"network",error:"The data was not received."})},E=new I({init:async e=>{const r={};E.config.setConfig({...r,...e}),$(e).catch(console.error)},listeners:()=>[]}),v=E.config;export{re as cancelOrder,v as config,n as fetchGraphQl,J as getAttributesForm,P as getConfig,H as getCustomer,Z as getCustomerOrdersReturn,K as getGuestOrder,f as getOrderDetailsById,W as getStoreConfig,A as guestOrderByToken,E as initialize,U as removeFetchGraphQlHeader,se as reorderItems,te as requestGuestOrderCancel,Y as setEndpoint,q as setFetchGraphQlHeader,Q as setFetchGraphQlHeaders};
+${D}
+`,$=async(e,r)=>await n(f,{method:"GET",cache:"no-cache",variables:{token:e}}).then(t=>{var a;return(a=t.errors)!=null&&a.length?m(t.errors):T(t,r)}).catch(l),A="orderData",C=async e=>{var i;const r=typeof(e==null?void 0:e.orderRef)=="string"?e==null?void 0:e.orderRef:"",t=typeof(e==null?void 0:e.returnRef)=="string"?e==null?void 0:e.returnRef:"",a=r&&typeof(e==null?void 0:e.orderRef)=="string"&&((i=e==null?void 0:e.orderRef)==null?void 0:i.length)>20,s=(e==null?void 0:e.orderData)??null;if(s){o.emit("order/data",{...s,returnNumber:t});return}if(!r){console.error("Order Token or number not received.");return}const d=a?await $(r,t):await y({orderId:r,returnRef:t,queryType:A});d?o.emit("order/data",{...d,returnNumber:t}):o.emit("order/error",{source:"order",type:"network",error:"The data was not received."})},E=new I({init:async e=>{const r={};E.config.setConfig({...r,...e}),C(e).catch(console.error)},listeners:()=>[]}),x=E.config;export{oe as cancelOrder,x as config,n as fetchGraphQl,W as getAttributesForm,ae as getAttributesList,U as getConfig,j as getCustomer,re as getCustomerOrdersReturn,J as getGuestOrder,y as getOrderDetailsById,Z as getStoreConfig,$ as guestOrderByToken,E as initialize,Y as removeFetchGraphQlHeader,me as reorderItems,ie as requestGuestOrderCancel,se as requestReturn,q as setEndpoint,Q as setFetchGraphQlHeader,H as setFetchGraphQlHeaders};

scripts/__dropins__/storefront-order/api/getAttributesList/getAttributesList.d.ts

@@ -0,0 +1,5 @@
+import { AttributesFormModel } from '../../data/models';
+
+export declare const getAttributesList: (entityType: string) => Promise<AttributesFormModel[] | [
+]>;
+//# sourceMappingURL=getAttributesList.d.ts.map

scripts/__dropins__/storefront-order/api/getAttributesList/graphql/getAttributesList.graphql.d.ts

@@ -0,0 +1,2 @@
+export declare const GET_ATTRIBUTES_LIST = "\n  query GET_ATTRIBUTES_LIST($entityType: AttributeEntityTypeEnum!) {\n    attributesList(entityType: $entityType) {\n      items {\n        ... on CustomerAttributeMetadata {\n          multiline_count\n          sort_order\n          validate_rules {\n            name\n            value\n          }\n        }\n        ... on ReturnItemAttributeMetadata {\n          sort_order\n        }\n        code\n        label\n        default_value\n        frontend_input\n        is_unique\n        is_required\n        options {\n          is_default\n          label\n          value\n        }\n      }\n      errors {\n        type\n        message\n      }\n    }\n  }\n";
+//# sourceMappingURL=getAttributesList.graphql.d.ts.map

scripts/__dropins__/storefront-order/api/getAttributesList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './getAttributesList';
+//# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-order/api/getCustomerOrdersReturn/getCustomerOrdersReturn.d.ts

@@ -1,4 +1,4 @@
 import { CustomerOrdersReturnModel } from '../../data/models';
 
-export declare const getCustomerOrdersReturn: () => Promise<CustomerOrdersReturnModel | null>;
+export declare const getCustomerOrdersReturn: (pageSize?: number) => Promise<CustomerOrdersReturnModel | null>;
 //# sourceMappingURL=getCustomerOrdersReturn.d.ts.map

scripts/__dropins__/storefront-order/api/getOrderDetailsById/getOrderDetailsById.d.ts

@@ -1,4 +1,5 @@
+import { GetOrderDetailsByIdProps } from '../../types';
 import { TransformedData } from '../../data/models';
 
-export declare const getOrderDetailsById: <T extends "orderData">(orderId?: string, returnRef?: string, queryType?: T | undefined) => Promise<TransformedData<T>>;
+export declare const getOrderDetailsById: <T extends "orderData">({ orderId, returnRef, queryType, returnsPageSize, }: GetOrderDetailsByIdProps) => Promise<TransformedData<T>>;
 //# sourceMappingURL=getOrderDetailsById.d.ts.map

scripts/__dropins__/storefront-order/api/getOrderDetailsById/graphql/orderItemsFragment.graphql.d.ts

@@ -1,6 +1,6 @@
 export declare const PRODUCT_DETAILS_FRAGMENT = "\n  fragment ProductDetails on ProductInterface {\n    __typename\n    canonical_url\n    url_key\n    uid\n    name\n    sku\n    only_x_left_in_stock\n    stock_status\n    thumbnail {\n      label\n      url\n    }\n    price_range {\n      maximum_price {\n        regular_price {\n          currency\n          value\n        }\n      }\n    }\n  }\n";
 export declare const PRICE_DETAILS_FRAGMENT = "\n  fragment PriceDetails on OrderItemInterface {\n    prices {\n      price_including_tax {\n        value\n        currency\n      }\n      original_price {\n        value\n        currency\n      }\n      original_price_including_tax {\n        value\n        currency\n      }\n      price {\n        value\n        currency\n      }\n    }\n  }\n";
 export declare const GIFT_CARD_DETAILS_FRAGMENT = "\n  fragment GiftCardDetails on GiftCardOrderItem {\n    ...PriceDetails\n    gift_message {\n      message\n    }\n    gift_card {\n      recipient_name\n      recipient_email\n      sender_name\n      sender_email\n      message\n    }\n  }\n";
-export declare const ORDER_ITEM_DETAILS_FRAGMENT = "\n  fragment OrderItemDetails on OrderItemInterface {\n    __typename\n    status\n    product_name\n    product_url_key\n    id\n    quantity_ordered\n    quantity_shipped\n    quantity_canceled\n    quantity_invoiced\n    quantity_refunded\n    quantity_returned\n    product_sale_price {\n      value\n      currency\n    }\n    selected_options {\n      label\n      value\n    }\n    product {\n      ...ProductDetails\n    }\n    ...PriceDetails\n  }\n";
+export declare const ORDER_ITEM_DETAILS_FRAGMENT = "\n  fragment OrderItemDetails on OrderItemInterface {\n    __typename\n    status\n    product_sku\n    eligible_for_return\n    product_name\n    product_url_key\n    id\n    quantity_ordered\n    quantity_shipped\n    quantity_canceled\n    quantity_invoiced\n    quantity_refunded\n    product_sale_price {\n      value\n      currency\n    }\n    selected_options {\n      label\n      value\n    }\n    product {\n      ...ProductDetails\n    }\n    ...PriceDetails\n  }\n";
 export declare const BUNDLE_ORDER_ITEM_DETAILS_FRAGMENT = "\n  fragment BundleOrderItemDetails on BundleOrderItem {\n    ...PriceDetails\n    bundle_options {\n      uid\n      label\n      values {\n        uid\n        product_name\n      }\n    }\n  }\n";
 //# sourceMappingURL=orderItemsFragment.graphql.d.ts.map

scripts/__dropins__/storefront-order/api/index.d.ts

@@ -7,6 +7,8 @@ export * from './getAttributesForm';
 export * from './getCustomer';
 export * from './getStoreConfig';
 export * from './getCustomerOrdersReturn';
+export * from './getAttributesList';
+export * from './requestReturn';
 export * from './cancelOrder';
 export * from './requestGuestOrderCancel';
 export * from './reorderItems';

scripts/__dropins__/storefront-order/api/requestReturn/graphql/fragments.d.ts

@@ -0,0 +1,2 @@
+export declare const REQUEST_RETURN_ORDER_FRAGMENT = "\n  fragment OrderReturn on Return {\n    __typename\n    uid\n    status\n    number\n    created_at\n  }\n";
+//# sourceMappingURL=fragments.d.ts.map

scripts/__dropins__/storefront-order/api/requestReturn/graphql/requestReturn.graphql.d.ts

@@ -0,0 +1,2 @@
+export declare const REQUEST_RETURN_ORDER: string;
+//# sourceMappingURL=requestReturn.graphql.d.ts.map

scripts/__dropins__/storefront-order/api/requestReturn/index.d.ts

@@ -0,0 +1,2 @@
+export * from './requestReturn';
+//# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-order/api/requestReturn/requestReturn.d.ts

@@ -0,0 +1,9 @@
+import { RequestReturnProps } from '../../types';
+
+export declare const requestReturn: (form: RequestReturnProps) => Promise<{
+    uid: string;
+    number: string;
+    status: string;
+    createdAt: string;
+}>;
+//# sourceMappingURL=requestReturn.d.ts.map