(wip)migrate manual transaction modal to rhf & new macaw-ui

src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx

@@ -1,16 +1,8 @@
 // @ts-strict-ignore
 import BackButton from "@dashboard/components/BackButton";
+import { DashboardModal } from "@dashboard/components/Modal";
 import { commonMessages } from "@dashboard/intl";
 import { DialogProps } from "@dashboard/types";
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-import { Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -20,20 +12,6 @@ import {
 } from "../OrderManualTransactionForm";
 import { manualTransactionMessages } from "./messages";
 
-const useStyles = makeStyles(
-  theme => ({
-    form: {
-      display: "contents",
-    },
-    formWrapper: {
-      display: "flex",
-      flexDirection: "column",
-      gap: theme.spacing(2),
-    },
-  }),
-  { name: "OrderManualTransactionDialog" },
-);
-
 type OrderManualTransactionDialogProps = {
   dialogProps: DialogProps;
 } & OrderManualTransactionFormProps;
@@ -43,48 +21,37 @@ export const OrderManualTransactionDialog: React.FC<OrderManualTransactionDialog
   ...props
 }) => {
   const intl = useIntl();
-  const classes = useStyles();
   const { onClose } = dialogProps;
 
   return (
     <OrderManualTransactionForm {...props}>
-      <Dialog onClose={onClose} {...dialogProps} fullWidth maxWidth="xs">
-        <DialogTitle>
-          <Text size={5} fontWeight="bold">
+      <DashboardModal onChange={onClose} {...dialogProps}>
+        <DashboardModal.Content>
+          <DashboardModal.Title>
             <FormattedMessage {...manualTransactionMessages.dialogTitle} />
-          </Text>
-        </DialogTitle>
-        <OrderManualTransactionForm.Form className={classes.form}>
-          <DialogContent>
-            <DialogContentText>
-              <FormattedMessage {...manualTransactionMessages.dialogDescription} />
-            </DialogContentText>
-            <div className={classes.formWrapper}>
-              <OrderManualTransactionForm.DescriptionField
-                label={intl.formatMessage(commonMessages.description)}
-                fullWidth
-              />
-              <OrderManualTransactionForm.PspReferenceField
-                label={intl.formatMessage(commonMessages.pspReferenceOptional)}
-                fullWidth
-              />
-              <OrderManualTransactionForm.PriceInputField
-                label={intl.formatMessage(manualTransactionMessages.transactionAmount)}
-              />
-              <OrderManualTransactionForm.ErrorText />
-            </div>
-          </DialogContent>
-          <DialogActions>
-            <BackButton onClick={onClose} />
+          </DashboardModal.Title>
+          <OrderManualTransactionForm.Form>
+            <FormattedMessage {...manualTransactionMessages.dialogDescription} />
+            <OrderManualTransactionForm.DescriptionField
+              label={intl.formatMessage(commonMessages.description)}
+            />
+            <OrderManualTransactionForm.PspReferenceField
+              label={intl.formatMessage(commonMessages.pspReferenceOptional)}
+            />
+            <OrderManualTransactionForm.PriceInputField
+              label={intl.formatMessage(manualTransactionMessages.transactionAmount)}
+            />
+            <OrderManualTransactionForm.ErrorText />
+            <DashboardModal.Actions>
+              <BackButton onClick={onClose} />
 
-            <OrderManualTransactionForm.SubmitButton size="medium">
-              <Text fontWeight="medium" color="buttonDefaultPrimary">
+              <OrderManualTransactionForm.SubmitButton size="medium">
                 <FormattedMessage {...manualTransactionMessages.submitButton} />
-              </Text>
-            </OrderManualTransactionForm.SubmitButton>
-          </DialogActions>
-        </OrderManualTransactionForm.Form>
-      </Dialog>
+              </OrderManualTransactionForm.SubmitButton>
+            </DashboardModal.Actions>
+          </OrderManualTransactionForm.Form>
+        </DashboardModal.Content>
+      </DashboardModal>
     </OrderManualTransactionForm>
   );
 };

src/orders/components/OrderManualTransactionForm/OrderManualTransactionForm.tsx

@@ -1,10 +1,11 @@
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import React from "react";
+import { FormProvider } from "react-hook-form";
 
 import { ManualTransactionContext } from "./context";
-import { useManualRefund } from "./hooks";
+import { useApiError, useManualRefund } from "./hooks";
 
