Manual order transaction refund (#4774)

* 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
saleor · Apr 5, 2024 · d46265d · d46265d
1 parent 5f1ac2a
commit d46265d
Show file tree

Hide file tree

Showing 31 changed files with 928 additions and 59 deletions.
diff --git a/.changeset/nice-pets-hide.md b/.changeset/nice-pets-hide.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Introduce view for manual refund transaction
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -295,6 +295,9 @@
     "context": "input label",
     "string": "Global threshold"
   },
+  "/jJLYy": {
+    "string": "Transactions"
+  },
   "/kWzY1": {
     "string": "Are you sure you want to delete this address from users address book?"
   },
@@ -1104,6 +1107,9 @@
     "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"
@@ -1995,6 +2001,9 @@
     "context": "no webhooks message",
     "string": "No webhooks found"
   },
+  "Bl6896": {
+    "string": "Refund amount"
+  },
   "BooQvo": {
     "context": "navigator placeholder",
     "string": "Type {key} to see available actions"
@@ -2096,6 +2105,9 @@
     "context": "section header",
     "string": "Preferences"
   },
+  "CNblvR": {
+    "string": "Refund fullfilling"
+  },
   "CRAfpd": {
     "context": "gift card export dialog confirm button label",
     "string": "Export codes"
@@ -2467,6 +2479,9 @@
     "context": "error message",
     "string": "Error details: {message}"
   },
+  "F2kF9e": {
+    "string": "You must select transaction that you want to refund"
+  },
   "F3Upht": {
     "string": "Product type deleted"
   },
@@ -4537,6 +4552,9 @@
     "context": "checkbox label, fulfillment approval",
     "string": "Send shipment details to customer"
   },
