Prevent mutiple shiping refund

saleor · Oct 25, 2023 · 61fa693 · 61fa693
1 parent 7cc2947
commit 61fa693
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 23 deletions.
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -7511,6 +7511,9 @@
     "context": "status",
     "string": "Deactivated"
   },
+  "pNP2pn": {
+    "string": "Shipping has been already refunded"
+  },
   "pOUOnw": {
     "context": "tab name",
     "string": "All vouchers"

diff --git a/src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.tsx b/src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.tsx
@@ -90,6 +90,17 @@ const OrderGrantRefundPage: React.FC<OrderGrantRefundPageProps> = ({
 
   const totalSelectedPrice = calculateTotalPrice(state, order);
 
+  const hasShipingRefunded = () => {
+    if (initialData?.grantRefundId) {
+      return order?.grantedRefunds?.some(
+        refund =>
+          refund.shippingCostsIncluded &&
+          refund.id !== initialData.grantRefundId,
+      );
+    }
+
+    return order?.grantedRefunds?.some(refund => refund.shippingCostsIncluded);
+  };
   const handleSubmit = (e: React.FormEvent<any>) => {
     e.stopPropagation();
     e.preventDefault();
@@ -202,6 +213,7 @@ const OrderGrantRefundPage: React.FC<OrderGrantRefundPageProps> = ({
               submitState={submitState}
               isEdit={isEdit}
               submitDisabled={submitDisabled}
+              hasShipingRefunded={hasShipingRefunded()}
             />
           </DetailPageLayout.RightSidebar>
         </GrantRefundContext.Provider>

diff --git a/src/orders/components/OrderGrantRefundPage/components/RefundCard.tsx b/src/orders/components/OrderGrantRefundPage/components/RefundCard.tsx
@@ -12,7 +12,7 @@ import useLocale from "@dashboard/hooks/useLocale";
 import { buttonMessages } from "@dashboard/intl";
 import { Card, CardContent, Typography } from "@material-ui/core";
 import { useId } from "@reach/auto-id";
-import { Button } from "@saleor/macaw-ui-next";
+import { Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -27,6 +27,7 @@ interface RefundCardProps {
   submitState: ConfirmButtonTransitionState;
   isEdit: boolean;
   submitDisabled: boolean;
+  hasShipingRefunded: boolean;
 }
 
 export const RefundCard = ({
@@ -35,6 +36,7 @@ export const RefundCard = ({
   submitState,
   isEdit,
   submitDisabled,
+  hasShipingRefunded,
 }: RefundCardProps) => {
   const intl = useIntl();
   const { locale } = useLocale();
@@ -56,30 +58,41 @@ export const RefundCard = ({
           <FormattedMessage {...grantRefundPageMessages.refundSubtitle} />
         </Typography>
         {order ? (
-          <div className={classes.shippingCostLine}>
-            <Checkbox
-              id={`checkbox-${id}`}
-              checked={state.refundShipping}
-              onChange={() => dispatch({ type: "toggleRefundShipping" })}
-              data-test-id="refundShippingCheckbox"
-            />
-            <label htmlFor={`checkbox-${id}`}>
-              {!currency ? (
-                <Skeleton />
-              ) : (
+          <>
+            <div className={classes.shippingCostLine}>
+              <Checkbox
+                id={`checkbox-${id}`}
+                checked={state.refundShipping}
+                onChange={() => dispatch({ type: "toggleRefundShipping" })}
+                data-test-id="refundShippingCheckbox"
+                disabled={hasShipingRefunded}
+              />
+              <label htmlFor={`checkbox-${id}`}>
+                {!currency ? (
+                  <Skeleton />
+                ) : (
+                  <FormattedMessage
+                    {...grantRefundPageMessages.refundShipment}
+                    values={{
+                      currency,
+                      amount: formatMoneyAmount(
+                        order?.shippingPrice?.gross,
+                        locale,
+                      ),
+                    }}
+                  />
+                )}
+              </label>
+            </div>
+            {hasShipingRefunded && (
+              <Text variant="caption" color="textNeutralDisabled">
                 <FormattedMessage
-                  {...grantRefundPageMessages.refundShipment}
-                  values={{
-                    currency,
-                    amount: formatMoneyAmount(
-                      order?.shippingPrice?.gross,
-                      locale,
-                    ),
-                  }}
+                  defaultMessage="Shipping has been already refunded"
+                  id="pNP2pn"
                 />
-              )}
-            </label>
-          </div>
+              </Text>
+            )}
+          </>
         ) : (
           <div className={classes.shippingCostLineLoading}>
             <Skeleton />