Merge pull request #955 from mirumee/super-duper-urgent-return-fixes-again

Return fixes

locale/defaultMessages.json

@@ -3839,6 +3839,10 @@
     "context": "checkbox",
     "string": "Refund shipment costs"
   },
+  "src_dot_orders_dot_components_dot_OrderRefundReturnAmount_dot_982301568": {
+    "context": "label",
+    "string": "No refund"
+  },
   "src_dot_orders_dot_components_dot_OrderRefundReturnAmount_dot_amountTooBig": {
     "context": "Amount error message",
     "string": "Amount cannot be bigger than max refund"

src/components/Timeline/TimelineEvent.tsx

@@ -25,7 +25,6 @@ const useStyles = makeStyles(
         paddingTop: theme.spacing(2)
       },
       "&.Mui-expanded": {
-        borderColor: "red",
         margin: 0,
         minHeight: 0
       },
@@ -48,7 +47,7 @@ const useStyles = makeStyles(
       "&> .MuiExpansionPanelSummary-expandIcon": {
         padding: 0,
         position: "absolute",
-        right: theme.spacing(18)
+        right: theme.spacing(20)
       },
       margin: 0,
       minHeight: 0,

src/orders/components/OrderRefundPage/form.tsx

@@ -14,7 +14,8 @@ export enum OrderRefundType {
 }
 export enum OrderRefundAmountCalculationMode {
   AUTOMATIC = "automatic",
-  MANUAL = "manual"
+  MANUAL = "manual",
+  NONE = "none"
 }
 
 export interface OrderRefundData {

src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmount.tsx

@@ -82,6 +82,7 @@ interface OrderRefundAmountProps {
   isReturn?: boolean;
   errors: OrderErrorFragment[];
   amountData: OrderRefundAmountValuesProps;
+  allowNoRefund?: boolean;
   onChange: (event: React.ChangeEvent<any>) => void;
   onRefund: () => void;
 }
@@ -96,7 +97,8 @@ const OrderRefundAmount: React.FC<OrderRefundAmountProps> = props => {
     onRefund,
     isReturn = false,
     amountData,
-    disableSubmitButton
+    disableSubmitButton,
+    allowNoRefund = false
   } = props;
   const classes = useStyles(props);
   const intl = useIntl();
@@ -144,6 +146,17 @@ const OrderRefundAmount: React.FC<OrderRefundAmountProps> = props => {
             onChange={onChange}
             name="amountCalculationMode"
           >
+            {allowNoRefund && (
+              <FormControlLabel
+                disabled={disabled}
+                value={OrderRefundAmountCalculationMode.NONE}
+                control={<Radio color="primary" />}
+                label={intl.formatMessage({
+                  defaultMessage: "No refund",
+                  description: "label"
+                })}
+              />
+            )}
             <FormControlLabel
               disabled={disabled}
               value={OrderRefundAmountCalculationMode.AUTOMATIC}
@@ -153,6 +166,18 @@ const OrderRefundAmount: React.FC<OrderRefundAmountProps> = props => {
                 description: "label"
               })}
             />
+            {data.amountCalculationMode ===
+              OrderRefundAmountCalculationMode.NONE && (
+              <>
+                <CardSpacer />
+                <OrderRefundAmountValues
+                  authorizedAmount={authorizedAmount}
+                  previouslyRefunded={previouslyRefunded}
+                  maxRefund={maxRefund}
+                  shipmentCost={data.refundShipmentCosts && shipmentCost}
+                />
+              </>
+            )}
             {data.amountCalculationMode ===
               OrderRefundAmountCalculationMode.AUTOMATIC && (
               <>

src/orders/components/OrderRefundReturnAmount/utils.ts

@@ -149,8 +149,8 @@ export const getReturnProductsAmountValues = (
   const authorizedAmount = getAuthorizedAmount(order);
 
   const {
-    fulfiledItemsQuantities,
+    fulfilledItemsQuantities,
-    unfulfiledItemsQuantities,
+    unfulfilledItemsQuantities,
     refundShipmentCosts
   } = formData;
 
@@ -177,8 +177,8 @@ export const getReturnProductsAmountValues = (
   return {
     ...getProductsAmountValues(
       order,
-      fulfiledItemsQuantities,
+      fulfilledItemsQuantities,
-      unfulfiledItemsQuantities,
+      unfulfilledItemsQuantities,
       refundShipmentCosts
     ),
     refundTotalAmount,

src/orders/components/OrderReturnPage/OrderReturnPage.tsx

@@ -46,11 +46,11 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
   return (
     <OrderRefundForm order={order} onSubmit={onSubmit}>
       {({ data, handlers, change, submit }) => {
-        const { fulfiledItemsQuantities, unfulfiledItemsQuantities } = data;
+        const { fulfilledItemsQuantities, unfulfilledItemsQuantities } = data;
 
         const hasAnyItemsSelected =
-          fulfiledItemsQuantities.some(({ value }) => !!value) ||
+          fulfilledItemsQuantities.some(({ value }) => !!value) ||
-          unfulfiledItemsQuantities.some(({ value }) => !!value);
+          unfulfilledItemsQuantities.some(({ value }) => !!value);
 
         return (
           <Container>
@@ -66,13 +66,13 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
             />
             <Grid>
               <div>
-                {!!data.unfulfiledItemsQuantities.length && (
+                {!!data.unfulfilledItemsQuantities.length && (
                   <>
                     <ItemsCard
                       errors={errors}
                       order={order}
                       lines={getUnfulfilledLines(order)}
-                      itemsQuantities={data.unfulfiledItemsQuantities}
+                      itemsQuantities={data.unfulfilledItemsQuantities}
                       itemsSelections={data.itemsToBeReplaced}
                       onChangeQuantity={handlers.changeUnfulfiledItemsQuantity}
                       onSetMaxQuantity={
@@ -92,7 +92,7 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
                         order={order}
                         fulfilmentId={id}
                         lines={getParsedFulfiledLines(lines)}
-                        itemsQuantities={data.fulfiledItemsQuantities}
+                        itemsQuantities={data.fulfilledItemsQuantities}
                         itemsSelections={data.itemsToBeReplaced}
                         onChangeQuantity={handlers.changeFulfiledItemsQuantity}
                         onSetMaxQuantity={handlers.handleSetMaximalFulfiledItemsQuantities(
@@ -107,6 +107,7 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
               </div>
               <div>
                 <OrderAmount
+                  allowNoRefund
                   isReturn
                   amountData={getReturnProductsAmountValues(order, data)}
                   data={data}

src/orders/components/OrderReturnPage/form.tsx

@@ -47,8 +47,8 @@ export interface OrderReturnHandlers {
 
 export interface OrderReturnFormData extends OrderReturnData {
   itemsToBeReplaced: FormsetReplacementData;
-  fulfiledItemsQuantities: FormsetQuantityData;
+  fulfilledItemsQuantities: FormsetQuantityData;
-  unfulfiledItemsQuantities: FormsetQuantityData;
+  unfulfilledItemsQuantities: FormsetQuantityData;
 }
 
 export type OrderRefundSubmitData = OrderReturnFormData;
@@ -184,9 +184,9 @@ function useOrderReturnForm(
   };
 
   const data: OrderReturnFormData = {
-    fulfiledItemsQuantities: fulfiledItemsQuatities.data,
+    fulfilledItemsQuantities: fulfiledItemsQuatities.data,
     itemsToBeReplaced: itemsToBeReplaced.data,
-    unfulfiledItemsQuantities: unfulfiledItemsQuantites.data,
+    unfulfilledItemsQuantities: unfulfiledItemsQuantites.data,
     ...form.data
   };
 

src/orders/utils/data.test.ts

@@ -738,7 +738,7 @@ describe("Get the total value of all replaced products", () => {
       }
     ];
 
-    const unfulfiledItemsQuantities: FormsetData<LineItemData, number> = [
+    const unfulfilledItemsQuantities: FormsetData<LineItemData, number> = [
       {
         data: { isFulfillment: false, isRefunded: false },
         id: "1",
@@ -759,7 +759,7 @@ describe("Get the total value of all replaced products", () => {
       }
     ];
 
-    const fulfiledItemsQuantities: FormsetData<LineItemData, number> = [
+    const fulfilledItemsQuantities: FormsetData<LineItemData, number> = [
       {
         data: { isFulfillment: true, isRefunded: false },
         id: "4",
@@ -861,8 +861,8 @@ describe("Get the total value of all replaced products", () => {
       },
       {
         itemsToBeReplaced,
-        unfulfiledItemsQuantities,
+        unfulfilledItemsQuantities,
-        fulfiledItemsQuantities
+        fulfilledItemsQuantities
       }
     );
 
@@ -1085,42 +1085,42 @@ describe("Get the total value of all selected products", () => {
       }
     ];
 
-    const unfulfiledItemsQuantities: FormsetData<null, number> = [
+    const unfulfilledItemsQuantities: FormsetData<LineItemData, number> = [
       {
-        data: null,
+        data: { isFulfillment: false, isRefunded: false },
         id: "1",
         label: null,
         value: 0
       },
       {
-        data: null,
+        data: { isFulfillment: false, isRefunded: false },
         id: "2",
         label: null,
         value: 2
       },
       {
-        data: null,
+        data: { isFulfillment: false, isRefunded: false },
         id: "3",
         label: null,
         value: 1
       }
     ];
 
-    const fulfiledItemsQuantities: FormsetData<null, number> = [
+    const fulfilledItemsQuantities: FormsetData<LineItemData, number> = [
       {
-        data: null,
+        data: { isFulfillment: true, isRefunded: false },
         id: "4",
         label: null,
         value: 4
       },
       {
-        data: null,
+        data: { isFulfillment: true, isRefunded: false },
         id: "5",
         label: null,
         value: 0
       },
       {
-        data: null,
+        data: { isFulfillment: true, isRefunded: false },
         id: "6",
         label: null,
         value: 3
@@ -1196,8 +1196,8 @@ describe("Get the total value of all selected products", () => {
       },
       {
         itemsToBeReplaced,
-        unfulfiledItemsQuantities,
+        unfulfilledItemsQuantities,
-        fulfiledItemsQuantities
+        fulfilledItemsQuantities
       }
     );
 

src/orders/utils/data.ts

@@ -53,8 +53,8 @@ const getItemPriceAndQuantity = ({
 const selectItemPriceAndQuantity = (
   order: OrderDetails_order,
   {
-    fulfiledItemsQuantities,
+    fulfilledItemsQuantities,
-    unfulfiledItemsQuantities
+    unfulfilledItemsQuantities
   }: Partial<OrderReturnFormData>,
   id: string,
   isFulfillment: boolean
@@ -62,12 +62,12 @@ const selectItemPriceAndQuantity = (
   isFulfillment
     ? getItemPriceAndQuantity({
         id,
-        itemsQuantities: fulfiledItemsQuantities,
+        itemsQuantities: fulfilledItemsQuantities,
         orderLines: getAllOrderFulfilledLines(order)
       })
     : getItemPriceAndQuantity({
         id,
-        itemsQuantities: unfulfiledItemsQuantities,
+        itemsQuantities: unfulfilledItemsQuantities,
         orderLines: order.lines
       });
 
@@ -75,8 +75,8 @@ export const getReplacedProductsAmount = (
   order: OrderDetails_order,
   {
     itemsToBeReplaced,
-    unfulfiledItemsQuantities,
+    unfulfilledItemsQuantities,
-    fulfiledItemsQuantities
+    fulfilledItemsQuantities
   }: Partial<OrderReturnFormData>
 ) => {
   if (!order || !itemsToBeReplaced.length) {
@@ -94,7 +94,7 @@ export const getReplacedProductsAmount = (
 
       const { unitPrice, selectedQuantity } = selectItemPriceAndQuantity(
         order,
-        { fulfiledItemsQuantities, unfulfiledItemsQuantities },
+        { fulfilledItemsQuantities, unfulfilledItemsQuantities },
         id,
         isFulfillment
       );
@@ -107,20 +107,20 @@ export const getReplacedProductsAmount = (
 
 export const getReturnSelectedProductsAmount = (
   order: OrderDetails_order,
-  { itemsToBeReplaced, unfulfiledItemsQuantities, fulfiledItemsQuantities }
+  { itemsToBeReplaced, unfulfilledItemsQuantities, fulfilledItemsQuantities }
 ) => {
   if (!order) {
     return 0;
   }
 
   const unfulfilledItemsValue = getPartialProductsValue({
-    itemsQuantities: unfulfiledItemsQuantities,
+    itemsQuantities: unfulfilledItemsQuantities,
     itemsToBeReplaced,
     orderLines: order.lines
   });
 
   const fulfiledItemsValue = getPartialProductsValue({
-    itemsQuantities: fulfiledItemsQuantities,
+    itemsQuantities: fulfilledItemsQuantities,
     itemsToBeReplaced,
     orderLines: getAllOrderFulfilledLines(order)
   });
@@ -137,24 +137,24 @@ const getPartialProductsValue = ({
   itemsQuantities: FormsetData<LineItemData, number>;
   orderLines: OrderDetails_order_lines[];
 }) =>
-  itemsQuantities.reduce((resultAmount, { id, value: quantity }) => {
+  itemsQuantities.reduce(
-    const {
+    (resultAmount, { id, value: quantity, data: { isRefunded } }) => {
-      value: isItemToBeReplaced,
+      const { value: isItemToBeReplaced } = itemsToBeReplaced.find(getById(id));
-      data: { isRefunded }
-    } = itemsToBeReplaced.find(getById(id));
 
-    if (quantity < 1 || isItemToBeReplaced || isRefunded) {
+      if (quantity < 1 || isItemToBeReplaced || isRefunded) {
-      return resultAmount;
+        return resultAmount;
-    }
+      }
 
-    const { selectedQuantity, unitPrice } = getItemPriceAndQuantity({
+      const { selectedQuantity, unitPrice } = getItemPriceAndQuantity({
-      id,
+        id,
-      itemsQuantities,
+        itemsQuantities,
-      orderLines
+        orderLines
-    });
+      });
 
-    return resultAmount + unitPrice.gross.amount * selectedQuantity;
+      return resultAmount + unitPrice.gross.amount * selectedQuantity;
-  }, 0);
+    },
+    0
+  );
 
 export function getRefundedLinesPriceSum(
   lines: OrderRefundData_order_lines[],

src/orders/views/OrderReturn/utils.tsx

@@ -23,17 +23,17 @@ class ReturnFormDataParser {
 
   public getParsedData = (): OrderReturnProductsInput => {
     const {
-      fulfiledItemsQuantities,
+      fulfilledItemsQuantities,
-      unfulfiledItemsQuantities,
+      unfulfilledItemsQuantities,
       refundShipmentCosts
     } = this.formData;
 
     const fulfillmentLines = this.getParsedLineData<
       OrderReturnFulfillmentLineInput
-    >(fulfiledItemsQuantities, "fulfillmentLineId");
+    >(fulfilledItemsQuantities, "fulfillmentLineId");
 
     const orderLines = this.getParsedLineData<OrderReturnLineInput>(
-      unfulfiledItemsQuantities,
+      unfulfilledItemsQuantities,
       "orderLineId"
     );
 
@@ -78,7 +78,11 @@ class ReturnFormDataParser {
     orderLines: OrderReturnLineInput[],
     fulfillmentLines: OrderReturnFulfillmentLineInput[]
   ) => {
-    if (!this.order.totalCaptured?.amount) {
+    if (
+      !this.order.totalCaptured?.amount ||
+      this.formData.amountCalculationMode ===
+        OrderRefundAmountCalculationMode.NONE
+    ) {
       return false;
     }