+  "SuqHws": {
+    "string": "You are now selecting which granted refund you want to fullfill and send to a customer."
+  },
   "Sxzua5": {
     "context": "order payment",
     "string": "Settled"
@@ -6164,6 +6182,9 @@
   "dM86a2": {
     "string": "No categories found"
   },
+  "dO05fh": {
+    "string": "Select a refund you want to fullfill"
+  },
   "dOQB9o": {
     "context": "payment status",
     "string": "Cancelled"
@@ -9199,6 +9220,9 @@
     "context": "deleted multiple attributes",
     "string": "Attributes successfully deleted"
   },
+  "z3w/oL": {
+    "string": "You must provide amount value"
+  },
   "z8jo8h": {
     "context": "button",
     "string": "View products"

diff --git a/playwright/pages/dialogs/productCreateDialog.ts b/playwright/pages/dialogs/productCreateDialog.ts
@@ -19,8 +19,7 @@ export class ProductCreateDialog {
   async selectProductTypeWithVariants(productType: string = "Beer") {
     await this.dialogProductTypeInput.fill(productType);
     await this.promptedOptions.filter({ hasText: productType }).first().click();
-    await this.promptedOptions.waitFor({ state: "hidden", timeout: 30000});
-    await this.confirmButton.waitFor({ state: "visible", timeout: 30000});
+    await this.confirmButton.waitFor({ state: "visible", timeout: 30000 });
   }
   async clickConfirmButton() {
     await this.confirmButton.click();

diff --git a/src/fragments/orders.ts b/src/fragments/orders.ts
@@ -476,16 +476,23 @@ export const fragmentOrderLineStockData = gql`
   }
 `;
 
-export const transactionEvent = gql`
-  fragment TransactionEvent on TransactionEvent {
+export const transactionBaseEvent = gql`
+  fragment TransactionBaseEvent on TransactionEvent {
     id
     pspReference
     amount {
       ...Money
     }
+    externalUrl
     type
     message
     createdAt
+  }
+`;
+
+export const transactionEvent = gql`
+  fragment TransactionEvent on TransactionEvent {
+    ...TransactionBaseEvent
     createdBy {
       ... on User {
         ...StaffMemberAvatar
@@ -498,12 +505,21 @@ export const transactionEvent = gql`
   }
 `;
 
+export const transactionBaseItemFragment = gql`
+  fragment TransactionBaseItem on TransactionItem {
+    id
+    name
+    actions
+    events {
+      ...TransactionBaseEvent
+    }
+  }
+`;
+
 export const transactionItemFragment = gql`
   fragment TransactionItem on TransactionItem {
-    id
+    ...TransactionBaseItem
     pspReference
-    actions
-    name
     externalUrl
     events {
       ...TransactionEvent

diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
@@ -1433,6 +1433,29 @@ export const RefundOrderLineFragmentDoc = gql`
   }
 }
     ${MoneyFragmentDoc}`;
+export const TransactionBaseEventFragmentDoc = gql`
+    fragment TransactionBaseEvent on TransactionEvent {
+  id
+  pspReference
+  amount {
+    ...Money
+  }
+  externalUrl
+  type
+  message
+  createdAt
+}
+    ${MoneyFragmentDoc}`;
+export const TransactionBaseItemFragmentDoc = gql`
+    fragment TransactionBaseItem on TransactionItem {
+  id
+  name
+  actions
+  events {
+    ...TransactionBaseEvent
+  }
+}
+    ${TransactionBaseEventFragmentDoc}`;
 export const StaffMemberFragmentDoc = gql`
     fragment StaffMember on User {
   id
@@ -1458,14 +1481,7 @@ export const AppAvatarFragmentDoc = gql`
     `;
 export const TransactionEventFragmentDoc = gql`
     fragment TransactionEvent on TransactionEvent {
-  id
-  pspReference
-  amount {
-    ...Money
-  }
-  type
-  message
-  createdAt
+  ...TransactionBaseEvent
   createdBy {
     ... on User {
       ...StaffMemberAvatar
@@ -1476,15 +1492,13 @@ export const TransactionEventFragmentDoc = gql`
   }
   externalUrl
 }
-    ${MoneyFragmentDoc}
+    ${TransactionBaseEventFragmentDoc}
 ${StaffMemberAvatarFragmentDoc}
 ${AppAvatarFragmentDoc}`;
 export const TransactionItemFragmentDoc = gql`
     fragment TransactionItem on TransactionItem {
-  id
+  ...TransactionBaseItem
   pspReference
-  actions
-  name
   externalUrl
   events {
     ...TransactionEvent
@@ -1514,7 +1528,8 @@ export const TransactionItemFragmentDoc = gql`
     ...Money
   }
 }
-    ${TransactionEventFragmentDoc}
+    ${TransactionBaseItemFragmentDoc}
+${TransactionEventFragmentDoc}
 ${MoneyFragmentDoc}`;
 export const OrderPaymentFragmentDoc = gql`
     fragment OrderPayment on Payment {
@@ -11270,8 +11285,12 @@ export type OrderSettingsUpdateMutationHookResult = ReturnType<typeof useOrderSe
 export type OrderSettingsUpdateMutationResult = Apollo.MutationResult<Types.OrderSettingsUpdateMutation>;
 export type OrderSettingsUpdateMutationOptions = Apollo.BaseMutationOptions<Types.OrderSettingsUpdateMutation, Types.OrderSettingsUpdateMutationVariables>;
 export const OrderTransactionRequestActionDocument = gql`
-    mutation OrderTransactionRequestAction($action: TransactionActionEnum!, $transactionId: ID!) {
-  transactionRequestAction(actionType: $action, id: $transactionId) {
+    mutation OrderTransactionRequestAction($action: TransactionActionEnum!, $transactionId: ID!, $amount: PositiveDecimal) {
+  transactionRequestAction(
+    actionType: $action
+    id: $transactionId
+    amount: $amount
+  ) {
     errors {
       ...TransactionRequestActionError
     }
@@ -11295,6 +11314,7 @@ export type OrderTransactionRequestActionMutationFn = Apollo.MutationFunction<Ty
  *   variables: {
  *      action: // value for 'action'
  *      transactionId: // value for 'transactionId'
+ *      amount: // value for 'amount'
  *   },
  * });
  */
@@ -12126,6 +12146,50 @@ export function useOrderRefundDataLazyQuery(baseOptions?: ApolloReactHooks.LazyQ
 export type OrderRefundDataQueryHookResult = ReturnType<typeof useOrderRefundDataQuery>;
 export type OrderRefundDataLazyQueryHookResult = ReturnType<typeof useOrderRefundDataLazyQuery>;
 export type OrderRefundDataQueryResult = Apollo.QueryResult<Types.OrderRefundDataQuery, Types.OrderRefundDataQueryVariables>;
+export const OrderTransationsDataDocument = gql`
+    query OrderTransationsData($orderId: ID!) {
+  order(id: $orderId) {
+    id
+    transactions {
+      ...TransactionBaseItem
+    }
+    total {
+      gross {
+        ...Money
+      }
+    }
+  }
+}
+    ${TransactionBaseItemFragmentDoc}
+${MoneyFragmentDoc}`;
+
+/**
+ * __useOrderTransationsDataQuery__
+ *
+ * To run a query within a React component, call `useOrderTransationsDataQuery` and pass it any options that fit your needs.
+ * When your component renders, `useOrderTransationsDataQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useOrderTransationsDataQuery({
+ *   variables: {
+ *      orderId: // value for 'orderId'
+ *   },
+ * });
+ */
+export function useOrderTransationsDataQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.OrderTransationsDataQuery, Types.OrderTransationsDataQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.OrderTransationsDataQuery, Types.OrderTransationsDataQueryVariables>(OrderTransationsDataDocument, options);
+      }
+export function useOrderTransationsDataLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.OrderTransationsDataQuery, Types.OrderTransationsDataQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.OrderTransationsDataQuery, Types.OrderTransationsDataQueryVariables>(OrderTransationsDataDocument, options);
+        }
+export type OrderTransationsDataQueryHookResult = ReturnType<typeof useOrderTransationsDataQuery>;
+export type OrderTransationsDataLazyQueryHookResult = ReturnType<typeof useOrderTransationsDataLazyQuery>;
+export type OrderTransationsDataQueryResult = Apollo.QueryResult<Types.OrderTransationsDataQuery, Types.OrderTransationsDataQueryVariables>;
 export const ChannelUsabilityDataDocument = gql`
     query ChannelUsabilityData($channel: String!) {
   products(channel: $channel) {