Show all transaction in manual refund view (#4779)

* Order manual transaction view init * Connect RHF * Add sending mutation * Refactor, add intl, fix form validation * extract messages * Add changeset * Refactor transactions tiles * Improve loading and disable state, fix radio group control * Hadle no transactions * Write tests * extract messages * Refactor fragments * Move mutation to form component * Fix test * Show all transactions * Add changeset * Update tests * Extract messages * Fix typo * Improve tooltip
saleor · Apr 8, 2024 · 6342659 · 6342659
1 parent ae560bf
commit 6342659
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 77 deletions.
diff --git a/.changeset/shy-jars-flow.md b/.changeset/shy-jars-flow.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Show all transaction in manual refund view, disabled those that are not refundable
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -1107,9 +1107,6 @@
     "context": "vat not included in order price",
     "string": "does not apply"
   },
-  "5Kq4j7": {
-    "string": "There are not transactions to refund"
-  },
   "5O8EIz": {
     "context": "Authorize transactions instead of charging",
     "string": "Authorize transactions instead of charging"
@@ -2901,6 +2898,9 @@
     "context": "number of variants",
     "string": "Variants ({quantity})"
   },
+  "HW6Vef": {
+    "string": "This transaction is non-refundable"
+  },
   "HYC6cH": {
     "context": "input description",
     "string": "Threshold that cannot be exceeded even if per channel thresholds are still available"

diff --git a/...rders/components/OrderManualTransationRefundPage/OrderManualTransationRefundPage.test.tsx b/...rders/components/OrderManualTransationRefundPage/OrderManualTransationRefundPage.test.tsx
@@ -123,43 +123,6 @@ describe("OrderManualTransationRefundPage", () => {
     });
   });
 
