umwd-components 0.1.630 → 0.1.631

package/dist/types/components/SubmitButton.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { SxProps, Theme } from "@mui/material/styles";
-interface SubmitButtonProps {
+import { ButtonProps } from "@mui/material/Button";
+interface SubmitButtonProps extends ButtonProps {
     text: string;
     loadingText: string;
     loading?: boolean;
     sx?: SxProps<Theme>;
 }
-export declare function SubmitButton({ text, loadingText, loading, sx, }: Readonly<SubmitButtonProps>): React.JSX.Element;
+export declare function SubmitButton({ text, loadingText, loading, sx, ...props }: Readonly<SubmitButtonProps>): React.JSX.Element;
 export {};

package/package.json

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

package/src/components/SubmitButton.tsx

@@ -2,20 +2,24 @@
 import React from "react";
 import { useFormStatus } from "react-dom";
 import Button from "@mui/material/Button";
-import { SxProps, Theme } from "@mui/material/styles";
+import { ComponentsProps, SxProps, Theme } from "@mui/material/styles";
+import { ButtonProps } from "@mui/material/Button";
 
-interface SubmitButtonProps {
+interface SubmitButtonProps extends ButtonProps {
   text: string;
   loadingText: string;
   loading?: boolean;
   sx?: SxProps<Theme>;
 }
 
+// TODO at props so disabled can be set from the outside
+
 export function SubmitButton({
   text,
   loadingText,
   loading,
   sx = {},
+  ...props
 }: Readonly<SubmitButtonProps>) {
   const status = useFormStatus();
   return (
@@ -28,6 +32,7 @@ export function SubmitButton({
         // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
+      {...props}
     >
       {status.pending || loading ? loadingText : text}
     </Button>

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

@@ -24,6 +24,11 @@ import TextualAmountUpdater from "../../../components/common/TextualAmountUpdate
 import { OpoItem } from "../../../types/e-commerce/opo/types";
 import { ProductName } from "../../../types/e-commerce/product/types";
 import { IroItem, NewIroItem } from "../../../types/e-commerce/iro/types";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
 
 const INITIAL_STATE = {
   zodErrors: null,
@@ -41,6 +46,7 @@ const ItemLines: React.FC<ItemLinesProps> = ({ items }) => {
   const [selectedItems, setSelectedItems] = useState<number[]>([]);
 
   const [showCustomReason, setShowCustomReason] = useState(false);
+  const [unopenedConfirmation, setUnopenedConfirmation] = useState(false);
 
   const updateItemsToReturn = (
     index: number,
@@ -162,7 +168,7 @@ const ItemLines: React.FC<ItemLinesProps> = ({ items }) => {
                   updateItemsToReturn(index, "reason", reason as ReturnReason);
                 }}
               >
-                <option value="damaged">Damaged</option>
+                <option value="damaged">Damaged on arrival</option>
                 <option value="not_as_described">Not as described</option>
                 <option value="wrong_item">Wrong item</option>
                 <option value="other">Other</option>
@@ -179,6 +185,16 @@ const ItemLines: React.FC<ItemLinesProps> = ({ items }) => {
                   }}
                 />
               )}
+              {/* TODO ??? <Checkbox
+                checked={selectedItems.includes(index)}
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setSelectedItems([...selectedItems, index]);
+                  } else {
+                    setSelectedItems(selectedItems.filter((i) => i !== index));
+                  }
+                }}
+              /> */}
               <Divider />
             </Stack>
           ))}
@@ -188,11 +204,53 @@ const ItemLines: React.FC<ItemLinesProps> = ({ items }) => {
   );
 };
 
+/* interface ConfirmRMADialogProps {
+  data: any;
+} */
+
 interface ConfirmRMADialogProps {
+  open: boolean;
+  onClose: () => void;
   data: any;
 }
 
-const ConfirmRMADialog = ({ data }: ConfirmRMADialogProps) => {
+const ConfirmRMADialog: React.FC<ConfirmRMADialogProps> = ({
+  open,
+  onClose,
+  data,
+}) => {
+  const [missingConfirmations, setMissingConfirmations] = useState(true);
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Confirm RMA</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          Are you sure you want to request a return merchandise authorization
+          for the selected items?
+        </DialogContentText>
+        <Checkbox
+          onChange={(e) => setMissingConfirmations(!e.target.checked)}
+        />
+        <Typography variant="body1">
+          I understand that all returned items must be unused and unopened
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <SubmitButton
+          text="Yes"
+          loadingText="Loading..."
+          disabled={missingConfirmations}
+        />
+        <Button onClick={onClose}>No</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+/* const ConfirmRMADialog = ({ data }: ConfirmRMADialogProps) => {
+  const [missingConfirmations, setMissingConfirmations] = useState(true);
+
   return (
     <Stack spacing={2}>
       <Typography variant="h6">Confirm RMA</Typography>
@@ -200,13 +258,21 @@ const ConfirmRMADialog = ({ data }: ConfirmRMADialogProps) => {
         Are you sure you want to request a return merchandise authorization for
         the selected items?
       </Typography>
+      <Checkbox onChange={(e) => setMissingConfirmations(!e.target.checked)} />
+      <Typography variant="body1">
+        I understand that all returned items must be unused and unopened
+      </Typography>
       <Stack direction="row" spacing={2}>
-        <SubmitButton text="Yes" loadingText="Loading..." />
+        <SubmitButton
+          text="Yes"
+          loadingText="Loading..."
+          disabled={missingConfirmations}
+        />
         <Button>No</Button>
       </Stack>
     </Stack>
   );
-};
+}; */
 
 /* type parsedIroItem = {
   line_item_number: string;
@@ -230,18 +296,14 @@ export default function RmaForm({
     setItems(newItems);
   }; */
 
+  const [open, setOpen] = useState(false);
+
   useEffect(() => {
     if (formState?.data && revalidateCallback) {
       revalidateCallback();
     }
   }, [formState.data]);
 
-  console.log("opo", opo);
-
-  useEffect(() => {
-    console.log("formState", formState);
-  }, [formState]);
-
   return (
     <Box
       sx={[
@@ -266,31 +328,29 @@ export default function RmaForm({
           </Grid>
           <Grid item xs={12}>
             {opo.opo_items?.data ? (
-              <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>
-                <Stack spacing={1}>
-                  {opo.opo_items?.data && (
-                    <ItemLines items={opo.opo_items?.data} />
-                  )}
-                </Stack>
+              <Stack spacing={1}>
+                {opo.opo_items?.data && (
+                  <ItemLines items={opo.opo_items?.data} />
+                )}
               </Stack>
             ) : (
               <Typography variant="body1">No items</Typography>
             )}
           </Grid>
-          <ConfirmRMADialog data={formState} />
+          <ConfirmRMADialog
+            data={formState}
+            open={open}
+            onClose={() => setOpen(!open)}
+          />
           <Grid item xs={12}>
-            <SubmitButton text="Request RMA" loadingText="Loading..." />
+            <Button onClick={() => setOpen(!open)}>Request RMA</Button>
+            {/* <SubmitButton text="Request RMA" loadingText="Loading..." />
             {formState?.strapiErrors !== null && (
               <StrapiErrors error={formState?.strapiErrors} />
             )}
             {formState?.message && (
               <Alert severity="error">{formState?.message}</Alert>
-            )}
+            )} */}
           </Grid>
         </Grid>
       </form>