-interface OrderManualTransactionSubmitVariables {
+export interface OrderManualTransactionSubmitVariables {
   amount: number;
   description: string;
   pspReference: string | undefined;
@@ -15,24 +16,34 @@ export interface OrderManualTransactionFormProps {
   currency: string;
   submitState: ConfirmButtonTransitionState;
   error: string | undefined;
-  initialData?: Partial<OrderManualTransactionSubmitVariables>;
 }
 
 export const OrderManualTransactionForm: React.FC<OrderManualTransactionFormProps> = ({
   children,
   ...props
 }) => {
-  const { submitState, initialData } = props;
-  const hookData = useManualRefund({ submitState, initialData });
+  const methods = useManualRefund();
+
+  React.useEffect(() => {
+    if (props.error) {
+      methods.setError("root", {
+        type: "manual",
+        message: props.error,
+      });
+    }
+  }, [props.error, methods]);
+
+  // useApiError(props.error);
+
+  React.useEffect(() => {
+    if (methods.formState.isSubmitSuccessful) {
+      methods.reset();
+    }
+  }, [methods.formState.isSubmitSuccessful]);
 
   return (
-    <ManualTransactionContext.Provider
-      value={{
-        ...hookData,
-        ...props,
-      }}
-    >
-      {children}
+    <ManualTransactionContext.Provider value={props}>
+      <FormProvider {...methods}>{children}</FormProvider>
     </ManualTransactionContext.Provider>
   );
 };

src/orders/components/OrderManualTransactionForm/components/DescriptionField.tsx

@@ -1,27 +1,21 @@
 // @ts-strict-ignore
-import { TextField, TextFieldProps } from "@material-ui/core";
+import { Input, InputProps } from "@saleor/macaw-ui-next";
 import React from "react";
+import { Controller } from "react-hook-form";
 
 import { useManualTransactionContext } from "../context";
 
-export const DescriptionField: React.FC<Omit<TextFieldProps, "onChange" | "value">> = ({
+export const DescriptionField: React.FC<Omit<InputProps, "onChange" | "value">> = ({
   disabled,
   ...props
 }) => {
-  const { submitState, handleChangeDescription, description } = useManualTransactionContext();
+  const { control } = useManualTransactionContext();
 
   return (
-    <TextField
-      variant="outlined"
-      {...props}
-      disabled={submitState === "loading" || disabled}
-      onChange={handleChangeDescription}
-      value={description}
-      inputProps={{
-        ...props.inputProps,
-        maxLength: 512,
-        "data-test-id": "transactionDescription",
-      }}
+    <Controller
+      name="description"
+      control={control}
+      render={({ field }) => <Input {...props} {...field} data-test-id="transactionDescription" />}
     />
   );
 };

src/orders/components/OrderManualTransactionForm/components/ErrorText.tsx

@@ -1,19 +1,23 @@
 // @ts-strict-ignore
-import { Typography, TypographyProps } from "@material-ui/core";
+import { Box, Text, TextProps } from "@saleor/macaw-ui-next";
 import React from "react";
 
 import { useManualTransactionContext } from "../context";
 
-export const ErrorText: React.FC<TypographyProps> = props => {
-  const { error } = useManualTransactionContext();
+export const ErrorText: React.FC<Omit<TextProps, "children">> = props => {
+  const { formState } = useManualTransactionContext();
 
-  if (!error) {
+  if (!formState.errors) {
     return null;
   }
 
   return (
-    <Typography color="error" variant="body2" {...props}>
-      {error}
-    </Typography>
+    <Box display="flex" flexDirection="column" gap={2}>
+      {Object.values(formState.errors).map((field, key) => (
+        <Text color="critical1" key={key} {...props}>
+          {field.message}
+        </Text>
+      ))}
+    </Box>
   );
 };

src/orders/components/OrderManualTransactionForm/components/Form.tsx

@@ -1,23 +1,17 @@
 // @ts-strict-ignore
+import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 
 import { useManualTransactionContext } from "../context";
 
-export const Form: React.FC<React.HTMLProps<HTMLFormElement>> = ({ children, ...props }) => {
-  const { amount, description, pspReference, onAddTransaction } = useManualTransactionContext();
+export const Form: React.FC = ({ children }) => {
+  const { handleSubmit, onAddTransaction } = useManualTransactionContext();
 
   return (
-    <form
-      {...props}
-      onSubmit={e => {
-        e.preventDefault();
-
-        if (amount) {
-          onAddTransaction({ amount, description, pspReference });
-        }
-      }}
-    >
-      {children}
+    <form onSubmit={handleSubmit(onAddTransaction)}>
+      <Box display="flex" flexDirection="column" gap={3}>
+        {children}
+      </Box>
     </form>
   );
 };

src/orders/components/OrderManualTransactionForm/components/PriceInputField.tsx

@@ -1,22 +1,34 @@
 // @ts-strict-ignore
-import PriceField, { PriceFieldProps } from "@dashboard/components/PriceField";
+import { Input, InputProps, Text } from "@saleor/macaw-ui-next";
 import React from "react";
+import { Controller } from "react-hook-form";
 
 import { useManualTransactionContext } from "../context";
 
-export const PriceInputField: React.FC<
-  Omit<PriceFieldProps, "currencySymbol" | "onChange" | "value">
-> = ({ disabled, ...props }) => {
-  const { currency, submitState, handleChangeAmount, amount } = useManualTransactionContext();
+export const PriceInputField: React.FC<Omit<InputProps, "onChange" | "value">> = ({
+  disabled,
+  ...props
+}) => {
+  const {
+    control,
+    currency,
+    formState: { errors },
+  } = useManualTransactionContext();
 
   return (
-    <PriceField
-      {...props}
-      currencySymbol={currency}
-      disabled={submitState === "loading" || disabled}
-      onChange={handleChangeAmount}
-      value={amount?.toString() ?? ""}
-      data-test-id="transactAmountInput"
+    <Controller
+      control={control}
+      name="amount"
+      render={({ field }) => (
+        <Input
+          {...field}
+          {...props}
+          type="number"
+          data-test-id="transactAmountInput"
+          endAdornment={<Text size={2}>{currency}</Text>}
+          error={!!errors.amount}
+        />
+      )}
     />
   );
 };