umwd-components 0.1.626 → 0.1.628

package/dist/types/types/e-commerce/iro/types.d.ts

@@ -22,7 +22,8 @@ export interface IroItem {
     };
 }
 export interface NewIroItem {
-    product?: Product;
+    line_item_number?: string;
+    product?: Product | number | ProductName;
     reason: ReturnReason;
     other_reason?: string;
     returned_quantity: number;
@@ -31,19 +32,20 @@ export type IroStatus = "requested" | "returning" | "logistics_operator_process"
 export interface Iro {
     id: number;
     uuid: string;
+    return_number: string;
     is_archive: boolean;
     return_date: string;
-    currency: string;
-    return_number: string;
+    confirmation_email_sent: boolean;
+    customer_internal_reference: string;
     status: IroStatus;
-    items: {
+    iro_items: {
         data: IroItem[];
     };
     notes: {
         data: Note[];
     };
     customer?: CustomerProfileProps;
-    customer_inhouse_reference: string;
+    opos?: Opo[];
 }
 export interface ManageIroFormProps {
     data: Iro;

package/dist/types/types/e-commerce/opo/types.d.ts

@@ -39,7 +39,7 @@ export interface Opo {
     };
     customer?: CustomerProfileProps;
     payments?: Payment[];
-    customer_inhouse_reference: string;
+    customer_internal_reference?: string;
     delivery_note: {
         name: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.626",
+  "version": "0.1.628",
   "description": "UMWD Component library",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/components/e-commerce/iro/CreateIROForm.tsx

@@ -34,7 +34,7 @@ export default function CreateIroForm({
   customerLabels,
   productLabels,
 }: CreateIroFormProps) {
-  const [orderConfirmed, setOrderConfirmed] = useState(false);
+  const [returnConfirmed, setReturnConfirmed] = useState(false);
   const [formState, formAction] = useFormState(createIroAction, INITIAL_STATE);
 
   useEffect(() => {
@@ -55,6 +55,9 @@ export default function CreateIroForm({
           <Grid item xs={12}>
             <Stack spacing={2}>
               <Typography variant="h6">Choose a customer</Typography>
+              <Typography variant="body2">
+                Select the customer for which you want to create a return order
+              </Typography>
               <CustomerSelector
                 customerLabels={customerLabels}
                 // onChangeCallback={onChangeCustomer}
@@ -69,14 +72,16 @@ export default function CreateIroForm({
                 management it should be left here
               </Typography>
               <TextField
-                id="customer_inhouse_reference"
-                name="customer_inhouse_reference"
+                id="customer_internal_reference"
+                name="customer_internal_reference"
                 sx={{ width: "100%" }}
               />
             </Stack>
           </Grid>
           <Grid item xs={12}>
-            <Typography variant="h6">Choose products for this order</Typography>
+            <Typography variant="h6">
+              Choose products that should be in this return order
+            </Typography>
             <IROItemFields productsArr={productLabels} />
           </Grid>
           {/* 
@@ -95,27 +100,26 @@ export default function CreateIroForm({
           <Grid item xs={12}>
             <Typography variant="h6">Confirm Order</Typography>
             <Typography>
-              Are you sure you want to confirm this order? Creating a order this
-              way will not create a shipping label nor will it invoke a payment.
-              It does however create an invoice which you can find under
-              invoices
+              Are you sure you want to confirm this return? Confirming this
+              order means you are sure the customer wants to return the products
+              and you are ready to process the return.
             </Typography>
             <Stack direction={"row"} spacing={1} alignItems={"center"}>
               <Checkbox
-                value={orderConfirmed}
-                checked={orderConfirmed}
-                onChange={() => setOrderConfirmed(!orderConfirmed)}
+                value={returnConfirmed}
+                checked={returnConfirmed}
+                onChange={() => setReturnConfirmed(!returnConfirmed)}
               />
-              {orderConfirmed && (
+              {returnConfirmed && (
                 <Typography color={"primary"}>
-                  I am sure I want to confirm this order
+                  I am sure I want to confirm this return order
                 </Typography>
               )}
             </Stack>
             <input
               name={"status"}
               type="hidden"
-              value={orderConfirmed ? "ordered" : "placed"}
+              value={returnConfirmed ? "returning" : "requested"}
             />
           </Grid>
           <Grid item xs={12}>

package/src/components/e-commerce/iro/IROItemFields.tsx

@@ -14,20 +14,23 @@ import { ProductName } from "../../../types/e-commerce/product/types";
 import dayjs from "dayjs";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { useTheme } from "@mui/material/styles";
+import { NewIroItem } from "../../../types/e-commerce/iro/types";
+import { ReturnReason } from "../../../types/e-commerce/iro/types";
 
 const getWeek = (date: Date) => {
   return dayjs(date).isoWeek();
 };
 
 export function IROItemFields({ productsArr }: { productsArr: ProductName[] }) {
-  const [items, setItems] = useState<
-    { product: ProductName; amount: number }[]
-  >([]);
+  const [items, setItems] = useState<NewIroItem[]>([]);
 
   const [nextProductName, setNextProductName] = useState<ProductName | null>(
     null
   );
   const [nextAmount, setNextAmount] = useState<number>(0);
+  const [nextReason, setNextReason] = useState<ReturnReason>("damaged");
+  const [nextOtherReason, setNextOtherReason] = useState<string>("");
+
   const [selectedProduct, setSelectedProduct] = useState<number[]>([]);
 
   const handleAddItem = () => {
@@ -35,14 +38,18 @@ export function IROItemFields({ productsArr }: { productsArr: ProductName[] }) {
       console.log("nextProductName or nextAmount is null");
       return;
     }
-    const newItem = {
-      product: nextProductName,
-      amount: nextAmount,
+    const newItem: NewIroItem = {
+      product: nextProductName.id,
+      returned_quantity: nextAmount,
+      reason: nextReason,
+      other_reason: nextOtherReason,
     };
     setItems([...items, newItem]);
     // reset the fields
     setNextProductName(null);
     setNextAmount(0);
+    setNextReason("damaged");
+    setNextOtherReason("");
     setSelectedProduct([]);
   };
 
@@ -56,17 +63,23 @@ export function IROItemFields({ productsArr }: { productsArr: ProductName[] }) {
   type parsedIroItem = {
     line_item_number: string;
     product: number;
-    ordered_quantity: number;
+    returned_quantity: number;
+    reason: ReturnReason;
+    other_reason: string;
   };
 
-  const parseItems = (
-    items: { product: ProductName; amount: number }[]
-  ): parsedIroItem[] => {
+  const parseItems = (items: NewIroItem[]): parsedIroItem[] => {
     return items.map((item, index) => {
       return {
         line_item_number: `${index + 1}.0.0`,
-        product: item.product.id,
-        ordered_quantity: item.amount,
+        product: item.product
+          ? typeof item.product === "number"
+            ? item.product
+            : item.product.id
+          : 0,
+        returned_quantity: item.returned_quantity,
+        reason: nextReason,
+        other_reason: nextOtherReason,
       };
     });
   };
@@ -98,9 +111,14 @@ export function IROItemFields({ productsArr }: { productsArr: ProductName[] }) {
               <TableRow key={index}>
                 <TableCell sx={[{ width: "15%" }]}>{index + 1}.0.0</TableCell>
                 <TableCell sx={[{ width: "70%" }]}>
-                  {item.product.product_number} | {item.product.title}
+                  {typeof item.product === "object"
+                    ? item.product.product_number
+                    : item.product}{" "}
+                  | {typeof item.product === "object" ? item.product.title : ""}
+                </TableCell>
+                <TableCell sx={{ width: "15%" }}>
+                  {item.returned_quantity}
                 </TableCell>
-                <TableCell sx={{ width: "15%" }}>{item.amount}</TableCell>
 
                 <TableCell align="right" sx={{ width: "5%" }}>
                   <IconButton onClick={() => handleDeleteItem(index)}>

package/src/components/e-commerce/iro/ManageIROForm.tsx

@@ -224,7 +224,7 @@ export default function ManageIROForm({
               <Typography variant="body1" width={"250px"}>
                 Purchase Order Number
               </Typography>
-              <Typography variant="body2">{data.iro_number}</Typography>
+              <Typography variant="body2">{data.return_number}</Typography>
             </Stack>
 
             <Stack direction="row" spacing={2}>

package/src/components/e-commerce/iro/RmaForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import { useFormState } from "react-dom";
 
 import { requestRmaAction } from "../../../data/actions/e-commerce/iro/requestRmaAction";
@@ -32,80 +32,159 @@ const INITIAL_STATE = {
   message: null,
 };
 
-interface ItemLineProps {
-  item: OpoItem;
-  addToRma: (item: NewIroItem) => void;
+interface ItemLinesProps {
+  items: OpoItem[];
 }
 
-const ItemLine: React.FC<ItemLineProps> = ({ item, addToRma }) => {
+const ItemLines: React.FC<ItemLinesProps> = ({ items }) => {
+  const [itemsToReturn, setItemsToReturn] = useState<NewIroItem[]>([]);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+
   const [showCustomReason, setShowCustomReason] = useState(false);
 
-  const [newReturnQuantity, setNewReturnQuantity] = useState<number>(0);
+  const updateItemsToReturn = (
+    index: number,
+    name: string,
+    newValue: number | string
+  ) => {
+    setItemsToReturn(
+      itemsToReturn.map((item, i) => {
+        if (i === index) {
+          return { ...item, [name]: newValue };
+        }
+        return item;
+      })
+    );
+  };
+
+  useEffect(() => {
+    if (items) {
+      setItemsToReturn(
+        items.map((item) => {
+          return {
+            line_item_number: item.line_item_number,
+            product: item.product,
+            ordered_quantity: item.ordered_quantity,
+            returned_quantity: 0,
+            reason: "damaged",
+            other_reason: "",
+          };
+        })
+      );
+    }
+  }, [items]);
+
+  const [parsedItems, setParsedItems] = useState<parsedIroItem[]>([]);
+
+  type parsedIroItem = {
+    line_item_number: string;
+    product: number;
+    returned_quantity: number;
+    reason: "damaged" | "not_as_described" | "wrong_item" | "other";
+    other_reason: string;
+  };
 
-  const [newReason, setNewReason] = useState<ReturnReason>();
+  const parseItems = (items: NewIroItem[]): parsedIroItem[] => {
+    return itemsToReturn.map((item, index) => {
+      return {
+        line_item_number: `${index + 1}.0.0`,
+        product:
+          typeof item.product === "object" && "id" in item.product
+            ? item.product.id
+            : 0,
+        returned_quantity: item.returned_quantity,
+        reason: item.reason,
+        other_reason: item.other_reason || "",
+      };
+    });
+  };
 
-  const [newOtherReason, setNewOtherReason] = useState<string>();
+  useEffect(() => {
+    if (itemsToReturn) {
+      setParsedItems(parseItems(itemsToReturn));
+    }
+  }, [itemsToReturn]);
 
   return (
-    <Stack spacing={1}>
-      <Typography variant="body1">
-        Line Item Number: {item.line_item_number}
-      </Typography>
-      <Typography variant="body1">
-        Part Number: {item.product?.product_number}
-      </Typography>
-      <Typography variant="body1">
-        Quantity Ordered: {item.ordered_quantity}
-      </Typography>
-      <TextualAmountUpdater
-        label="Quantity to return"
-        currentValue={0}
-        totalValue={item.ordered_quantity}
-        minNewValue={0}
-        maxNewValue={item.ordered_quantity}
-        handleChange={(newValue) => {
-          console.log(newValue);
-          setNewReturnQuantity(newValue);
-        }}
-        color="info"
-      />
-      <Typography variant="body1">Reason for return:</Typography>
-      <TextField
-        select
-        SelectProps={{
-          native: true,
-        }}
-        variant="outlined"
-        fullWidth
-        onChange={(e) => {
-          const reason = e.target.value;
-          if (reason === "other") {
-            setShowCustomReason(true);
-          } else {
-            setShowCustomReason(false);
-          }
-          setNewReason(reason as ReturnReason);
-        }}
-      >
-        <option value="damaged">Damaged</option>
-        <option value="not_as_described">Not as described</option>
-        <option value="wrong_item">Wrong item</option>
-        <option value="other">Other</option>
-      </TextField>
-      {showCustomReason && (
-        <TextField
-          label="Custom reason"
-          variant="outlined"
-          fullWidth
-          onChange={(e) => {
-            const customReason = e.target.value;
-            console.log(customReason);
-            setNewOtherReason(customReason);
-          }}
+    <Suspense fallback={<div>Loading...</div>}>
+      <Stack spacing={2}>
+        <Typography variant="h6">Items</Typography>
+        <Typography variant="body1">
+          from the items in the original order please select the items you'd
+          like to return
+        </Typography>
+        <input
+          type="hidden"
+          name="iro_items"
+          value={JSON.stringify(parsedItems)}
         />
-      )}
-      <Divider />
-    </Stack>
+        <Stack spacing={1}>
+          {items.map((item, index) => (
+            <Stack spacing={1}>
+              <Typography variant="body1">
+                Line Item Number: {item.line_item_number}
+              </Typography>
+              <Typography variant="body1">
+                Part Number: {item.product?.product_number}
+              </Typography>
+              <Typography variant="body1">
+                Quantity Ordered: {item.ordered_quantity}
+              </Typography>
+              {/*  */}
+              <TextualAmountUpdater
+                label="Quantity to return"
+                currentValue={item.ordered_quantity}
+                totalValue={item.ordered_quantity}
+                minNewValue={0}
+                maxNewValue={item.ordered_quantity}
+                handleChange={(newValue) => {
+                  console.log(newValue);
+                  updateItemsToReturn(index, "returned_quantity", newValue);
+                }}
+                color="info"
+              />
+              <Typography variant="body1">Reason for return:</Typography>
+              <TextField
+                value={itemsToReturn[index]?.reason}
+                select
+                SelectProps={{
+                  native: true,
+                }}
+                variant="outlined"
+                fullWidth
+                onChange={(e) => {
+                  const reason = e.target.value;
+                  if (reason === "other") {
+                    setShowCustomReason(true);
+                  } else {
+                    setShowCustomReason(false);
+                  }
+                  updateItemsToReturn(index, "reason", reason as ReturnReason);
+                }}
+              >
+                <option value="damaged">Damaged</option>
+                <option value="not_as_described">Not as described</option>
+                <option value="wrong_item">Wrong item</option>
+                <option value="other">Other</option>
+              </TextField>
+              {showCustomReason && (
+                <TextField
+                  value={itemsToReturn[index].other_reason}
+                  label="Custom reason"
+                  variant="outlined"
+                  fullWidth
+                  onChange={(e) => {
+                    const customReason = e.target.value;
+                    updateItemsToReturn(index, "other_reason", customReason);
+                  }}
+                />
+              )}
+              <Divider />
+            </Stack>
+          ))}
+        </Stack>
+      </Stack>
+    </Suspense>
   );
 };
 
@@ -146,12 +225,6 @@ export default function RmaForm({
 }: RMAFormProps) {
   const [formState, formAction] = useFormState(requestRmaAction, INITIAL_STATE);
 
-  const [items, setItems] = useState<NewIroItem[]>([]);
-
-  const handleAddItem = (item: NewIroItem) => {
-    setItems([...items, item]);
-  };
-
   /* const handleDeleteItem = (index: number) => {
     const newItems = items.filter((_, i) => i !== index);
     setItems(newItems);
@@ -163,7 +236,11 @@ export default function RmaForm({
     }
   }, [formState.data]);
 
-  console.log(opo);
+  console.log("opo", opo);
+
+  useEffect(() => {
+    console.log("formState", formState);
+  }, [formState]);
 
   return (
     <Box
@@ -177,6 +254,7 @@ export default function RmaForm({
           <Grid item xs={12}>
             <Typography variant="h6">RMA Form</Typography>
           </Grid>
+          <input type="hidden" name="opos" value={JSON.stringify([opo.id])} />
           <Grid item xs={12}>
             <Stack spacing={2}>
               <Typography variant="body1">
@@ -195,13 +273,9 @@ export default function RmaForm({
                   you'd like to return
                 </Typography>
                 <Stack spacing={1}>
-                  {opo.opo_items?.data.map((opoItem, index) => (
-                    <ItemLine
-                      key={index}
-                      item={opoItem}
-                      addToRma={handleAddItem}
-                    />
-                  ))}
+                  {opo.opo_items?.data && (
+                    <ItemLines items={opo.opo_items?.data} />
+                  )}
                 </Stack>
               </Stack>
             ) : (

package/src/components/e-commerce/iro/TextualManageIROForm.tsx

@@ -283,7 +283,7 @@ export default function TextualManageIROForm({
               <Typography variant="body1" width={"250px"}>
                 Purchase Order Number
               </Typography>
-              <Typography variant="body2">{data.iro_number}</Typography>
+              <Typography variant="body2">{data.return_number}</Typography>
             </Stack>
 
             <Stack direction="row" spacing={2}>

package/src/components/e-commerce/opo/CreateOpoForm.tsx

@@ -67,8 +67,8 @@ export default function CreateOpoForm({
                 management it should be left here
               </Typography>
               <TextField
-                id="customer_inhouse_reference"
-                name="customer_inhouse_reference"
+                id="customer_internal_reference"
+                name="customer_internal_reference"
                 sx={{ width: "100%" }}
               />
             </Stack>

package/src/components/e-commerce/opo/ManageOpoForm.tsx

@@ -244,7 +244,7 @@ export default function ManageOPOForm({
                 Custom reference
               </Typography>
               <Typography variant="body2">
-                {opo.customer_inhouse_reference}
+                {opo.customer_internal_reference}
               </Typography>
             </Stack>
 

package/src/components/e-commerce/opo/TextualManageOpoForm.tsx

@@ -298,7 +298,7 @@ export default function TextualManageOPOForm({
                 Custom reference
               </Typography>
               <Typography variant="body2">
-                {opo.customer_inhouse_reference}
+                {opo.customer_internal_reference}
               </Typography>
             </Stack>
 

package/src/data/actions/e-commerce/iro/createIroAction.ts

@@ -13,6 +13,15 @@ export async function createIroAction(prevState: any, formData: FormData) {
 
   const parsedFormData = parseFormData(formData);
 
+  console.log(parsedFormData);
+  /* if (parsedFormData.iro_items.length === 0) {
+    return {
+      ...prevState,
+      strapiErrors: null,
+      message: "Ops! Something went wrong. Please try again.",
+    };
+  }} */
+
   const responseData = await mutateData(
     "POST",
     `/api/iros/createAdmin`, //TODO create in CMS

package/src/data/actions/e-commerce/iro/requestRmaAction.ts

@@ -1,4 +1,5 @@
-"use server";
+"use client";
+//"use server";
 
 import { mutateData } from "../../../services/mutate-data";
 import { flattenAttributes } from "../../../../lib/utils";
@@ -12,6 +13,16 @@ export async function requestRmaAction(prevState: any, formData: FormData) {
 
   const parsedFormData = parseFormData(formData);
 
+  if (parsedFormData.data.iro_items) {
+    parsedFormData.data.iro_items = JSON.parse(parsedFormData.data.iro_items);
+  }
+
+  if (parsedFormData.data.opos) {
+    parsedFormData.data.opos = JSON.parse(parsedFormData.data.opos);
+  }
+
+  console.log("parsedFormData", parsedFormData);
+
   const responseData = await mutateData("POST", `/api/iros`, parsedFormData);
 
   if (!responseData) {

package/src/types/e-commerce/iro/types.ts

@@ -27,7 +27,8 @@ export interface IroItem {
 }
 
 export interface NewIroItem {
-  product?: Product;
+  line_item_number?: string;
+  product?: Product | number | ProductName;
   reason: ReturnReason;
   other_reason?: string;
   returned_quantity: number;
@@ -46,18 +47,18 @@ export type IroStatus =
 export interface Iro {
   id: number;
   uuid: string;
+  return_number: string;
   is_archive: boolean;
   return_date: string;
-  // confirmation_email_sent: boolean;
-  currency: string;
-  return_number: string;
+  confirmation_email_sent: boolean;
+  customer_internal_reference: string;
   status: IroStatus;
-  items: { data: IroItem[] };
+  iro_items: { data: IroItem[] };
   notes: {
     data: Note[];
   };
   customer?: CustomerProfileProps;
-  customer_inhouse_reference: string;
+  opos?: Opo[];
 }
 
 export interface ManageIroFormProps {

package/src/types/e-commerce/opo/types.ts

@@ -45,7 +45,7 @@ export interface Opo {
   };
   customer?: CustomerProfileProps;
   payments?: Payment[];
-  customer_inhouse_reference: string;
+  customer_internal_reference?: string;
   delivery_note: {
     name: string;
   };