-  it("should display info when not transactions and submit button disabled", async () => {
-    // Arrange &&  Act
-    render(
-      <OrderManualTransationRefundPage
-        currency="USD"
-        loading={false}
-        orderId="1"
-        transactions={[]}
-      />,
-      { wrapper: getWrapper() },
-    );
-
-    // Assert
-    expect(
-      screen.getByText(/there are not transactions to refund/i),
-    ).toBeInTheDocument();
-  });
-
-  it("should display info when not transactions", async () => {
-    // Arrange &&  Act
-    render(
-      <OrderManualTransationRefundPage
-        currency="USD"
-        loading={false}
-        orderId="1"
-        transactions={[]}
-      />,
-      { wrapper: getWrapper() },
-    );
-
-    // Assert
-    expect(
-      screen.getByText(/there are not transactions to refund/i),
-    ).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "save" })).toBeDisabled();
-  });
-
   it("should display skeleton when loading", async () => {
     // Arrange &&  Act
     render(

diff --git a/...fundPage/components/OrderManualTransationRefundTiles/OrderManualTransationRefundTiles.tsx b/...fundPage/components/OrderManualTransationRefundTiles/OrderManualTransationRefundTiles.tsx
@@ -1,11 +1,12 @@
 import { TransactionBaseItemFragment } from "@dashboard/graphql";
 import { OrderTransactionTile } from "@dashboard/orders/components/OrderTransactionTile";
-import { RadioGroup, Skeleton, Text } from "@saleor/macaw-ui-next";
+import { RadioGroup, Skeleton, Text, Tooltip } from "@saleor/macaw-ui-next";
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { FormattedMessage } from "react-intl";
 
 import { messages } from "../../messages";
+import { isTransactionRefundable } from "../../utils";
 import { ManualRefundForm } from "../OrderManualTransationRefundForm/manualRefundValidationSchema";
 
 interface OrderManualTransationRefundTilesProps {
@@ -24,14 +25,6 @@ export const OrderManualTransationRefundTiles = ({
     return <Skeleton marginTop={5} data-test-id="loading-skeleton" />;
   }
 
-  if (!transactions.length) {
-    return (
-      <Text color="default2">
-        <FormattedMessage {...messages.noTransactions} />
-      </Text>
-    );
-  }
-
   return (
     <>
       {!!error && (
@@ -52,28 +45,55 @@ export const OrderManualTransationRefundTiles = ({
             display="grid"
             gap={3}
           >
-            {transactions.map(transaction => (
-              <OrderTransactionTile error={!!error} key={transaction.id}>
-                <OrderTransactionTile.Header>
-                  <RadioGroup.Item
-                    {...field}
-                    id={transaction.id}
-                    value={transaction.id}
-                    error={!!error}
-                    padding={4}
-                  >
-                    <Text size={5} fontWeight="medium" padding={4}>
-                      {transaction?.name || "Transaction"}
-                    </Text>
-                  </RadioGroup.Item>
-                </OrderTransactionTile.Header>
-                <OrderTransactionTile.Events>
-                  {transaction.events.map(event => (
-                    <OrderTransactionTile.Event event={event} key={event.id} />
-                  ))}
-                </OrderTransactionTile.Events>
-              </OrderTransactionTile>
-            ))}
+            {transactions.map(transaction => {
+              const isRefundable = isTransactionRefundable(transaction);
+
+              return (
+                <OrderTransactionTile error={!!error} key={transaction.id}>
+                  <OrderTransactionTile.Header>
+                    <Tooltip>
+                      <Tooltip.Trigger>
+                        <RadioGroup.Item
+                          {...field}
+                          id={transaction.id}
+                          value={transaction.id}
+                          disabled={!isRefundable}
+                          error={!!error}
+                          padding={4}
+                        >
+                          <Text
+                            size={5}
+                            fontWeight="medium"
+                            padding={4}
+                            color={
+                              isRefundable ? "default1" : "defaultDisabled"
+                            }
+                          >
+                            {transaction?.name || "Transaction"}
+                          </Text>
+                        </RadioGroup.Item>
+                      </Tooltip.Trigger>
+                      <Tooltip.Content side="left">
+                        {!isRefundable && (
+                          <>
+                            <Tooltip.Arrow />
+                            <FormattedMessage {...messages.notRefundable} />
+                          </>
+                        )}
+                      </Tooltip.Content>
+                    </Tooltip>
+                  </OrderTransactionTile.Header>
+                  <OrderTransactionTile.Events>
+                    {transaction.events.map(event => (
+                      <OrderTransactionTile.Event
+                        event={event}
+                        key={event.id}
+                      />
+                    ))}
+                  </OrderTransactionTile.Events>
+                </OrderTransactionTile>
+              );
+            })}
           </RadioGroup>
         )}
       />

diff --git a/src/orders/components/OrderManualTransationRefundPage/messages.ts b/src/orders/components/OrderManualTransationRefundPage/messages.ts
@@ -22,9 +22,9 @@ export const messages = defineMessages({
     defaultMessage:
       " You are now selecting which granted refund you want to fullfill and send to a customer.",
   },
-  noTransactions: {
-    id: "5Kq4j7",
-    defaultMessage: "There are not transactions to refund",
+  notRefundable: {
+    id: "HW6Vef",
+    defaultMessage: "This transaction is non-refundable",
   },
 });
 

diff --git a/src/orders/components/OrderManualTransationRefundPage/utils.ts b/src/orders/components/OrderManualTransationRefundPage/utils.ts
@@ -0,0 +1,8 @@
+import {
+  TransactionActionEnum,
+  TransactionBaseItemFragment,
+} from "@dashboard/graphql";
+
+export const isTransactionRefundable = (
+  transaction: TransactionBaseItemFragment,
+) => transaction.actions.includes(TransactionActionEnum.REFUND);
diff --git a/src/orders/views/OrderManualTransationRefund/OrderManualTransationRefund.tsx b/src/orders/views/OrderManualTransationRefund/OrderManualTransationRefund.tsx
@@ -2,8 +2,6 @@ import { useOrderTransationsDataQuery } from "@dashboard/graphql";
 import { OrderManualTransationRefundPage } from "@dashboard/orders/components/OrderManualTransationRefundPage";
 import React from "react";
 
-import { filterRefundTransactions } from "./filter";
-
 interface OrderManualTransationRefundProps {
   orderId: string;
 }
@@ -21,7 +19,7 @@ const OrderManualTransationRefund = ({
   return (
     <OrderManualTransationRefundPage
       orderId={data?.order?.id ?? ""}
-      transactions={filterRefundTransactions(data?.order?.transactions ?? [])}
+      transactions={data?.order?.transactions ?? []}
       loading={loading}
       currency={data?.order?.total?.gross?.currency ?? ""}
     />