Remove transactions feature flag (#3557)

* Update schema, remove transaction specific files

* Merge `.transaction` queries and mutations into regular files

* Merge OrderDetails fragments

* Remove usage of `.transaction` graphl types

* Update fixtures

* Remove usage of useFlag, remove duplicated queries & mutations

* Fix displayed event type for INFO

* Remove type alias from order/types.ts, remove type casting

* Fix failing tests

* Add preview label and better description in Channel settings

* Update button in GrantRefund page

* Fix missing data-test-id

* Extract messages

* Visual fixes

* Revert changes to generated files

* Revert changes to generated files

* Fix psp reference hover

* Fix colors on manu refunds screen

* Revert "Fix colors on manu refunds screen"

This reverts commit 02302930ab502a4fdc3c71558532a2d74f2e32c9.

---------

Co-authored-by: andrzejewsky <vox3r69@gmail.com>
Co-authored-by: Michal Miszczyszyn <michal@mmiszy.pl>

locale/defaultMessages.json

@@ -448,6 +448,9 @@
     "context": "sum of all pending refunds inside an order",
     "string": "Pending refunds"
   },
+  "1+ROfp": {
+    "string": "Transaction"
+  },
   "1/oG76": {
     "context": "dialog header",
     "string": "Delete Sale"
@@ -972,6 +975,9 @@
     "context": "content",
     "string": "Saleor couldn’t fetch crucial information regarding installation. Without those System can’t install the app in your Saleor. Please use the button below to get back to system’s dashboard."
   },
+  "50lR2F": {
+    "string": "- used by Payment Plugins"
+  },
   "51HE+Q": {
     "string": "No sales found"
   },
@@ -2298,9 +2304,6 @@
     "context": "sale name",
     "string": "Name"
   },
-  "F5OqYa": {
-    "string": "Creates a single payment when unchecked"
-  },
   "F69lwk": {
     "context": "settings menu item",
     "string": "Settings"
@@ -2421,6 +2424,9 @@
   "FpIcp9": {
     "string": "No customers found"
   },
+  "Fqe4aB": {
+    "string": "- used by Payment Apps"
+  },
   "Ftz7VI": {
     "context": "input label, transaction amount",
     "string": "Transaction amount"
@@ -3306,6 +3312,9 @@
     "context": "custom app token key",
     "string": "Key"
   },
+  "MDOw8D": {
+    "string": "\"Mark as paid\" feature creates a"
+  },
   "MHVglr": {
     "context": "deactivate",
     "string": "Deactivate"
@@ -3514,9 +3523,6 @@
     "context": "table header column",
     "string": "Tax rate"
   },
-  "NkLZBG": {
-    "string": "Mark as paid uses Transactions API"
-  },
   "NlEVVT": {
     "context": "label for button",
     "string": "Create class"
@@ -6163,6 +6169,9 @@
     "context": "product type name",
     "string": "Type Name"
   },
+  "hHv0ih": {
+    "string": "If left unchecked it creates a"
+  },
   "hJZwTS": {
     "string": "Email address"
   },

scripts/build-types.js

@@ -2,7 +2,7 @@
 const { generate } = require("@graphql-codegen/cli");
 
 // Feature flags names that will be used as suffix for generated files
-const FEATURE_FLAGS = ["transactions"];
+const FEATURE_FLAGS = [];
 
 const schemaSuffixes = ["default", ...FEATURE_FLAGS];
 

src/channels/components/ChannelForm/ChannelForm.tsx

@@ -6,20 +6,18 @@ import CardSpacer from "@dashboard/components/CardSpacer";
 import CardTitle from "@dashboard/components/CardTitle";
 import ControlledSwitch from "@dashboard/components/ControlledSwitch";
 import FormSpacer from "@dashboard/components/FormSpacer";
+import Link from "@dashboard/components/Link";
+import PreviewPill from "@dashboard/components/PreviewPill";
 import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType,
 } from "@dashboard/components/SingleAutocompleteSelectField";
 import {
   ChannelErrorFragment,
   CountryCode,
+  MarkAsPaidStrategyEnum,
   StockSettingsInput,
 } from "@dashboard/graphql";
-import {
-  ChannelOrderSettingsFragment,
-  MarkAsPaidStrategyEnum,
-} from "@dashboard/graphql/types.transactions.generated";
 import useClipboard from "@dashboard/hooks/useClipboard";
-import { useFlags } from "@dashboard/hooks/useFlags";
 import { ChangeEvent, FormChange } from "@dashboard/hooks/useForm";
 import { commonMessages } from "@dashboard/intl";
 import { getFormErrors } from "@dashboard/utils/errors";
@@ -31,6 +29,7 @@ import {
   TextField,
   Typography,
 } from "@material-ui/core";
+import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -63,7 +62,6 @@ export interface ChannelFormProps {
   onCurrencyCodeChange?: (event: ChangeEvent) => void;
   onDefaultCountryChange: (event: ChangeEvent) => void;
   onMarkAsPaidStrategyChange: () => void;
-  orderSettings: ChannelOrderSettingsFragment["orderSettings"];
 }
 
 export const ChannelForm: React.FC<ChannelFormProps> = ({
@@ -86,7 +84,6 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
     errors,
   );
   const classes = useStyles();
-  const { orderTransactions } = useFlags(["orderTransactions"]);
 
   return (
     <>
@@ -229,29 +226,62 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
             onChange={onDefaultCountryChange}
           />
           <FormSpacer />
+          <Box display="flex" gap={4} alignItems="center">
             <ControlledSwitch
               data-test-id="order-settings-mark-as-paid"
-            disabled={disabled || !orderTransactions.enabled}
+              disabled={disabled}
               checked={
                 data.markAsPaidStrategy ===
                 MarkAsPaidStrategyEnum.TRANSACTION_FLOW
               }
               onChange={onMarkAsPaidStrategyChange}
               name="markAsPaidStrategy"
-            label={intl.formatMessage({
+              label={
-              defaultMessage: "Mark as paid uses Transactions API",
+                <span>
-              id: "NkLZBG",
+                  <FormattedMessage
-            })}
+                    defaultMessage='"Mark as paid" feature creates a'
-            secondLabel={intl.formatMessage({
+                    id="MDOw8D"
-              defaultMessage: "Creates a single payment when unchecked",
+                  />{" "}
-              id: "F5OqYa",
+                  <Link
-            })}
+                    href="https://docs.saleor.io/docs/3.x/developer/payments#processing-a-payment-with-payment-app"
+                    target="_blank"
+                    rel="noopener noreferer"
+                  >
+                    <FormattedMessage
+                      defaultMessage="Transaction"
+                      id="1+ROfp"
                     />
+                  </Link>{" "}
+                  <FormattedMessage
+                    defaultMessage="- used by Payment Apps"
+                    id="Fqe4aB"
+                  />
+                </span>
+              }
+              secondLabel={
+                <span>
+                  <FormattedMessage
+                    defaultMessage="If left unchecked it creates a"
+                    id="hHv0ih"
+                  />{" "}
+                  <Link
+                    href="https://docs.saleor.io/docs/3.x/developer/payments#payment-plugin"
+                    target="_blank"
+                    rel="noopener noreferer"
+                  >
+                    <FormattedMessage defaultMessage="Payment" id="NmK6zy" />
+                  </Link>{" "}
+                  <FormattedMessage
+                    defaultMessage="- used by Payment Plugins"
+                    id="50lR2F"
+                  />
+                </span>
+              }
+            />
+            <PreviewPill />
+          </Box>
         </CardContent>
       </Card>
     </>
   );
 };
-
-ChannelForm.displayName = "ChannelForm";
-export default ChannelForm;

src/channels/components/ChannelForm/index.ts

@@ -1,2 +1 @@
 export * from "./ChannelForm";
-export { default } from "./ChannelForm";

src/channels/fixtures.ts

@@ -3,6 +3,7 @@ import {
   ChannelDetailsFragment,
   ChannelErrorCode,
   ChannelErrorFragment,
+  MarkAsPaidStrategyEnum,
   ProductFragment,
 } from "@dashboard/graphql";
 import { Money } from "@saleor/sdk/dist/apollo/types";
@@ -46,6 +47,10 @@ export const channelsList: ChannelDetailsFragment[] = [
         name: "Warehouse 2",
       },
     ],
+    orderSettings: {
+      markAsPaidStrategy: MarkAsPaidStrategyEnum.TRANSACTION_FLOW,
+      __typename: "OrderSettings",
+    },
   },
   {
     __typename: "Channel",
@@ -76,6 +81,10 @@ export const channelsList: ChannelDetailsFragment[] = [
         name: "Warehouse 2",
       },
     ],
+    orderSettings: {
+      markAsPaidStrategy: MarkAsPaidStrategyEnum.TRANSACTION_FLOW,
+      __typename: "OrderSettings",
+    },
   },
   {
     __typename: "Channel",
@@ -106,6 +115,10 @@ export const channelsList: ChannelDetailsFragment[] = [
         name: "Warehouse 2",
       },
     ],
+    orderSettings: {
+      markAsPaidStrategy: MarkAsPaidStrategyEnum.TRANSACTION_FLOW,
+      __typename: "OrderSettings",
+    },
   },
   {
     __typename: "Channel",
@@ -136,6 +149,10 @@ export const channelsList: ChannelDetailsFragment[] = [
         name: "Warehouse 2",
       },
     ],
+    orderSettings: {
+      markAsPaidStrategy: MarkAsPaidStrategyEnum.TRANSACTION_FLOW,
+      __typename: "OrderSettings",
+    },
   },
   {
     __typename: "Channel",
@@ -166,6 +183,10 @@ export const channelsList: ChannelDetailsFragment[] = [
         name: "Warehouse 2",
       },
     ],
+    orderSettings: {
+      markAsPaidStrategy: MarkAsPaidStrategyEnum.TRANSACTION_FLOW,
+      __typename: "OrderSettings",
+    },
   },
   {
     __typename: "Channel",
@@ -196,6 +217,10 @@ export const channelsList: ChannelDetailsFragment[] = [
         name: "Warehouse 2",
       },
     ],
+    orderSettings: {
+      markAsPaidStrategy: MarkAsPaidStrategyEnum.TRANSACTION_FLOW,
+      __typename: "OrderSettings",
+    },
   },
   {
     __typename: "Channel",
@@ -226,6 +251,10 @@ export const channelsList: ChannelDetailsFragment[] = [
         name: "Warehouse 2",
       },
     ],
+    orderSettings: {
+      markAsPaidStrategy: MarkAsPaidStrategyEnum.TRANSACTION_FLOW,
+      __typename: "OrderSettings",
+    },
   },
 ];
 
@@ -258,6 +287,10 @@ export const channel: ChannelDetailsFragment = {
       name: "Warehouse 2",
     },
   ],
+  orderSettings: {
+    markAsPaidStrategy: MarkAsPaidStrategyEnum.TRANSACTION_FLOW,
+    __typename: "OrderSettings",
+  },
 };
 
 type ProductChannelsWithPricing = ProductFragment["channelListings"][0] & {

src/channels/mutations.transactions.ts

@@ -1,29 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const channelOrderSettingsUpdateMutation = gql`
-  mutation ChannelOrderSettingsUpdate($id: ID!, $input: ChannelUpdateInput!) {
-    channelUpdate(id: $id, input: $input) {
-      channel {
-        ...ChannelDetails
-        ...ChannelOrderSettings
-      }
-      errors {
-        ...ChannelError
-      }
-    }
-  }
-`;
-
-export const channelCreateWithSettingsMutation = gql`
-  mutation ChannelCreateWithSettings($input: ChannelCreateInput!) {
-    channelCreate(input: $input) {
-      channel {
-        ...ChannelDetails
-        ...ChannelOrderSettings
-      }
-      errors {
-        ...ChannelError
-      }
-    }
-  }
-`;

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx

@@ -1,7 +1,6 @@
 import { channel, channelCreateErrors } from "@dashboard/channels/fixtures";
 import { countries } from "@dashboard/fixtures";
 import { ChannelErrorFragment } from "@dashboard/graphql";
-import { MarkAsPaidStrategyEnum } from "@dashboard/graphql/types.transactions.generated";
 import Decorator from "@dashboard/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -15,10 +14,6 @@ const props: ChannelDetailsPageProps<ChannelErrorFragment[]> = {
     { label: "USD", value: "USD" },
     { label: "PLN", value: "PLN" },
   ],
-  orderSettings: {
-    markAsPaidStrategy: MarkAsPaidStrategyEnum.PAYMENT_FLOW,
-    __typename: "OrderSettings",
-  },
   disabled: false,
   disabledStatus: false,
   errors: [],

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx

@@ -21,10 +21,7 @@ import {
   SearchWarehousesQuery,
   StockSettingsInput,
 } from "@dashboard/graphql";
-import {
+import { MarkAsPaidStrategyEnum } from "@dashboard/graphql/types.generated";
-  ChannelOrderSettingsFragment,
-  MarkAsPaidStrategyEnum,
-} from "@dashboard/graphql/types.transactions.generated";
 import { SearchData } from "@dashboard/hooks/makeTopLevelSearch";
 import { getParsedSearchData } from "@dashboard/hooks/makeTopLevelSearch/utils";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
@@ -71,7 +68,6 @@ export interface ChannelDetailsPageProps<
   updateChannelStatus?: () => void;
   searchShippingZones: (query: string) => void;
   searchWarehouses: (query: string) => void;
-  orderSettings: ChannelOrderSettingsFragment["orderSettings"];
 }
 
 const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
@@ -95,7 +91,6 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
   channelWarehouses = [],
   allWarehousesCount,
   countries,
-  orderSettings,
 }: ChannelDetailsPageProps<TErrors>) {
   const navigate = useNavigator();
   const intl = useIntl();
@@ -110,7 +105,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
 
   const countryChoices = mapCountriesToChoices(countries || []);
 
-  const { defaultCountry, stockSettings, ...formData } =
+  const { defaultCountry, stockSettings, orderSettings, ...formData } =
     channel || ({} as ChannelDetailsFragment);
   const initialStockSettings: StockSettingsInput = {
     allocationStrategy: AllocationStrategyEnum.PRIORITIZE_SORTING_ORDER,
@@ -129,7 +124,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
     ...initialStockSettings,
     shippingZonesToDisplay: channelShippingZones,
     warehousesToDisplay: channelWarehouses,
-    markAsPaidStrategy: orderSettings.markAsPaidStrategy,
+    markAsPaidStrategy: orderSettings?.markAsPaidStrategy,
   };
 
   const getFilteredShippingZonesChoices = (
@@ -227,7 +222,6 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
             <DetailPageLayout.Content>
               <ChannelForm
                 data={data}
-                orderSettings={orderSettings}
                 disabled={disabled}
                 currencyCodes={currencyCodes}
                 countries={countryChoices}

src/channels/queries.transactions.ts

@@ -1,9 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const channelOrderSettings = gql`
-  query ChannelOrderSettings($id: ID!) {
-    channel(id: $id) {
-      ...ChannelOrderSettings
-    }
-  }
-`;

src/channels/views/ChannelCreate/ChannelCreate.tsx

@@ -7,10 +7,7 @@ import {
   useChannelCreateMutation,
   useChannelReorderWarehousesMutation,
 } from "@dashboard/graphql";
-import { useChannelCreateWithSettingsMutation } from "@dashboard/graphql/transactions";
-import { MarkAsPaidStrategyEnum } from "@dashboard/graphql/types.transactions.generated";
 import { getSearchFetchMoreProps } from "@dashboard/hooks/makeTopLevelSearch/utils";
-import { useFlags } from "@dashboard/hooks/useFlags";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import useNotifier from "@dashboard/hooks/useNotifier";
 import { getDefaultNotifierSuccessErrorData } from "@dashboard/hooks/useNotifier/utils";
@@ -32,7 +29,6 @@ export const ChannelCreateView = ({}) => {
   const notify = useNotifier();
   const intl = useIntl();
   const shop = useShop();
-  const { orderTransactions } = useFlags(["orderTransactions"]);
 
   const handleError = (error: ChannelErrorFragment) => {
     notify({
@@ -41,23 +37,12 @@ export const ChannelCreateView = ({}) => {
     });
   };
 
-  const [createChannel, createChannelRegularOpts] = useChannelCreateMutation({
+  const [createChannel, createChannelOpts] = useChannelCreateMutation({
     onCompleted: ({ channelCreate: { errors } }: ChannelCreateMutation) => {
       notify(getDefaultNotifierSuccessErrorData(errors, intl));
     },
   });
 
-  const [createChannelWithSettings, createChannelWithSettingsOpts] =
-    useChannelCreateWithSettingsMutation({
-      onCompleted: ({ channelCreate: { errors } }: ChannelCreateMutation) => {
-        notify(getDefaultNotifierSuccessErrorData(errors, intl));
-      },
-    });
-
-  const createChannelOpts = orderTransactions?.enabled
-    ? createChannelWithSettingsOpts
-    : createChannelRegularOpts;
-
   const [reorderChannelWarehouses, reorderChannelWarehousesOpts] =
     useChannelReorderWarehousesMutation({
       onCompleted: data => {
@@ -91,14 +76,12 @@ export const ChannelCreateView = ({}) => {
       stockSettings: {
         allocationStrategy,
       },
-    };
+      orderSettings: {
-    const createChannelMutation = orderTransactions.enabled
+        markAsPaidStrategy,
-      ? createChannelWithSettings({
-          variables: {
-            input: { ...input, orderSettings: { markAsPaidStrategy } },
       },
-        })
+    };
-      : createChannel({
+
+    const createChannelMutation = createChannel({
       variables: {
         input,
       },
@@ -166,13 +149,6 @@ export const ChannelCreateView = ({}) => {
       />
       <>
         <ChannelDetailsPage
-          orderSettings={{
-            markAsPaidStrategy: orderTransactions?.enabled
-              ? // Use new transactions strategy by default if feature flag is enabled
-                MarkAsPaidStrategyEnum.TRANSACTION_FLOW
-              : MarkAsPaidStrategyEnum.PAYMENT_FLOW,
-            __typename: "OrderSettings",
-          }}
           allShippingZonesCount={
             shippingZonesCountData?.shippingZones?.totalCount
           }

src/channels/views/ChannelDetails/ChannelDetails.tsx

@@ -14,13 +14,7 @@ import {
   useChannelsQuery,
   useChannelUpdateMutation,
 } from "@dashboard/graphql";
-import {
-  useChannelOrderSettingsQuery,
-  useChannelOrderSettingsUpdateMutation,
-} from "@dashboard/graphql/hooks.transactions.generated";
-import { MarkAsPaidStrategyEnum } from "@dashboard/graphql/types.transactions.generated";
 import { getSearchFetchMoreProps } from "@dashboard/hooks/makeTopLevelSearch/utils";
-import { useFlags } from "@dashboard/hooks/useFlags";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import useNotifier from "@dashboard/hooks/useNotifier";
 import { getDefaultNotifierSuccessErrorData } from "@dashboard/hooks/useNotifier/utils";
@@ -57,8 +51,6 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
   const intl = useIntl();
   const shop = useShop();
 
-  const { orderTransactions } = useFlags(["orderTransactions"]);
-
   const channelsListData = useChannelsQuery({ displayLoader: true });
 
   const [openModal, closeModal] = createDialogActionHandlers<
@@ -71,18 +63,11 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
       notify(getDefaultNotifierSuccessErrorData(errors, intl)),
   });
 
-  const [updateChannelSettings] = useChannelOrderSettingsUpdateMutation();
-
   const { data, loading } = useChannelQuery({
     displayLoader: true,
     variables: { id },
   });
 
-  const { data: channelSettingsData } = useChannelOrderSettingsQuery({
-    variables: { id },
-    skip: !orderTransactions.enabled,
-  });
-
   const handleError = (error: ChannelErrorFragment) => {
     notify({
       status: "error",
@@ -145,41 +130,17 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
           stockSettings: {
             allocationStrategy,
           },
-        },
-      },
-    });
-
-    // TODO: Remove this when we remove orderTransactions flag, move to updateChannel mutation
-    let updateChannelOrderSettingsMutation: ReturnType<
-      typeof updateChannelSettings
-    >;
-    if (orderTransactions.enabled) {
-      updateChannelOrderSettingsMutation = updateChannelSettings({
-        variables: {
-          id: data?.channel.id,
-          input: {
           orderSettings: {
             markAsPaidStrategy,
           },
         },
       },
     });
-    } else {
-      updateChannelOrderSettingsMutation = new Promise(resolve =>
-        resolve(null),
-      );
-    }
 
-    const [resultChannel] = await Promise.all([
+    const resultChannel = await updateChannelMutation;
-      updateChannelMutation,
-      updateChannelOrderSettingsMutation,
-    ]);
     const errors = await extractMutationErrors(updateChannelMutation);
-    const settingsErrors = await extractMutationErrors(
-      updateChannelOrderSettingsMutation,
-    );
 
-    if (!errors?.length && !settingsErrors?.length) {
+    if (!errors?.length) {
       const moves = calculateItemsOrderMoves(
         resultChannel.data?.channelUpdate.channel?.warehouses,
         warehousesToDisplay,
@@ -193,7 +154,7 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
       });
     }
 
-    return errors || settingsErrors;
+    return errors;
   };
 
   const onDeleteCompleted = (data: ChannelDeleteMutation) => {
@@ -266,12 +227,6 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
         })}
       />
       <ChannelDetailsPage
-        orderSettings={
-          channelSettingsData?.channel?.orderSettings ?? {
-            markAsPaidStrategy: MarkAsPaidStrategyEnum.PAYMENT_FLOW,
-            __typename: "OrderSettings",
-          }
-        }
         channelShippingZones={channelShippingZones}
         allShippingZonesCount={
           shippingZonesCountData?.shippingZones?.totalCount

src/components/OverflowTooltip/OverflowTooltip.tsx

@@ -20,6 +20,12 @@ const useStyles = makeStyles(
       overflow: "hidden",
       textOverflow: "ellipsis",
     },
+    children: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      maxWidth: "80vw",
+      wordBreak: "break-word",
+    },
   },
   {
     name: "OverflowTooltip",
@@ -59,7 +65,7 @@ const OverflowTooltip: React.FC<OverflowTooltipProps> = ({
       <Tooltip.Content side="top">
         <Tooltip.Arrow />
         <Tooltip.ContentHeading>{header}</Tooltip.ContentHeading>
-        {title ?? children}
+        <div className={classes.children}>{title ?? children}</div>
       </Tooltip.Content>
     </Tooltip>
   );

src/components/Timeline/TimelineEventHeader.tsx

@@ -9,15 +9,19 @@ import Link from "../Link";
 const useStyles = makeStyles(
   theme => ({
     container: {
-      alignItems: "center",
+      alignItems: "start",
       display: "flex",
       flexDirection: "row",
       justifyContent: "space-between",
       width: "100%",
     },
+    title: {
+      wordBreak: "break-all",
+    },
     date: {
       color: theme.typography.caption.color,
       paddingLeft: 24,
+      whiteSpace: "nowrap",
     },
     elementsContainer: {
       alignItems: "center",
@@ -60,7 +64,7 @@ export const TimelineEventHeader: React.FC<
 
   return (
     <div className={classes.container}>
-      {title && <Typography>{title}</Typography>}
+      {title && <Typography className={classes.title}>{title}</Typography>}
       {titleElements && (
         <div className={classes.elementsContainer}>
           {titleElements.filter(Boolean).map(({ text, link }) => {

src/components/Timeline/TimelineNote.tsx

@@ -22,6 +22,7 @@ const useStyles = makeStyles(
       background: vars.colors.background.surfaceNeutralPlain,
     },
     cardContent: {
+      wordBreak: "break-all",
       borderRadius: "4px",
       border: `1px solid ${vars.colors.border.neutralDefault}`,
       "&:last-child": {

src/fragments/channel.transactions.ts

@@ -1,9 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const channelOrderSettings = gql`
-  fragment ChannelOrderSettings on Channel {
-    orderSettings {
-      markAsPaidStrategy
-    }
-  }
-`;

src/fragments/channels.ts

@@ -32,5 +32,8 @@ export const channelDetailsFragment = gql`
     warehouses {
       ...Warehouse
     }
+    orderSettings {
+      markAsPaidStrategy
+    }
   }
 `;

src/fragments/errors.transactions.ts

@@ -1,33 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const transactionRequestActionErrorFragment = gql`
-  fragment TransactionRequestActionError on TransactionRequestActionError {
-    field
-    message
-    code
-  }
-`;
-
-export const transactionCreateErrorFragment = gql`
-  fragment TransactionCreateError on TransactionCreateError {
-    field
-    message
-    code
-  }
-`;
-
-export const orderGrantRefundCreateErrorFragment = gql`
-  fragment OrderGrantRefundCreateError on OrderGrantRefundCreateError {
-    field
-    message
-    code
-  }
-`;
-
-export const orderGrantRefundUpdateErrorFragment = gql`
-  fragment OrderGrantRefundUpdateError on OrderGrantRefundUpdateError {
-    field
-    message
-    code
-  }
-`;

src/fragments/errors.ts

@@ -543,3 +543,35 @@ export const taxClassDeleteError = gql`
     message
   }
 `;
+
+export const transactionRequestActionErrorFragment = gql`
+  fragment TransactionRequestActionError on TransactionRequestActionError {
+    field
+    message
+    code
+  }
+`;
+
+export const transactionCreateErrorFragment = gql`
+  fragment TransactionCreateError on TransactionCreateError {
+    field
+    message
+    code
+  }
+`;
+
+export const orderGrantRefundCreateErrorFragment = gql`
+  fragment OrderGrantRefundCreateError on OrderGrantRefundCreateError {
+    field
+    message
+    code
+  }
+`;
+
+export const orderGrantRefundUpdateErrorFragment = gql`
+  fragment OrderGrantRefundUpdateError on OrderGrantRefundUpdateError {
+    field
+    message
+    code
+  }
+`;

src/fragments/orders.transactions.ts

@@ -1,361 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const transactionEvent = gql`
-  fragment TransactionEvent on TransactionEvent {
-    id
-    pspReference
-    amount {
-      ...Money
-    }
-    type
-    message
-    createdAt
-    createdBy {
-      ... on User {
-        ...StaffMemberAvatar
-      }
-      ... on App {
-        ...AppAvatar
-      }
-    }
-    externalUrl
-  }
-`;
-
-export const transactionItemFragment = gql`
-  fragment TransactionItem on TransactionItem {
-    id
-    type
-    pspReference
-    actions
-    type
-    status
-    externalUrl
-    events {
-      ...TransactionEvent
-    }
-    authorizedAmount {
-      ...Money
-    }
-    chargedAmount {
-      ...Money
-    }
-    refundedAmount {
-      ...Money
-    }
-    canceledAmount {
-      ...Money
-    }
-    authorizePendingAmount {
-      ...Money
-    }
-    chargePendingAmount {
-      ...Money
-    }
-    refundPendingAmount {
-      ...Money
-    }
-    cancelPendingAmount {
-      ...Money
-    }
-  }
-`;
-
-export const fragmentPayment = gql`
-  fragment OrderPayment on Payment {
-    id
-    isActive
-    actions
-    gateway
-    paymentMethodType
-    availableCaptureAmount {
-      ...Money
-    }
-    capturedAmount {
-      ...Money
-    }
-    total {
-      ...Money
-    }
-    availableRefundAmount {
-      ...Money
-    }
-    modified
-    transactions {
-      id
-      token
-      created
-      kind
-      isSuccess
-    }
-  }
-`;
-
-export const fragmentOrderGiftcard = gql`
-  fragment OrderGiftCard on GiftCard {
-    id
-    last4CodeChars
-    events {
-      id
-      type
-      orderId
-      date
-      balance {
-        initialBalance {
-          ...Money
-        }
-        currentBalance {
-          ...Money
-        }
-        oldInitialBalance {
-          ...Money
-        }
-        oldCurrentBalance {
-          ...Money
-        }
-      }
-    }
-  }
-`;
-
-export const fragmentOrderGrantedRefunds = gql`
-  fragment OrderGrantedRefund on OrderGrantedRefund {
-    id
-    createdAt
-    amount {
-      currency
-      amount
-    }
-    reason
-    user {
-      ...UserBaseAvatar
-    }
-    app {
-      id
-      name
-    }
-  }
-`;
-
-export const orderLineGrantRefund = gql`
-  fragment OrderLineGrantRefund on OrderLine {
-    id
-    thumbnail {
-      url
-    }
-    productName
-    quantity
-    quantityToFulfill
-    variantName
-    productName
-    unitPrice {
-      gross {
-        ...Money
-      }
-    }
-  }
-`;
-
-export const grantRefundFulfillment = gql`
-  fragment OrderFulfillmentGrantRefund on Fulfillment {
-    id
-    fulfillmentOrder
-    status
-    lines {
-      id
-      quantity
-      orderLine {
-        ...OrderLineGrantRefund
-      }
-    }
-  }
-`;
-
-export const fragmentOrderDetailsGrantRefund = gql`
-  fragment OrderDetailsGrantRefund on Order {
-    id
-    number
-    lines {
-      ...OrderLineGrantRefund
-    }
-    fulfillments {
-      ...OrderFulfillmentGrantRefund
-    }
-    shippingPrice {
-      gross {
-        ...Money
-      }
-    }
-    total {
-      gross {
-        ...Money
-      }
-    }
-  }
-`;
-
-export const fragmentOrderDetailsWithTransactions = gql`
-  fragment OrderDetailsWithTransactions on Order {
-    id
-    token
-    ...Metadata
-    billingAddress {
-      ...Address
-    }
-    transactions {
-      ...TransactionItem
-    }
-    payments {
-      ...OrderPayment
-    }
-    giftCards {
-      ...OrderGiftCard
-    }
-    grantedRefunds {
-      ...OrderGrantedRefund
-    }
-    isShippingRequired
-    canFinalize
-    created
-    customerNote
-    discounts {
-      id
-      type
-      calculationMode: valueType
-      value
-      reason
-      amount {
-        ...Money
-      }
-    }
-    events {
-      ...OrderEvent
-    }
-    fulfillments {
-      ...Fulfillment
-    }
-    lines {
-      ...OrderLine
-    }
-    number
-    isPaid
-    paymentStatus
-    shippingAddress {
-      ...Address
-    }
-    deliveryMethod {
-      __typename
-      ... on ShippingMethod {
-        id
-      }
-      ... on Warehouse {
-        id
-        clickAndCollectOption
-      }
-    }
-    shippingMethod {
-      id
-    }
-    shippingMethodName
-    collectionPointName
-    shippingPrice {
-      gross {
-        amount
-        currency
-      }
-    }
-    status
-    subtotal {
-      gross {
-        ...Money
-      }
-      net {
-        ...Money
-      }
-    }
-    total {
-      gross {
-        ...Money
-      }
-      net {
-        ...Money
-      }
-      tax {
-        ...Money
-      }
-    }
-    totalRemainingGrant {
-      ...Money
-    }
-    totalGrantedRefund {
-      ...Money
-    }
-    totalRefundPending {
-      ...Money
-    }
-    totalRefunded {
-      ...Money
-    }
-    actions
-    totalAuthorizePending {
-      ...Money
-    }
-    totalAuthorized {
-      ...Money
-    }
-    totalCharged {
-      ...Money
-    }
-    totalChargePending {
-      ...Money
-    }
-    totalCanceled {
-      ...Money
-    }
-    totalCancelPending {
-      ...Money
-    }
-    totalBalance {
-      ...Money
-    }
-    undiscountedTotal {
-      net {
-        ...Money
-      }
-      gross {
-        ...Money
-      }
-    }
-    user {
-      id
-      email
-    }
-    userEmail
-    shippingMethods {
-      id
-      name
-      price {
-        ...Money
-      }
-      active
-      message
-    }
-    invoices {
-      ...Invoice
-    }
-    channel {
-      isActive
-      id
-      name
-      currencyCode
-      slug
-      defaultCountry {
-        code
-      }
-      orderSettings {
-        markAsPaidStrategy
-      }
-    }
-    isPaid
-  }
-`;

src/fragments/orders.ts

@@ -187,34 +187,23 @@ export const invoiceFragment = gql`
 export const fragmentOrderDetails = gql`
   fragment OrderDetails on Order {
     id
+    # TODO: remove me
     token
     ...Metadata
     billingAddress {
       ...Address
     }
     transactions {
-      id
+      ...TransactionItem
+    }
+    payments {
+      ...OrderPayment
     }
     giftCards {
-      events {
+      ...OrderGiftCard
-        id
-        type
-        orderId
-        balance {
-          initialBalance {
-            ...Money
-          }
-          currentBalance {
-            ...Money
-          }
-          oldInitialBalance {
-            ...Money
-          }
-          oldCurrentBalance {
-            ...Money
-          }
-        }
     }
+    grantedRefunds {
+      ...OrderGrantedRefund
     }
     isShippingRequired
     canFinalize
@@ -255,6 +244,7 @@ export const fragmentOrderDetails = gql`
         clickAndCollectOption
       }
     }
+    # TODO: remove me
     shippingMethod {
       id
     }
@@ -286,13 +276,41 @@ export const fragmentOrderDetails = gql`
         ...Money
       }
     }
+    totalRemainingGrant {
+      ...Money
+    }
+    totalGrantedRefund {
+      ...Money
+    }
+    totalRefundPending {
+      ...Money
+    }
+    totalRefunded {
+      ...Money
+    }
     actions
+    totalAuthorizePending {
+      ...Money
+    }
     totalAuthorized {
       ...Money
     }
+    # TODO: Remove me
     totalCaptured {
       ...Money
     }
+    totalCharged {
+      ...Money
+    }
+    totalChargePending {
+      ...Money
+    }
+    totalCanceled {
+      ...Money
+    }
+    totalCancelPending {
+      ...Money
+    }
     totalBalance {
       ...Money
     }
@@ -330,6 +348,9 @@ export const fragmentOrderDetails = gql`
       defaultCountry {
         code
       }
+      orderSettings {
+        markAsPaidStrategy
+      }
     }
     isPaid
   }
@@ -407,3 +428,198 @@ export const fragmentOrderLineStockData = gql`
     }
   }
 `;
+
+export const transactionEvent = gql`
+  fragment TransactionEvent on TransactionEvent {
+    id
+    pspReference
+    amount {
+      ...Money
+    }
+    type
+    message
+    createdAt
+    createdBy {
+      ... on User {
+        ...StaffMemberAvatar
+      }
+      ... on App {
+        ...AppAvatar
+      }
+    }
+    externalUrl
+  }
+`;
+
+export const transactionItemFragment = gql`
+  fragment TransactionItem on TransactionItem {
+    id
+    # TODO: remove me
+    type
+    pspReference
+    actions
+    type
+    status
+    externalUrl
+    events {
+      ...TransactionEvent
+    }
+    authorizedAmount {
+      ...Money
+    }
+    chargedAmount {
+      ...Money
+    }
+    refundedAmount {
+      ...Money
+    }
+    canceledAmount {
+      ...Money
+    }
+    authorizePendingAmount {
+      ...Money
+    }
+    chargePendingAmount {
+      ...Money
+    }
+    refundPendingAmount {
+      ...Money
+    }
+    cancelPendingAmount {
+      ...Money
+    }
+  }
+`;
+
+export const fragmentPayment = gql`
+  fragment OrderPayment on Payment {
+    id
+    isActive
+    actions
+    gateway
+    paymentMethodType
+    availableCaptureAmount {
+      ...Money
+    }
+    capturedAmount {
+      ...Money
+    }
+    total {
+      ...Money
+    }
+    availableRefundAmount {
+      ...Money
+    }
+    modified
+    transactions {
+      id
+      token
+      created
+      kind
+      isSuccess
+    }
+  }
+`;
+
+export const fragmentOrderGiftcard = gql`
+  fragment OrderGiftCard on GiftCard {
+    id
+    last4CodeChars
+    events {
+      id
+      type
+      orderId
+      date
+      balance {
+        initialBalance {
+          ...Money
+        }
+        currentBalance {
+          ...Money
+        }
+        oldInitialBalance {
+          ...Money
+        }
+        oldCurrentBalance {
+          ...Money
+        }
+      }
+    }
+  }
+`;
+
+export const fragmentOrderGrantedRefunds = gql`
+  fragment OrderGrantedRefund on OrderGrantedRefund {
+    id
+    createdAt
+    amount {
+      currency
+      amount
+    }
+    reason
+    user {
+      ...UserBaseAvatar
+    }
+    app {
+      id
+      name
+    }
+  }
+`;
+
+export const orderLineGrantRefund = gql`
+  fragment OrderLineGrantRefund on OrderLine {
+    id
+    thumbnail {
+      url
+    }
+    productName
+    quantity
+    quantityToFulfill
+    variantName
+    productName
+    unitPrice {
+      gross {
+        ...Money
+      }
+    }
+  }
+`;
+
+export const grantRefundFulfillment = gql`
+  fragment OrderFulfillmentGrantRefund on Fulfillment {
+    id
+    fulfillmentOrder
+    status
+    lines {
+      id
+      quantity
+      orderLine {
+        ...OrderLineGrantRefund
+      }
+    }
+  }
+`;
+
+export const fragmentOrderDetailsGrantRefund = gql`
+  fragment OrderDetailsGrantRefund on Order {
+    id
+    number
+    lines {
+      ...OrderLineGrantRefund
+    }
+    fulfillments {
+      ...OrderFulfillmentGrantRefund
+    }
+    shippingPrice {
+      gross {
+        ...Money
+      }
+    }
+    total {
+      gross {
+        ...Money
+      }
+    }
+  }
+`;

src/graphql/fragmentTypes.generated.ts

@@ -8,8 +8,8 @@
       const result: PossibleTypesResultData = {
   "possibleTypes": {
     "DeliveryMethod": [
-      "Warehouse",
+      "ShippingMethod",
-      "ShippingMethod"
+      "Warehouse"
     ],
     "Event": [
       "AddressCreated",
@@ -35,6 +35,7 @@
       "ChannelUpdated",
       "CheckoutCreated",
       "CheckoutFilterShippingMethods",
+      "CheckoutFullyPaid",
       "CheckoutMetadataUpdated",
       "CheckoutUpdated",
       "CollectionCreated",
@@ -54,6 +55,7 @@
       "GiftCardCreated",
       "GiftCardDeleted",
       "GiftCardMetadataUpdated",
+      "GiftCardSent",
       "GiftCardStatusChanged",
       "GiftCardUpdated",
       "InvoiceDeleted",
@@ -68,6 +70,7 @@
       "OrderCancelled",
       "OrderConfirmed",
       "OrderCreated",
+      "OrderExpired",
       "OrderFilterShippingMethods",
       "OrderFulfilled",
       "OrderFullyPaid",
@@ -82,6 +85,7 @@
       "PaymentAuthorize",
       "PaymentCaptureEvent",
       "PaymentConfirmEvent",
+      "PaymentGatewayInitializeSession",
       "PaymentListGateways",
       "PaymentProcessEvent",
       "PaymentRefundEvent",
@@ -120,7 +124,12 @@
       "StaffUpdated",
       "ThumbnailCreated",
       "TransactionActionRequest",
+      "TransactionCancelationRequested",
+      "TransactionChargeRequested",
+      "TransactionInitializeSession",
       "TransactionItemMetadataUpdated",
+      "TransactionProcessSession",
+      "TransactionRefundRequested",
       "TranslationCreated",
       "TranslationUpdated",
       "VoucherCreated",
@@ -262,6 +271,10 @@
       "Voucher",
       "Warehouse"
     ],
+    "OrderOrCheckout": [
+      "Checkout",
+      "Order"
+    ],
     "TaxSourceLine": [
       "CheckoutLine",
       "OrderLine"
@@ -271,43 +284,48 @@
       "Order"
     ],
     "TranslatableItem": [
-      "ProductTranslatableContent",
-      "CollectionTranslatableContent",
-      "CategoryTranslatableContent",
       "AttributeTranslatableContent",
       "AttributeValueTranslatableContent",
-      "ProductVariantTranslatableContent",
+      "CategoryTranslatableContent",
+      "CollectionTranslatableContent",
+      "MenuItemTranslatableContent",
       "PageTranslatableContent",
-      "ShippingMethodTranslatableContent",
+      "ProductTranslatableContent",
+      "ProductVariantTranslatableContent",
       "SaleTranslatableContent",
-      "VoucherTranslatableContent",
+      "ShippingMethodTranslatableContent",
-      "MenuItemTranslatableContent"
+      "VoucherTranslatableContent"
     ],
     "TranslationTypes": [
-      "ProductTranslation",
-      "CollectionTranslation",
-      "CategoryTranslation",
       "AttributeTranslation",
       "AttributeValueTranslation",
-      "ProductVariantTranslation",
+      "CategoryTranslation",
+      "CollectionTranslation",
+      "MenuItemTranslation",
       "PageTranslation",
-      "ShippingMethodTranslation",
+      "ProductTranslation",
+      "ProductVariantTranslation",
       "SaleTranslation",
-      "VoucherTranslation",
+      "ShippingMethodTranslation",
-      "MenuItemTranslation"
+      "VoucherTranslation"
+    ],
+    "UserOrApp": [
+      "App",
+      "User"
     ],
     "_Entity": [
-      "App",
       "Address",
-      "User",
+      "App",
-      "Group",
-      "ProductVariant",
-      "Product",
-      "ProductType",
-      "ProductMedia",
       "Category",
       "Collection",
-      "PageType"
+      "Group",
+      "Order",
+      "PageType",
+      "Product",
+      "ProductMedia",
+      "ProductType",
+      "ProductVariant",
+      "User"
     ]
   }
 };

src/graphql/fragmentTypes.transactions.generated.ts

@@ -1,322 +0,0 @@
-/* eslint-disable */
-
-      export interface PossibleTypesResultData {
-        possibleTypes: {
-          [key: string]: string[]
-        }
-      }
-      const result: PossibleTypesResultData = {
-  "possibleTypes": {
-    "DeliveryMethod": [
-      "Warehouse",
-      "ShippingMethod"
-    ],
-    "Event": [
-      "AddressCreated",
-      "AddressDeleted",
-      "AddressUpdated",
-      "AppDeleted",
-      "AppInstalled",
-      "AppStatusChanged",
-      "AppUpdated",
-      "AttributeCreated",
-      "AttributeDeleted",
-      "AttributeUpdated",
-      "AttributeValueCreated",
-      "AttributeValueDeleted",
-      "AttributeValueUpdated",
-      "CalculateTaxes",
-      "CategoryCreated",
-      "CategoryDeleted",
-      "CategoryUpdated",
-      "ChannelCreated",
-      "ChannelDeleted",
-      "ChannelStatusChanged",
-      "ChannelUpdated",
-      "CheckoutCreated",
-      "CheckoutFilterShippingMethods",
-      "CheckoutMetadataUpdated",
-      "CheckoutUpdated",
-      "CollectionCreated",
-      "CollectionDeleted",
-      "CollectionMetadataUpdated",
-      "CollectionUpdated",
-      "CustomerCreated",
-      "CustomerMetadataUpdated",
-      "CustomerUpdated",
-      "DraftOrderCreated",
-      "DraftOrderDeleted",
-      "DraftOrderUpdated",
-      "FulfillmentApproved",
-      "FulfillmentCanceled",
-      "FulfillmentCreated",
-      "FulfillmentMetadataUpdated",
-      "GiftCardCreated",
-      "GiftCardDeleted",
-      "GiftCardMetadataUpdated",
-      "GiftCardStatusChanged",
-      "GiftCardUpdated",
-      "InvoiceDeleted",
-      "InvoiceRequested",
-      "InvoiceSent",
-      "MenuCreated",
-      "MenuDeleted",
-      "MenuItemCreated",
-      "MenuItemDeleted",
-      "MenuItemUpdated",
-      "MenuUpdated",
-      "OrderCancelled",
-      "OrderConfirmed",
-      "OrderCreated",
-      "OrderFilterShippingMethods",
-      "OrderFulfilled",
-      "OrderFullyPaid",
-      "OrderMetadataUpdated",
-      "OrderUpdated",
-      "PageCreated",
-      "PageDeleted",
-      "PageTypeCreated",
-      "PageTypeDeleted",
-      "PageTypeUpdated",
-      "PageUpdated",
-      "PaymentAuthorize",
-      "PaymentCaptureEvent",
-      "PaymentConfirmEvent",
-      "PaymentListGateways",
-      "PaymentProcessEvent",
-      "PaymentRefundEvent",
-      "PaymentVoidEvent",
-      "PermissionGroupCreated",
-      "PermissionGroupDeleted",
-      "PermissionGroupUpdated",
-      "ProductCreated",
-      "ProductDeleted",
-      "ProductMediaCreated",
-      "ProductMediaDeleted",
-      "ProductMediaUpdated",
-      "ProductMetadataUpdated",
-      "ProductUpdated",
-      "ProductVariantBackInStock",
-      "ProductVariantCreated",
-      "ProductVariantDeleted",
-      "ProductVariantMetadataUpdated",
-      "ProductVariantOutOfStock",
-      "ProductVariantStockUpdated",
-      "ProductVariantUpdated",
-      "SaleCreated",
-      "SaleDeleted",
-      "SaleToggle",
-      "SaleUpdated",
-      "ShippingListMethodsForCheckout",
-      "ShippingPriceCreated",
-      "ShippingPriceDeleted",
-      "ShippingPriceUpdated",
-      "ShippingZoneCreated",
-      "ShippingZoneDeleted",
-      "ShippingZoneMetadataUpdated",
-      "ShippingZoneUpdated",
-      "StaffCreated",
-      "StaffDeleted",
-      "StaffUpdated",
-      "ThumbnailCreated",
-      "TransactionActionRequest",
-      "TransactionCancelationRequested",
-      "TransactionChargeRequested",
-      "TransactionItemMetadataUpdated",
-      "TransactionRefundRequested",
-      "TranslationCreated",
-      "TranslationUpdated",
-      "VoucherCreated",
-      "VoucherDeleted",
-      "VoucherMetadataUpdated",
-      "VoucherUpdated",
-      "WarehouseCreated",
-      "WarehouseDeleted",
-      "WarehouseMetadataUpdated",
-      "WarehouseUpdated"
-    ],
-    "IssuingPrincipal": [
-      "App",
-      "User"
-    ],
-    "Job": [
-      "AppInstallation",
-      "ExportFile",
-      "Invoice"
-    ],
-    "Node": [
-      "Address",
-      "Allocation",
-      "App",
-      "AppExtension",
-      "AppInstallation",
-      "AppToken",
-      "Attribute",
-      "AttributeTranslatableContent",
-      "AttributeTranslation",
-      "AttributeValue",
-      "AttributeValueTranslatableContent",
-      "AttributeValueTranslation",
-      "Category",
-      "CategoryTranslatableContent",
-      "CategoryTranslation",
-      "Channel",
-      "Checkout",
-      "CheckoutLine",
-      "Collection",
-      "CollectionChannelListing",
-      "CollectionTranslatableContent",
-      "CollectionTranslation",
-      "CustomerEvent",
-      "DigitalContent",
-      "DigitalContentUrl",
-      "EventDelivery",
-      "EventDeliveryAttempt",
-      "ExportEvent",
-      "ExportFile",
-      "Fulfillment",
-      "FulfillmentLine",
-      "GiftCard",
-      "GiftCardEvent",
-      "GiftCardTag",
-      "Group",
-      "Invoice",
-      "Menu",
-      "MenuItem",
-      "MenuItemTranslatableContent",
-      "MenuItemTranslation",
-      "Order",
-      "OrderDiscount",
-      "OrderEvent",
-      "OrderLine",
-      "Page",
-      "PageTranslatableContent",
-      "PageTranslation",
-      "PageType",
-      "Payment",
-      "Product",
-      "ProductChannelListing",
-      "ProductMedia",
-      "ProductTranslatableContent",
-      "ProductTranslation",
-      "ProductType",
-      "ProductVariant",
-      "ProductVariantChannelListing",
-      "ProductVariantTranslatableContent",
-      "ProductVariantTranslation",
-      "Sale",
-      "SaleChannelListing",
-      "SaleTranslatableContent",
-      "SaleTranslation",
-      "ShippingMethod",
-      "ShippingMethodChannelListing",
-      "ShippingMethodPostalCodeRule",
-      "ShippingMethodTranslatableContent",
-      "ShippingMethodTranslation",
-      "ShippingMethodType",
-      "ShippingZone",
-      "ShopTranslation",
-      "StaffNotificationRecipient",
-      "Stock",
-      "TaxClass",
-      "TaxConfiguration",
-      "Transaction",
-      "TransactionEvent",
-      "TransactionItem",
-      "User",
-      "Voucher",
-      "VoucherChannelListing",
-      "VoucherTranslatableContent",
-      "VoucherTranslation",
-      "Warehouse",
-      "Webhook"
-    ],
-    "ObjectWithMetadata": [
-      "Address",
-      "App",
-      "Attribute",
-      "Category",
-      "Checkout",
-      "CheckoutLine",
-      "Collection",
-      "DigitalContent",
-      "Fulfillment",
-      "GiftCard",
-      "Invoice",
-      "Menu",
-      "MenuItem",
-      "Order",
-      "OrderLine",
-      "Page",
-      "PageType",
-      "Payment",
-      "Product",
-      "ProductMedia",
-      "ProductType",
-      "ProductVariant",
-      "Sale",
-      "ShippingMethod",
-      "ShippingMethodType",
-      "ShippingZone",
-      "TaxClass",
-      "TaxConfiguration",
-      "TransactionItem",
-      "User",
-      "Voucher",
-      "Warehouse"
-    ],
-    "TaxSourceLine": [
-      "CheckoutLine",
-      "OrderLine"
-    ],
-    "TaxSourceObject": [
-      "Checkout",
-      "Order"
-    ],
-    "TranslatableItem": [
-      "ProductTranslatableContent",
-      "CollectionTranslatableContent",
-      "CategoryTranslatableContent",
-      "AttributeTranslatableContent",
-      "AttributeValueTranslatableContent",
-      "ProductVariantTranslatableContent",
-      "PageTranslatableContent",
-      "ShippingMethodTranslatableContent",
-      "SaleTranslatableContent",
-      "VoucherTranslatableContent",
-      "MenuItemTranslatableContent"
-    ],
-    "TranslationTypes": [
-      "ProductTranslation",
-      "CollectionTranslation",
-      "CategoryTranslation",
-      "AttributeTranslation",
-      "AttributeValueTranslation",
-      "ProductVariantTranslation",
-      "PageTranslation",
-      "ShippingMethodTranslation",
-      "SaleTranslation",
-      "VoucherTranslation",
-      "MenuItemTranslation"
-    ],
-    "UserOrApp": [
-      "User",
-      "App"
-    ],
-    "_Entity": [
-      "App",
-      "Address",
-      "User",
-      "Group",
-      "ProductVariant",
-      "Product",
-      "ProductType",
-      "ProductMedia",
-      "Category",
-      "Collection",
-      "PageType"
-    ]
-  }
-};
-      export default result;
-    

src/graphql/hooks.generated.ts

@@ -96,12 +96,6 @@ export const AppListItemFragmentDoc = gql`
   }
 }
     ${AppPermissionFragmentDoc}`;
-export const AppAvatarFragmentDoc = gql`
-    fragment AppAvatar on App {
-  id
-  name
-}
-    `;
 export const AttributeFragmentDoc = gql`
     fragment Attribute on Attribute {
   id
@@ -172,18 +166,6 @@ export const UserFragmentDoc = gql`
   }
 }
     ${UserPermissionFragmentDoc}`;
-export const UserBaseAvatarFragmentDoc = gql`
-    fragment UserBaseAvatar on User {
-  id
-  firstName
-  lastName
-  email
-  avatar {
-    url
-    alt
-  }
-}
-    `;
 export const CategoryFragmentDoc = gql`
     fragment Category on Category {
   id
@@ -250,6 +232,9 @@ export const ChannelDetailsFragmentDoc = gql`
   warehouses {
     ...Warehouse
   }
+  orderSettings {
+    markAsPaidStrategy
+  }
 }
     ${ChannelFragmentDoc}
 ${WarehouseFragmentDoc}`;
@@ -1072,6 +1057,34 @@ export const TaxClassDeleteErrorFragmentDoc = gql`
   message
 }
     `;
+export const TransactionRequestActionErrorFragmentDoc = gql`
+    fragment TransactionRequestActionError on TransactionRequestActionError {
+  field
+  message
+  code
+}
+    `;
+export const TransactionCreateErrorFragmentDoc = gql`
+    fragment TransactionCreateError on TransactionCreateError {
+  field
+  message
+  code
+}
+    `;
+export const OrderGrantRefundCreateErrorFragmentDoc = gql`
+    fragment OrderGrantRefundCreateError on OrderGrantRefundCreateError {
+  field
+  message
+  code
+}
+    `;
+export const OrderGrantRefundUpdateErrorFragmentDoc = gql`
+    fragment OrderGrantRefundUpdateError on OrderGrantRefundUpdateError {
+  field
+  message
+  code
+}
+    `;
 export const GiftCardsSettingsFragmentDoc = gql`
     fragment GiftCardsSettings on GiftCardSettings {
   expiryType
@@ -1261,6 +1274,176 @@ export const RefundOrderLineFragmentDoc = gql`
   }
 }
     ${MoneyFragmentDoc}`;
+export const StaffMemberFragmentDoc = gql`
+    fragment StaffMember on User {
+  id
+  email
+  firstName
+  isActive
+  lastName
+}
+    `;
+export const StaffMemberAvatarFragmentDoc = gql`
+    fragment StaffMemberAvatar on User {
+  ...StaffMember
+  avatar(size: 512) {
+    url
+  }
+}
+    ${StaffMemberFragmentDoc}`;
+export const AppAvatarFragmentDoc = gql`
+    fragment AppAvatar on App {
+  id
+  name
+}
+    `;
+export const TransactionEventFragmentDoc = gql`
+    fragment TransactionEvent on TransactionEvent {
+  id
+  pspReference
+  amount {
+    ...Money
+  }
+  type
+  message
+  createdAt
+  createdBy {
+    ... on User {
+      ...StaffMemberAvatar
+    }
+    ... on App {
+      ...AppAvatar
+    }
+  }
+  externalUrl
+}
+    ${MoneyFragmentDoc}
+${StaffMemberAvatarFragmentDoc}
+${AppAvatarFragmentDoc}`;
+export const TransactionItemFragmentDoc = gql`
+    fragment TransactionItem on TransactionItem {
+  id
+  type
+  pspReference
+  actions
+  type
+  status
+  externalUrl
+  events {
+    ...TransactionEvent
+  }
+  authorizedAmount {
+    ...Money
+  }
+  chargedAmount {
+    ...Money
+  }
+  refundedAmount {
+    ...Money
+  }
+  canceledAmount {
+    ...Money
+  }
+  authorizePendingAmount {
+    ...Money
+  }
+  chargePendingAmount {
+    ...Money
+  }
+  refundPendingAmount {
+    ...Money
+  }
+  cancelPendingAmount {
+    ...Money
+  }
+}
+    ${TransactionEventFragmentDoc}
+${MoneyFragmentDoc}`;
+export const OrderPaymentFragmentDoc = gql`
+    fragment OrderPayment on Payment {
+  id
+  isActive
+  actions
+  gateway
+  paymentMethodType
+  availableCaptureAmount {
+    ...Money
+  }
+  capturedAmount {
+    ...Money
+  }
+  total {
+    ...Money
+  }
+  availableRefundAmount {
+    ...Money
+  }
+  modified
+  transactions {
+    id
+    token
+    created
+    kind
+    isSuccess
+  }
+}
+    ${MoneyFragmentDoc}`;
+export const OrderGiftCardFragmentDoc = gql`
+    fragment OrderGiftCard on GiftCard {
+  id
+  last4CodeChars
+  events {
+    id
+    type
+    orderId
+    date
+    balance {
+      initialBalance {
+        ...Money
+      }
+      currentBalance {
+        ...Money
+      }
+      oldInitialBalance {
+        ...Money
+      }
+      oldCurrentBalance {
+        ...Money
+      }
+    }
+  }
+}
+    ${MoneyFragmentDoc}`;
+export const UserBaseAvatarFragmentDoc = gql`
+    fragment UserBaseAvatar on User {
+  id
+  firstName
+  lastName
+  email
+  avatar {
+    url
+    alt
+  }
+}
+    `;
+export const OrderGrantedRefundFragmentDoc = gql`
+    fragment OrderGrantedRefund on OrderGrantedRefund {
+  id
+  createdAt
+  amount {
+    currency
+    amount
+  }
+  reason
+  user {
+    ...UserBaseAvatar
+  }
+  app {
+    id
+    name
+  }
+}
+    ${UserBaseAvatarFragmentDoc}`;
 export const OrderEventFragmentDoc = gql`
     fragment OrderEvent on OrderEvent {
   id
@@ -1455,28 +1638,16 @@ export const OrderDetailsFragmentDoc = gql`
     ...Address
   }
   transactions {
-    id
+    ...TransactionItem
+  }
+  payments {
+    ...OrderPayment
   }
   giftCards {
-    events {
+    ...OrderGiftCard
-      id
-      type
-      orderId
-      balance {
-        initialBalance {
-          ...Money
-        }
-        currentBalance {
-          ...Money
-        }
-        oldInitialBalance {
-          ...Money
-        }
-        oldCurrentBalance {
-          ...Money
-        }
-      }
   }
+  grantedRefunds {
+    ...OrderGrantedRefund
   }
   isShippingRequired
   canFinalize
@@ -1548,13 +1719,40 @@ export const OrderDetailsFragmentDoc = gql`
       ...Money
     }
   }
+  totalRemainingGrant {
+    ...Money
+  }
+  totalGrantedRefund {
+    ...Money
+  }
+  totalRefundPending {
+    ...Money
+  }
+  totalRefunded {
+    ...Money
+  }
   actions
+  totalAuthorizePending {
+    ...Money
+  }
   totalAuthorized {
     ...Money
   }
   totalCaptured {
     ...Money
   }
+  totalCharged {
+    ...Money
+  }
+  totalChargePending {
+    ...Money
+  }
+  totalCanceled {
+    ...Money
+  }
+  totalCancelPending {
+    ...Money
+  }
   totalBalance {
     ...Money
   }
@@ -1592,11 +1790,18 @@ export const OrderDetailsFragmentDoc = gql`
     defaultCountry {
       code
     }
+    orderSettings {
+      markAsPaidStrategy
+    }
   }
   isPaid
 }
     ${MetadataFragmentDoc}
 ${AddressFragmentDoc}
+${TransactionItemFragmentDoc}
+${OrderPaymentFragmentDoc}
+${OrderGiftCardFragmentDoc}
+${OrderGrantedRefundFragmentDoc}
 ${MoneyFragmentDoc}
 ${OrderEventFragmentDoc}
 ${FulfillmentFragmentDoc}
@@ -1671,6 +1876,62 @@ export const OrderLineStockDataFragmentDoc = gql`
   }
 }
     ${StockFragmentDoc}`;
+export const OrderLineGrantRefundFragmentDoc = gql`
+    fragment OrderLineGrantRefund on OrderLine {
+  id
+  thumbnail {
+    url
+  }
+  productName
+  quantity
+  quantityToFulfill
+  variantName
+  productName
+  unitPrice {
+    gross {
+      ...Money
+    }
+  }
+}
+    ${MoneyFragmentDoc}`;
+export const OrderFulfillmentGrantRefundFragmentDoc = gql`
+    fragment OrderFulfillmentGrantRefund on Fulfillment {
+  id
+  fulfillmentOrder
+  status
+  lines {
+    id
+    quantity
+    orderLine {
+      ...OrderLineGrantRefund
+    }
+  }
+}
+    ${OrderLineGrantRefundFragmentDoc}`;
+export const OrderDetailsGrantRefundFragmentDoc = gql`
+    fragment OrderDetailsGrantRefund on Order {
+  id
+  number
+  lines {
+    ...OrderLineGrantRefund
+  }
+  fulfillments {
+    ...OrderFulfillmentGrantRefund
+  }
+  shippingPrice {
+    gross {
+      ...Money
+    }
+  }
+  total {
+    gross {
+      ...Money
+    }
+  }
+}
+    ${OrderLineGrantRefundFragmentDoc}
+${OrderFulfillmentGrantRefundFragmentDoc}
+${MoneyFragmentDoc}`;
 export const PageTypeFragmentDoc = gql`
     fragment PageType on PageType {
   id
@@ -1822,15 +2083,6 @@ export const PermissionFragmentDoc = gql`
   name
 }
     `;
-export const StaffMemberFragmentDoc = gql`
-    fragment StaffMember on User {
-  id
-  email
-  firstName
-  isActive
-  lastName
-}
-    `;
 export const PermissionGroupMemberFragmentDoc = gql`
     fragment PermissionGroupMember on User {
   ...StaffMember
@@ -2466,14 +2718,6 @@ export const StaffMemberDetailsFragmentDoc = gql`
   }
 }
     ${StaffMemberFragmentDoc}`;
-export const StaffMemberAvatarFragmentDoc = gql`
-    fragment StaffMemberAvatar on User {
-  ...StaffMember
-  avatar(size: 512) {
-    url
-  }
-}
-    ${StaffMemberFragmentDoc}`;
 export const CountryFragmentDoc = gql`
     fragment Country on CountryDisplay {
   country
@@ -9578,6 +9822,254 @@ export function useOrderSettingsUpdateMutation(baseOptions?: ApolloReactHooks.Mu
 export type OrderSettingsUpdateMutationHookResult = ReturnType<typeof useOrderSettingsUpdateMutation>;
 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) {
+    errors {
+      ...TransactionRequestActionError
+    }
+  }
+}
+    ${TransactionRequestActionErrorFragmentDoc}`;
+export type OrderTransactionRequestActionMutationFn = Apollo.MutationFunction<Types.OrderTransactionRequestActionMutation, Types.OrderTransactionRequestActionMutationVariables>;
+
+/**
+ * __useOrderTransactionRequestActionMutation__
+ *
+ * To run a mutation, you first call `useOrderTransactionRequestActionMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useOrderTransactionRequestActionMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [orderTransactionRequestActionMutation, { data, loading, error }] = useOrderTransactionRequestActionMutation({
+ *   variables: {
+ *      action: // value for 'action'
+ *      transactionId: // value for 'transactionId'
+ *   },
+ * });
+ */
+export function useOrderTransactionRequestActionMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.OrderTransactionRequestActionMutation, Types.OrderTransactionRequestActionMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useMutation<Types.OrderTransactionRequestActionMutation, Types.OrderTransactionRequestActionMutationVariables>(OrderTransactionRequestActionDocument, options);
+      }
+export type OrderTransactionRequestActionMutationHookResult = ReturnType<typeof useOrderTransactionRequestActionMutation>;
+export type OrderTransactionRequestActionMutationResult = Apollo.MutationResult<Types.OrderTransactionRequestActionMutation>;
+export type OrderTransactionRequestActionMutationOptions = Apollo.BaseMutationOptions<Types.OrderTransactionRequestActionMutation, Types.OrderTransactionRequestActionMutationVariables>;
+export const OrderGrantRefundAddDocument = gql`
+    mutation OrderGrantRefundAdd($orderId: ID!, $amount: Decimal!, $reason: String) {
+  orderGrantRefundCreate(id: $orderId, input: {amount: $amount, reason: $reason}) {
+    errors {
+      ...OrderGrantRefundCreateError
+    }
+  }
+}
+    ${OrderGrantRefundCreateErrorFragmentDoc}`;
+export type OrderGrantRefundAddMutationFn = Apollo.MutationFunction<Types.OrderGrantRefundAddMutation, Types.OrderGrantRefundAddMutationVariables>;
+
+/**
+ * __useOrderGrantRefundAddMutation__
+ *
+ * To run a mutation, you first call `useOrderGrantRefundAddMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useOrderGrantRefundAddMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [orderGrantRefundAddMutation, { data, loading, error }] = useOrderGrantRefundAddMutation({
+ *   variables: {
+ *      orderId: // value for 'orderId'
+ *      amount: // value for 'amount'
+ *      reason: // value for 'reason'
+ *   },
+ * });
+ */
+export function useOrderGrantRefundAddMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.OrderGrantRefundAddMutation, Types.OrderGrantRefundAddMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useMutation<Types.OrderGrantRefundAddMutation, Types.OrderGrantRefundAddMutationVariables>(OrderGrantRefundAddDocument, options);
+      }
+export type OrderGrantRefundAddMutationHookResult = ReturnType<typeof useOrderGrantRefundAddMutation>;
+export type OrderGrantRefundAddMutationResult = Apollo.MutationResult<Types.OrderGrantRefundAddMutation>;
+export type OrderGrantRefundAddMutationOptions = Apollo.BaseMutationOptions<Types.OrderGrantRefundAddMutation, Types.OrderGrantRefundAddMutationVariables>;
+export const OrderGrantRefundEditDocument = gql`
+    mutation OrderGrantRefundEdit($refundId: ID!, $amount: Decimal!, $reason: String) {
+  orderGrantRefundUpdate(id: $refundId, input: {amount: $amount, reason: $reason}) {
+    errors {
+      ...OrderGrantRefundUpdateError
+    }
+  }
+}
+    ${OrderGrantRefundUpdateErrorFragmentDoc}`;
+export type OrderGrantRefundEditMutationFn = Apollo.MutationFunction<Types.OrderGrantRefundEditMutation, Types.OrderGrantRefundEditMutationVariables>;
+
+/**
+ * __useOrderGrantRefundEditMutation__
+ *
+ * To run a mutation, you first call `useOrderGrantRefundEditMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useOrderGrantRefundEditMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [orderGrantRefundEditMutation, { data, loading, error }] = useOrderGrantRefundEditMutation({
+ *   variables: {
+ *      refundId: // value for 'refundId'
+ *      amount: // value for 'amount'
+ *      reason: // value for 'reason'
+ *   },
+ * });
+ */
+export function useOrderGrantRefundEditMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.OrderGrantRefundEditMutation, Types.OrderGrantRefundEditMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useMutation<Types.OrderGrantRefundEditMutation, Types.OrderGrantRefundEditMutationVariables>(OrderGrantRefundEditDocument, options);
+      }
+export type OrderGrantRefundEditMutationHookResult = ReturnType<typeof useOrderGrantRefundEditMutation>;
+export type OrderGrantRefundEditMutationResult = Apollo.MutationResult<Types.OrderGrantRefundEditMutation>;
+export type OrderGrantRefundEditMutationOptions = Apollo.BaseMutationOptions<Types.OrderGrantRefundEditMutation, Types.OrderGrantRefundEditMutationVariables>;
+export const OrderSendRefundDocument = gql`
+    mutation OrderSendRefund($amount: PositiveDecimal!, $transactionId: ID!) {
+  transactionRequestAction(
+    actionType: REFUND
+    amount: $amount
+    id: $transactionId
+  ) {
+    transaction {
+      ...TransactionItem
+    }
+    errors {
+      ...TransactionRequestActionError
+    }
+  }
+}
+    ${TransactionItemFragmentDoc}
+${TransactionRequestActionErrorFragmentDoc}`;
+export type OrderSendRefundMutationFn = Apollo.MutationFunction<Types.OrderSendRefundMutation, Types.OrderSendRefundMutationVariables>;
+
+/**
+ * __useOrderSendRefundMutation__
+ *
+ * To run a mutation, you first call `useOrderSendRefundMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useOrderSendRefundMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [orderSendRefundMutation, { data, loading, error }] = useOrderSendRefundMutation({
+ *   variables: {
+ *      amount: // value for 'amount'
+ *      transactionId: // value for 'transactionId'
+ *   },
+ * });
+ */
+export function useOrderSendRefundMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.OrderSendRefundMutation, Types.OrderSendRefundMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useMutation<Types.OrderSendRefundMutation, Types.OrderSendRefundMutationVariables>(OrderSendRefundDocument, options);
+      }
+export type OrderSendRefundMutationHookResult = ReturnType<typeof useOrderSendRefundMutation>;
+export type OrderSendRefundMutationResult = Apollo.MutationResult<Types.OrderSendRefundMutation>;
+export type OrderSendRefundMutationOptions = Apollo.BaseMutationOptions<Types.OrderSendRefundMutation, Types.OrderSendRefundMutationVariables>;
+export const CreateManualTransactionCaptureDocument = gql`
+    mutation CreateManualTransactionCapture($orderId: ID!, $amount: PositiveDecimal!, $currency: String!, $description: String, $pspReference: String) {
+  transactionCreate(
+    id: $orderId
+    transaction: {type: "Manual capture", status: "Success", pspReference: $pspReference, amountCharged: {amount: $amount, currency: $currency}}
+    transactionEvent: {status: SUCCESS, pspReference: $pspReference, name: $description}
+  ) {
+    transaction {
+      ...TransactionItem
+    }
+    errors {
+      ...TransactionCreateError
+    }
+  }
+}
+    ${TransactionItemFragmentDoc}
+${TransactionCreateErrorFragmentDoc}`;
+export type CreateManualTransactionCaptureMutationFn = Apollo.MutationFunction<Types.CreateManualTransactionCaptureMutation, Types.CreateManualTransactionCaptureMutationVariables>;
+
+/**
+ * __useCreateManualTransactionCaptureMutation__
+ *
+ * To run a mutation, you first call `useCreateManualTransactionCaptureMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateManualTransactionCaptureMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createManualTransactionCaptureMutation, { data, loading, error }] = useCreateManualTransactionCaptureMutation({
+ *   variables: {
+ *      orderId: // value for 'orderId'
+ *      amount: // value for 'amount'
+ *      currency: // value for 'currency'
+ *      description: // value for 'description'
+ *      pspReference: // value for 'pspReference'
+ *   },
+ * });
+ */
+export function useCreateManualTransactionCaptureMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.CreateManualTransactionCaptureMutation, Types.CreateManualTransactionCaptureMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useMutation<Types.CreateManualTransactionCaptureMutation, Types.CreateManualTransactionCaptureMutationVariables>(CreateManualTransactionCaptureDocument, options);
+      }
+export type CreateManualTransactionCaptureMutationHookResult = ReturnType<typeof useCreateManualTransactionCaptureMutation>;
+export type CreateManualTransactionCaptureMutationResult = Apollo.MutationResult<Types.CreateManualTransactionCaptureMutation>;
+export type CreateManualTransactionCaptureMutationOptions = Apollo.BaseMutationOptions<Types.CreateManualTransactionCaptureMutation, Types.CreateManualTransactionCaptureMutationVariables>;
+export const CreateManualTransactionRefundDocument = gql`
+    mutation CreateManualTransactionRefund($orderId: ID!, $amount: PositiveDecimal!, $currency: String!, $description: String, $pspReference: String) {
+  transactionCreate(
+    id: $orderId
+    transaction: {type: "Manual refund", status: "Success", pspReference: $pspReference, amountRefunded: {amount: $amount, currency: $currency}}
+    transactionEvent: {status: SUCCESS, pspReference: $pspReference, name: $description}
+  ) {
+    transaction {
+      ...TransactionItem
+    }
+    errors {
+      ...TransactionCreateError
+    }
+  }
+}
+    ${TransactionItemFragmentDoc}
+${TransactionCreateErrorFragmentDoc}`;
+export type CreateManualTransactionRefundMutationFn = Apollo.MutationFunction<Types.CreateManualTransactionRefundMutation, Types.CreateManualTransactionRefundMutationVariables>;
+
+/**
+ * __useCreateManualTransactionRefundMutation__
+ *
+ * To run a mutation, you first call `useCreateManualTransactionRefundMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateManualTransactionRefundMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createManualTransactionRefundMutation, { data, loading, error }] = useCreateManualTransactionRefundMutation({
+ *   variables: {
+ *      orderId: // value for 'orderId'
+ *      amount: // value for 'amount'
+ *      currency: // value for 'currency'
+ *      description: // value for 'description'
+ *      pspReference: // value for 'pspReference'
+ *   },
+ * });
+ */
+export function useCreateManualTransactionRefundMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.CreateManualTransactionRefundMutation, Types.CreateManualTransactionRefundMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useMutation<Types.CreateManualTransactionRefundMutation, Types.CreateManualTransactionRefundMutationVariables>(CreateManualTransactionRefundDocument, options);
+      }
+export type CreateManualTransactionRefundMutationHookResult = ReturnType<typeof useCreateManualTransactionRefundMutation>;
+export type CreateManualTransactionRefundMutationResult = Apollo.MutationResult<Types.CreateManualTransactionRefundMutation>;
+export type CreateManualTransactionRefundMutationOptions = Apollo.BaseMutationOptions<Types.CreateManualTransactionRefundMutation, Types.CreateManualTransactionRefundMutationVariables>;
 export const OrderListDocument = gql`
     query OrderList($first: Int, $after: String, $last: Int, $before: String, $filter: OrderFilterInput, $sort: OrderSortingInput) {
   orders(
@@ -9739,9 +10231,13 @@ export const OrderDetailsDocument = gql`
     defaultWeightUnit
     fulfillmentAllowUnpaid
     fulfillmentAutoApprove
+    availablePaymentGateways {
+      ...PaymentGateway
+    }
   }
 }
-    ${OrderDetailsFragmentDoc}`;
+    ${OrderDetailsFragmentDoc}
+${PaymentGatewayFragmentDoc}`;
 
 /**
  * __useOrderDetailsQuery__
@@ -9770,6 +10266,84 @@ export function useOrderDetailsLazyQuery(baseOptions?: ApolloReactHooks.LazyQuer
 export type OrderDetailsQueryHookResult = ReturnType<typeof useOrderDetailsQuery>;
 export type OrderDetailsLazyQueryHookResult = ReturnType<typeof useOrderDetailsLazyQuery>;
 export type OrderDetailsQueryResult = Apollo.QueryResult<Types.OrderDetailsQuery, Types.OrderDetailsQueryVariables>;
+export const OrderDetailsGrantRefundDocument = gql`
+    query OrderDetailsGrantRefund($id: ID!) {
+  order(id: $id) {
+    ...OrderDetailsGrantRefund
+  }
+}
+    ${OrderDetailsGrantRefundFragmentDoc}`;
+
+/**
+ * __useOrderDetailsGrantRefundQuery__
+ *
+ * To run a query within a React component, call `useOrderDetailsGrantRefundQuery` and pass it any options that fit your needs.
+ * When your component renders, `useOrderDetailsGrantRefundQuery` 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 } = useOrderDetailsGrantRefundQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useOrderDetailsGrantRefundQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.OrderDetailsGrantRefundQuery, Types.OrderDetailsGrantRefundQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.OrderDetailsGrantRefundQuery, Types.OrderDetailsGrantRefundQueryVariables>(OrderDetailsGrantRefundDocument, options);
+      }
+export function useOrderDetailsGrantRefundLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.OrderDetailsGrantRefundQuery, Types.OrderDetailsGrantRefundQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.OrderDetailsGrantRefundQuery, Types.OrderDetailsGrantRefundQueryVariables>(OrderDetailsGrantRefundDocument, options);
+        }
+export type OrderDetailsGrantRefundQueryHookResult = ReturnType<typeof useOrderDetailsGrantRefundQuery>;
+export type OrderDetailsGrantRefundLazyQueryHookResult = ReturnType<typeof useOrderDetailsGrantRefundLazyQuery>;
+export type OrderDetailsGrantRefundQueryResult = Apollo.QueryResult<Types.OrderDetailsGrantRefundQuery, Types.OrderDetailsGrantRefundQueryVariables>;
+export const OrderDetailsGrantRefundEditDocument = gql`
+    query OrderDetailsGrantRefundEdit($id: ID!) {
+  order(id: $id) {
+    ...OrderDetailsGrantRefund
+    grantedRefunds {
+      id
+      reason
+      amount {
+        ...Money
+      }
+    }
+  }
+}
+    ${OrderDetailsGrantRefundFragmentDoc}
+${MoneyFragmentDoc}`;
+
+/**
+ * __useOrderDetailsGrantRefundEditQuery__
+ *
+ * To run a query within a React component, call `useOrderDetailsGrantRefundEditQuery` and pass it any options that fit your needs.
+ * When your component renders, `useOrderDetailsGrantRefundEditQuery` 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 } = useOrderDetailsGrantRefundEditQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useOrderDetailsGrantRefundEditQuery(baseOptions: ApolloReactHooks.QueryHookOptions<Types.OrderDetailsGrantRefundEditQuery, Types.OrderDetailsGrantRefundEditQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.OrderDetailsGrantRefundEditQuery, Types.OrderDetailsGrantRefundEditQueryVariables>(OrderDetailsGrantRefundEditDocument, options);
+      }
+export function useOrderDetailsGrantRefundEditLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.OrderDetailsGrantRefundEditQuery, Types.OrderDetailsGrantRefundEditQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.OrderDetailsGrantRefundEditQuery, Types.OrderDetailsGrantRefundEditQueryVariables>(OrderDetailsGrantRefundEditDocument, options);
+        }
+export type OrderDetailsGrantRefundEditQueryHookResult = ReturnType<typeof useOrderDetailsGrantRefundEditQuery>;
+export type OrderDetailsGrantRefundEditLazyQueryHookResult = ReturnType<typeof useOrderDetailsGrantRefundEditLazyQuery>;
+export type OrderDetailsGrantRefundEditQueryResult = Apollo.QueryResult<Types.OrderDetailsGrantRefundEditQuery, Types.OrderDetailsGrantRefundEditQueryVariables>;
 export const OrderFulfillDataDocument = gql`
     query OrderFulfillData($orderId: ID!) {
   order(id: $orderId) {

src/graphql/transactions.ts

@@ -1,25 +0,0 @@
-export * from "./hooks.transactions.generated";
-export * from "./types.transactions.generated";
-export * from "./typePolicies.transactions.generated";
-export { default as introspectionQueryResultData } from "./fragmentTypes.transactions.generated";
-
-// Rename OrderDetailsWithTransactions -> OrderDetails
-
-export type {
-  OrderDetailsWithTransactionsQueryResult as OrderDetailsQueryResult,
-  OrderDetailsWithTransactionsQueryHookResult as OrderDetailsQueryHookResult,
-  OrderDetailsWithTransactionsLazyQueryHookResult as OrderDetailsLazyQueryHookResult,
-} from "./hooks.transactions.generated";
-
-export {
-  OrderDetailsWithTransactionsFragmentDoc as OrderDetailsFragmentDoc,
-  OrderDetailsWithTransactionsDocument as OrderDetailsDocument,
-  useOrderDetailsWithTransactionsQuery as useOrderDetailsQuery,
-  useOrderDetailsWithTransactionsLazyQuery as useOrderDetailsLazyQuery,
-} from "./hooks.transactions.generated";
-
-export type {
-  OrderDetailsWithTransactionsFragment as OrderDetailsFragment,
-  OrderDetailsWithTransactionsQueryVariables as OrderDetailsQueryVariables,
-  OrderDetailsWithTransactionsQuery as OrderDetailsQuery,
-} from "./types.transactions.generated";

src/orders/components/OrderAddTransaction/OrderAddTransaction.test.tsx

@@ -1,4 +1,4 @@
-import { orderWithTransactions } from "@dashboard/orders/fixtures";
+import { order } from "@dashboard/orders/fixtures";
 import Wrapper from "@test/wrapper";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -22,10 +22,7 @@ describe("OrderAddTransaction", () => {
 
     render(
       <Wrapper>
-        <OrderAddTransaction
+        <OrderAddTransaction order={order(null)} onAddTransaction={callback} />
-          order={orderWithTransactions}
-          onAddTransaction={callback}
-        />
       </Wrapper>,
     );
     const button = await screen.findByRole("button");

src/orders/components/OrderAddTransaction/OrderAddTransaction.tsx

@@ -1,5 +1,5 @@
 import Skeleton from "@dashboard/components/Skeleton";
-import { OrderDetailsFragment } from "@dashboard/graphql/transactions";
+import { OrderDetailsFragment } from "@dashboard/graphql";
 import { Button, makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/orders/components/OrderCustomer/AddrssTextError.tsx

@@ -1,5 +1,5 @@
 import FormSpacer from "@dashboard/components/FormSpacer";
-import { OrderErrorFragment } from "@dashboard/orders/types";
+import { OrderErrorFragment } from "@dashboard/graphql";
 import getOrderErrorMessage from "@dashboard/utils/errors/order";
 import { Typography } from "@material-ui/core";
 import React from "react";

src/orders/components/OrderCustomer/OrderCustomer.tsx

@@ -8,14 +8,15 @@ import Link from "@dashboard/components/Link";
 import RequirePermissions from "@dashboard/components/RequirePermissions";
 import SingleAutocompleteSelectField from "@dashboard/components/SingleAutocompleteSelectField";
 import Skeleton from "@dashboard/components/Skeleton";
-import { PermissionEnum, SearchCustomersQuery } from "@dashboard/graphql";
-import useStateFromProps from "@dashboard/hooks/useStateFromProps";
-import { buttonMessages } from "@dashboard/intl";
 import {
+  OrderDetailsFragment,
   OrderErrorCode,
   OrderErrorFragment,
-  OrderSharedType,
+  PermissionEnum,
-} from "@dashboard/orders/types";
+  SearchCustomersQuery,
+} from "@dashboard/graphql";
+import useStateFromProps from "@dashboard/hooks/useStateFromProps";
+import { buttonMessages } from "@dashboard/intl";
 import { FetchMoreProps, RelayToFlat } from "@dashboard/types";
 import createSingleAutocompleteSelectHandler from "@dashboard/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { Card, CardContent, Typography } from "@material-ui/core";
@@ -36,7 +37,7 @@ export interface CustomerEditData {
 }
 
 export interface OrderCustomerProps extends Partial<FetchMoreProps> {
-  order: OrderSharedType;
+  order: OrderDetailsFragment;
   users?: RelayToFlat<SearchCustomersQuery["search"]>;
   loading?: boolean;
   errors: OrderErrorFragment[];

src/orders/components/OrderCustomer/PickupAnnotation.tsx

@@ -1,6 +1,8 @@
 import FormSpacer from "@dashboard/components/FormSpacer";
-import { WarehouseClickAndCollectOptionEnum } from "@dashboard/graphql";
+import {
-import { OrderSharedType } from "@dashboard/orders/types";
+  OrderDetailsFragment,
+  WarehouseClickAndCollectOptionEnum,
+} from "@dashboard/graphql";
 import { Typography } from "@material-ui/core";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -8,7 +10,7 @@ import { FormattedMessage } from "react-intl";
 import messages from "./messages";
 
 interface PickupAnnotationProps {
-  order?: OrderSharedType;
+  order?: OrderDetailsFragment;
 }
 
 export const PickupAnnotation: React.FC<PickupAnnotationProps> = ({

src/orders/components/OrderDetailsPage/OrderDetailsPage.stories.tsx

@@ -1,19 +1,19 @@
 import {
   FulfillmentStatus,
   GiftCardEventsEnum,
+  OrderDetailsFragment,
   OrderStatus,
   PaymentChargeStatusEnum,
 } from "@dashboard/graphql";
 import {
   grantedRefunds,
+  order,
   ORDER_AMOUNT,
-  orderWithTransactions as order,
   payments,
   prepareMoney,
-  shopWithTransactions,
+  shop,
   transactions,
 } from "@dashboard/orders/fixtures";
-import { OrderBothTypes } from "@dashboard/orders/types";
 import Decorator from "@dashboard/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -43,9 +43,9 @@ const props: Omit<OrderDetailsPageProps, "classes"> = {
   onShippingAddressEdit: undefined,
   onSubmit: () => undefined,
   onAddManualTransaction: () => undefined,
-  order,
+  order: order(null),
   errors: [],
-  shop: shopWithTransactions,
+  shop,
   saveButtonBarState: "default",
 };
 
@@ -304,7 +304,7 @@ storiesOf("Views / Orders / Order details / transactions", module)
               ],
             },
           ],
-        } as OrderBothTypes
+        } as OrderDetailsFragment
       }
     />
   ));

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -11,17 +11,16 @@ import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
-import { OrderDetailsFragment, OrderDetailsQuery } from "@dashboard/graphql";
 import {
-  OrderDetailsWithTransactionsFragment,
+  OrderDetailsFragment,
-  OrderDetailsWithTransactionsQuery,
+  OrderDetailsQuery,
+  OrderErrorFragment,
   OrderStatus,
   TransactionActionEnum,
-} from "@dashboard/graphql/transactions";
+} from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { defaultGraphiQLQuery } from "@dashboard/orders/queries";
-import { OrderErrorFragment, OrderSharedType } from "@dashboard/orders/types";
 import { orderListUrl } from "@dashboard/orders/urls";
 import { mapMetadataItemToInput } from "@dashboard/utils/maps";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
@@ -45,8 +44,8 @@ import Title from "./Title";
 import { filteredConditionalItems, hasAnyItemsReplaceable } from "./utils";
 
 export interface OrderDetailsPageProps {
-  order: OrderDetailsFragment | OrderDetailsWithTransactionsFragment;
+  order: OrderDetailsFragment | OrderDetailsFragment;
-  shop: OrderDetailsQuery["shop"] | OrderDetailsWithTransactionsQuery["shop"];
+  shop: OrderDetailsQuery["shop"];
   shippingMethods?: Array<{
     id: string;
     name: string;
@@ -183,7 +182,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
         label: intl.formatMessage(messages.returnOrder),
         onSelect: onOrderReturn,
       },
-      shouldExist: hasAnyItemsReplaceable(order as OrderSharedType),
+      shouldExist: hasAnyItemsReplaceable(order),
     },
   ]);
 
@@ -211,10 +210,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
 
         return (
           <DetailPageLayout>
-            <TopNav
+            <TopNav href={orderListUrl()} title={<Title order={order} />}>
-              href={orderListUrl()}
-              title={<Title order={order as OrderSharedType} />}
-            >
               <CardMenu
                 menuItems={[
                   ...selectCardMenuItems,
@@ -239,7 +235,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
               ) : (
                 <>
                   <OrderDraftDetails
-                    order={order as OrderSharedType}
+                    order={order}
                     errors={errors}
                     onOrderLineAdd={onOrderLineAdd}
                     onOrderLineChange={onOrderLineChange}
@@ -254,7 +250,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
                   <OrderFulfilledProductsCard
                     fulfillment={fulfillment}
                     fulfillmentAllowUnpaid={shop?.fulfillmentAllowUnpaid}
-                    order={order as OrderSharedType}
+                    order={order}
                     onOrderFulfillmentCancel={() =>
                       onFulfillmentCancel(fulfillment.id)
                     }
@@ -288,7 +284,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
               <OrderCustomer
                 canEditAddresses={canEditAddresses}
                 canEditCustomer={false}
-                order={order as OrderSharedType}
+                order={order}
                 errors={errors}
                 onBillingAddressEdit={onBillingAddressEdit}
                 onShippingAddressEdit={onShippingAddressEdit}

src/orders/components/OrderDetailsPage/Title.tsx

@@ -1,7 +1,7 @@
 import { DateTime } from "@dashboard/components/Date";
 import { Pill } from "@dashboard/components/Pill";
+import { OrderDetailsFragment } from "@dashboard/graphql";
 import { transformOrderStatus } from "@dashboard/misc";
-import { OrderSharedType } from "@dashboard/orders/types";
 import { Typography } from "@material-ui/core";
 import { Skeleton } from "@material-ui/lab";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -10,7 +10,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 export interface TitleProps {
-  order?: OrderSharedType;
+  order?: OrderDetailsFragment;
 }
 
 const useStyles = makeStyles(

src/orders/components/OrderDetailsPage/utils.ts

@@ -1,4 +1,4 @@
-import { OrderSharedType } from "@dashboard/orders/types";
+import { OrderDetailsFragment } from "@dashboard/graphql";
 
 import {
   getFulfilledFulfillemnts,
@@ -6,7 +6,7 @@ import {
   getWaitingFulfillments,
 } from "../OrderReturnPage/utils";
 
-export const hasAnyItemsReplaceable = (order?: OrderSharedType) => {
+export const hasAnyItemsReplaceable = (order?: OrderDetailsFragment) => {
   if (!order) {
     return false;
   }

src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx

@@ -1,7 +1,11 @@
 import { Button } from "@dashboard/components/Button";
 import CardTitle from "@dashboard/components/CardTitle";
-import { ChannelUsabilityDataQuery, OrderLineInput } from "@dashboard/graphql";
+import {
-import { OrderErrorFragment, OrderSharedType } from "@dashboard/orders/types";
+  ChannelUsabilityDataQuery,
+  OrderDetailsFragment,
+  OrderErrorFragment,
+  OrderLineInput,
+} from "@dashboard/graphql";
 import {
   OrderDiscountContext,
   OrderDiscountContextConsumerProps,
@@ -15,7 +19,7 @@ import OrderDraftDetailsProducts from "../OrderDraftDetailsProducts";
 import OrderDraftDetailsSummary from "../OrderDraftDetailsSummary";
 
 interface OrderDraftDetailsProps {
-  order: OrderSharedType;
+  order: OrderDetailsFragment;
   channelUsabilityData?: ChannelUsabilityDataQuery;
   errors: OrderErrorFragment[];
   onOrderLineAdd: () => void;

src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx

@@ -1,7 +1,7 @@
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Skeleton from "@dashboard/components/Skeleton";
 import TableRowLink from "@dashboard/components/TableRowLink";
-import { OrderErrorFragment, OrderSharedType } from "@dashboard/orders/types";
+import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
 import {
   OrderLineDiscountConsumer,
   OrderLineDiscountContextConsumerProps,
@@ -56,7 +56,7 @@ const useStyles = makeStyles(
 );
 
 interface OrderDraftDetailsProductsProps {
-  order?: OrderSharedType;
+  order?: OrderDetailsFragment;
   errors: OrderErrorFragment[];
   onOrderLineChange: (id: string, data: FormData) => void;
   onOrderLineRemove: (id: string) => void;

src/orders/components/OrderDraftDetailsProducts/TableLine.tsx

@@ -3,8 +3,11 @@ import Money from "@dashboard/components/Money";
 import TableCellAvatar from "@dashboard/components/TableCellAvatar";
 import { AVATAR_MARGIN } from "@dashboard/components/TableCellAvatar/Avatar";
 import TableRowLink from "@dashboard/components/TableRowLink";
-import { OrderLineFragment, OrderLineInput } from "@dashboard/graphql";
+import {
-import { OrderErrorFragment } from "@dashboard/orders/types";
+  OrderErrorFragment,
+  OrderLineFragment,
+  OrderLineInput,
+} from "@dashboard/graphql";
 import { OrderLineDiscountContextConsumerProps } from "@dashboard/products/components/OrderDiscountProviders/OrderLineDiscountProvider";
 import { TableCell, Typography } from "@material-ui/core";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";

src/orders/components/OrderDraftDetailsProducts/useLineAlerts.ts

@@ -1,5 +1,4 @@
-import { OrderLineFragment } from "@dashboard/graphql";
+import { OrderErrorFragment, OrderLineFragment } from "@dashboard/graphql";
-import { OrderErrorFragment } from "@dashboard/orders/types";
 import getOrderErrorMessage from "@dashboard/utils/errors/order";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";

src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx

@@ -1,8 +1,11 @@
 import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
 import Link from "@dashboard/components/Link";
 import Money from "@dashboard/components/Money";
-import { DiscountValueTypeEnum } from "@dashboard/graphql";
+import {
-import { OrderErrorFragment, OrderSharedType } from "@dashboard/orders/types";
+  DiscountValueTypeEnum,
+  OrderDetailsFragment,
+  OrderErrorFragment,
+} from "@dashboard/graphql";
 import { OrderDiscountContextConsumerProps } from "@dashboard/products/components/OrderDiscountProviders/OrderDiscountProvider";
 import { OrderDiscountData } from "@dashboard/products/components/OrderDiscountProviders/types";
 import { getFormErrors } from "@dashboard/utils/errors";
@@ -58,7 +61,7 @@ const PRICE_PLACEHOLDER = "---";
 interface OrderDraftDetailsSummaryProps
   extends OrderDiscountContextConsumerProps {
   disabled?: boolean;
-  order: OrderSharedType;
+  order: OrderDetailsFragment;
   errors: OrderErrorFragment[];
   onShippingMethodEdit: () => void;
 }

src/orders/components/OrderDraftPage/OrderDraftAlert.tsx

@@ -1,5 +1,7 @@
-import { ChannelUsabilityDataQuery } from "@dashboard/graphql";
+import {
-import { OrderSharedType } from "@dashboard/orders/types";
+  ChannelUsabilityDataQuery,
+  OrderDetailsFragment,
+} from "@dashboard/graphql";
 import { Alert, AlertProps } from "@saleor/macaw-ui";
 import clsx from "clsx";
 import React from "react";
@@ -10,7 +12,7 @@ import { alertMessages } from "./messages";
 import { useAlertStyles } from "./styles";
 
 const getAlerts = (
-  order?: OrderSharedType,
+  order?: OrderDetailsFragment,
   channelUsabilityData?: ChannelUsabilityDataQuery,
 ) => {
   const canDetermineShippingMethods =
@@ -37,7 +39,7 @@ const getAlerts = (
 };
 
 export type OrderDraftAlertProps = Omit<AlertProps, "variant" | "close"> & {
-  order?: OrderSharedType;
+  order?: OrderDetailsFragment;
   channelUsabilityData?: ChannelUsabilityDataQuery;
 };
 

src/orders/components/OrderDraftPage/OrderDraftPage.tsx

@@ -7,17 +7,14 @@ import Savebar from "@dashboard/components/Savebar";
 import Skeleton from "@dashboard/components/Skeleton";
 import {
   ChannelUsabilityDataQuery,
+  OrderDetailsFragment,
+  OrderErrorFragment,
   OrderLineInput,
   SearchCustomersQuery,
 } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import OrderChannelSectionCard from "@dashboard/orders/components/OrderChannelSectionCard";
-import {
-  OrderBothTypes,
-  OrderErrorFragment,
-  OrderSharedType,
-} from "@dashboard/orders/types";
 import { orderDraftListUrl } from "@dashboard/orders/urls";
 import { FetchMoreProps, RelayToFlat } from "@dashboard/types";
 import { Typography } from "@material-ui/core";
@@ -33,7 +30,7 @@ import OrderDraftAlert from "./OrderDraftAlert";
 
 export interface OrderDraftPageProps extends FetchMoreProps {
   disabled: boolean;
-  order?: OrderBothTypes;
+  order?: OrderDetailsFragment;
   channelUsabilityData?: ChannelUsabilityDataQuery;
   users: RelayToFlat<SearchCustomersQuery["search"]>;
   usersLoading: boolean;
@@ -116,11 +113,11 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
       </TopNav>
       <DetailPageLayout.Content>
         <OrderDraftAlert
-          order={order as OrderSharedType}
+          order={order as OrderDetailsFragment}
           channelUsabilityData={channelUsabilityData}
         />
         <OrderDraftDetails
-          order={order as OrderSharedType}
+          order={order as OrderDetailsFragment}
           channelUsabilityData={channelUsabilityData}
           errors={errors}
           onOrderLineAdd={onOrderLineAdd}
@@ -144,7 +141,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
           hasMore={hasMore}
           loading={usersLoading}
           errors={errors}
-          order={order as OrderSharedType}
+          order={order as OrderDetailsFragment}
           users={users}
           onBillingAddressEdit={onBillingAddressEdit}
           onCustomerEdit={onCustomerEdit}

src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx

@@ -1,9 +1,8 @@
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import { FulfillmentStatus, OrderDetailsFragment } from "@dashboard/graphql";
-import { useFlags } from "@dashboard/hooks/useFlags";
 import TrashIcon from "@dashboard/icons/Trash";
-import { orderHasTransactions, OrderSharedType } from "@dashboard/orders/types";
+import { orderHasTransactions } from "@dashboard/orders/types";
 import { mergeRepeatedOrderLines } from "@dashboard/orders/utils/data";
 import { Card, CardContent, TableBody } from "@material-ui/core";
 import { IconButton } from "@saleor/macaw-ui";
@@ -20,7 +19,7 @@ import useStyles from "./styles";
 interface OrderFulfilledProductsCardProps {
   fulfillment: OrderDetailsFragment["fulfillments"][0];
   fulfillmentAllowUnpaid: boolean;
-  order?: OrderSharedType;
+  order?: OrderDetailsFragment;
   onOrderFulfillmentApprove: () => void;
   onOrderFulfillmentCancel: () => void;
   onTrackingCodeAdd: () => void;
@@ -49,9 +48,6 @@ const OrderFulfilledProductsCard: React.FC<
     onTrackingCodeAdd,
   } = props;
   const classes = useStyles(props);
-  const { orderTransactions: transactionsFeatureFlag } = useFlags([
-    "orderTransactions",
-  ]);
 
   if (!fulfillment) {
     return null;
@@ -106,10 +102,7 @@ const OrderFulfilledProductsCard: React.FC<
             fulfillmentAllowUnpaid={fulfillmentAllowUnpaid}
             onTrackingCodeAdd={onTrackingCodeAdd}
             onApprove={onOrderFulfillmentApprove}
-            hasTransactions={orderHasTransactions(
+            hasTransactions={orderHasTransactions(order)}
-              order,
-              transactionsFeatureFlag.enabled,
-            )}
           />
         </CardContent>
       </Card>

src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.tsx

@@ -2,7 +2,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Skeleton from "@dashboard/components/Skeleton";
-import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql/transactions";
+import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql";
 import { orderUrl } from "@dashboard/orders/urls";
 import { Card, CardContent, TextField, Typography } from "@material-ui/core";
 import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
@@ -61,7 +61,7 @@ const OrderGrantRefundPage: React.FC<OrderGrantRefundPageProps> = ({
     }
   }, [order]);
 
-  const { set, change, data, submit } = useGrantRefundForm({
+  const { set, change, data, submit, setIsDirty } = useGrantRefundForm({
     onSubmit,
     initialData,
   });
@@ -92,7 +92,10 @@ const OrderGrantRefundPage: React.FC<OrderGrantRefundPageProps> = ({
       <form onSubmit={handleSubmit} className={classes.form}>
         <GrantRefundContext.Provider
           value={{
-            dispatch,
+            dispatch: (...args) => {
+              setIsDirty(true);
+              dispatch(...args);
+            },
             state,
             form: { change, data, set },
             totalSelectedPrice,

src/orders/components/OrderGrantRefundPage/components/ProductCard.tsx

@@ -2,7 +2,7 @@ import { Button } from "@dashboard/components/Button";
 import CardTitle from "@dashboard/components/CardTitle";
 import TableCellAvatar from "@dashboard/components/TableCellAvatar";
 import TableRowLink from "@dashboard/components/TableRowLink";
-import { OrderLineGrantRefundFragment } from "@dashboard/graphql/transactions";
+import { OrderLineGrantRefundFragment } from "@dashboard/graphql";
 import { renderCollection } from "@dashboard/misc";
 import {
   Card,

src/orders/components/OrderGrantRefundPage/components/RefundCard.tsx

@@ -4,12 +4,13 @@ import ConfirmButton from "@dashboard/components/ConfirmButton";
 import { formatMoneyAmount } from "@dashboard/components/Money";
 import PriceField from "@dashboard/components/PriceField";
 import Skeleton from "@dashboard/components/Skeleton";
-import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql/transactions";
+import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql";
 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 { ConfirmButtonTransitionState, LayoutButton } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { Button } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -98,14 +99,14 @@ export const RefundCard = ({
               locale,
             )}
           </span>
-          <LayoutButton
+          <Button
-            state={!loading && "hover"}
             disabled={loading}
-            className={classes.applyButton}
+            variant="secondary"
+            size="small"
             onClick={() => form.set({ amount: totalSelectedPrice.toString() })}
           >
             <FormattedMessage {...buttonMessages.apply} />
-          </LayoutButton>
+          </Button>
         </div>
         <div>
           <PriceField
@@ -117,7 +118,11 @@ export const RefundCard = ({
             name={"amount" as keyof OrderGrantRefundFormData}
             currencySymbol={currency}
             value={form.data.amount}
-            inputProps={{ "data-test-id": "amountInput" }}
+            InputProps={{
+              inputProps: {
+                "data-test-id": "amountInput",
+              },
+            }}
           />
         </div>
         <div className={classes.submitLine}>

src/orders/components/OrderGrantRefundPage/form.ts

@@ -30,7 +30,7 @@ export const useGrantRefundForm = ({
     },
   );
 
-  const { setExitDialogSubmitRef } = useExitFormDialog({
+  const { setExitDialogSubmitRef, setIsDirty } = useExitFormDialog({
     formId,
   });
 
@@ -43,5 +43,5 @@ export const useGrantRefundForm = ({
 
   React.useEffect(() => setExitDialogSubmitRef(submit), [submit]);
 
-  return { set, change, data, submit };
+  return { set, change, data, submit, setIsDirty };
 };

src/orders/components/OrderGrantRefundPage/reducer.ts

@@ -1,4 +1,4 @@
-import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql/transactions";
+import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql";
 import { exhaustiveCheck } from "@dashboard/utils/ts";
 
 export interface ReducerOrderLine {

src/orders/components/OrderGrantRefundPage/styles.ts

@@ -13,7 +13,6 @@ export const useStyles = makeStyles(
     },
     cardLoading: {
       height: "20em",
-      background: "white",
     },
     form: {
       display: "contents",

src/orders/components/OrderGrantRefundPage/utils.ts

@@ -1,4 +1,4 @@
-import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql/transactions";
+import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql";
 import currency from "currency.js";
 
 import { GrantRefundState } from "./reducer";

src/orders/components/OrderGrantedRefunds/OrderGrantedRefunds.tsx

@@ -5,7 +5,7 @@ import Money, { formatMoney } from "@dashboard/components/Money";
 import OverflowTooltip from "@dashboard/components/OverflowTooltip";
 import { Pill } from "@dashboard/components/Pill";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
-import { OrderDetailsFragment } from "@dashboard/graphql/transactions";
+import { OrderDetailsFragment } from "@dashboard/graphql";
 import useLocale from "@dashboard/hooks/useLocale";
 import { buttonMessages } from "@dashboard/intl";
 import { getUserInitials, renderCollection } from "@dashboard/misc";

src/orders/components/OrderHistory/ExtendedDiscountTimelineEvent/ExtendedDiscountTimelineEvent.tsx

@@ -2,7 +2,7 @@ import CardSpacer from "@dashboard/components/CardSpacer";
 import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
 import { TimelineEvent } from "@dashboard/components/Timeline";
 import { TitleElement } from "@dashboard/components/Timeline/TimelineEventHeader";
-import { OrderEventFragment, OrderEventsEnum } from "@dashboard/orders/types";
+import { OrderEventFragment, OrderEventsEnum } from "@dashboard/graphql";
 import { Typography } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";

src/orders/components/OrderHistory/ExtendedTimelineEvent.tsx

@@ -1,6 +1,6 @@
 import Money from "@dashboard/components/Money";
 import { TimelineEvent } from "@dashboard/components/Timeline";
-import { OrderEventFragment, OrderEventsEnum } from "@dashboard/orders/types";
+import { OrderEventFragment, OrderEventsEnum } from "@dashboard/graphql";
 import { Typography } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import camelCase from "lodash/camelCase";

src/orders/components/OrderHistory/LinkedTimelineEvent.tsx

@@ -1,9 +1,6 @@
 import { TimelineEvent } from "@dashboard/components/Timeline";
 import { TitleElement } from "@dashboard/components/Timeline/TimelineEventHeader";
-import {
+import { OrderEventFragment, OrderEventsEnum } from "@dashboard/graphql";
-  OrderEventFragment,
-  OrderEventsEnum,
-} from "@dashboard/graphql/transactions";
 import { orderUrl } from "@dashboard/orders/urls";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";

src/orders/components/OrderHistory/OrderHistory.tsx

@@ -8,8 +8,8 @@ import {
   TimelineEventProps,
   TimelineNote,
 } from "@dashboard/components/Timeline";
+import { OrderEventFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
-import { OrderEventFragment } from "@dashboard/orders/types";
 import { Typography } from "@material-ui/core";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/orders/components/OrderHistory/messages.ts

@@ -1,5 +1,8 @@
-import { OrderEventsEmailsEnum } from "@dashboard/graphql";
+import {
-import { OrderEventFragment, OrderEventsEnum } from "@dashboard/orders/types";
+  OrderEventFragment,
+  OrderEventsEmailsEnum,
+  OrderEventsEnum,
+} from "@dashboard/graphql";
 import { IntlShape } from "react-intl";
 
 const getUserOrApp = (event: OrderEventFragment) => {

src/orders/components/OrderHistory/utils.tsx

@@ -1,7 +1,4 @@
-import {
+import { OrderEventFragment, OrderEventsEnum } from "@dashboard/graphql";
-  OrderEventFragment,
-  OrderEventsEnum,
-} from "@dashboard/graphql/transactions";
 import { getFullName } from "@dashboard/misc";
 import { orderUrl } from "@dashboard/orders/urls";
 import { staffMemberDetailsUrl } from "@dashboard/staff/urls";

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

@@ -16,6 +16,7 @@ export const DescriptionField: React.FC<
       disabled={submitState === "loading" || disabled}
       onChange={handleChangeDescription}
       value={description}
+      inputProps={{ ...props.inputProps, maxLength: 512 }}
     />
   );
 };

src/orders/components/OrderManualTransactionForm/components/PspReferenceField.tsx

@@ -16,6 +16,7 @@ export const PspReferenceField: React.FC<
       disabled={submitState === "loading" || disabled}
       onChange={handleChangePspReference}
       value={pspReference}
+      inputProps={{ ...props.inputProps, maxLength: 512 }}
     />
   );
 };

src/orders/components/OrderPaymentOrTransaction/OrderPaymentOrTransaction.test.tsx

@@ -1,14 +1,16 @@
-import { useFlags } from "@dashboard/hooks/useFlags";
+import { MarkAsPaidStrategyEnum } from "@dashboard/graphql";
 import {
-  order,
+  order as orderFixture,
-  orderWithTransactions,
+  payments,
   shop,
-  shopWithTransactions,
 } from "@dashboard/orders/fixtures";
 import { render, screen } from "@testing-library/react";
 import React from "react";
 
-import { OrderPaymentOrTransaction } from "./OrderPaymentOrTransaction";
+import {
+  OrderPaymentOrTransaction,
+  OrderPaymentOrTransactionProps,
+} from "./OrderPaymentOrTransaction";
 
 jest.mock("react-intl", () => ({
   useIntl: jest.fn(() => ({
@@ -44,52 +46,77 @@ jest.mock("@saleor/macaw-ui/next", () => ({
   },
 }));
 
-jest.mock("@dashboard/hooks/useFlags", () => ({
-  useFlags: jest.fn(() => ({ orderTransactions: { enabled: false } })),
-}));
-
 jest.mock("react-router-dom", () => ({
   Link: jest.fn(({ to, ...props }) => <a href={to} {...props} />),
 }));
 
-const mockedUseFlags = useFlags as jest.MockedFunction<typeof useFlags>;
-
 describe("OrderPaymentOrTransaction", () => {
-  it("renders OrderPayment when transactions are disabled", () => {
+  const order = orderFixture(undefined);
+  const sharedProps = {
+    order,
+    shop,
+    onMarkAsPaid: () => undefined,
+    onPaymentRefund: () => undefined,
+    onAddManualTransaction: () => undefined,
+    onPaymentCapture: () => undefined,
+    onTransactionAction: () => undefined,
+    onPaymentVoid: () => undefined,
+  } as OrderPaymentOrTransactionProps;
+
+  it("renders OrderPayment when transactions are disabled in channel", () => {
     render(
       <OrderPaymentOrTransaction
-        order={order(undefined)}
+        {...sharedProps}
-        shop={shop}
+        order={{
-        onMarkAsPaid={() => undefined}
+          ...order,
-        onPaymentRefund={() => undefined}
+          transactions: [],
-        onAddManualTransaction={() => undefined}
+          payments: [],
-        onPaymentCapture={() => undefined}
+          channel: {
-        onTransactionAction={() => undefined}
+            ...order.channel,
-        onPaymentVoid={() => undefined}
+            orderSettings: {
+              markAsPaidStrategy: MarkAsPaidStrategyEnum.PAYMENT_FLOW,
+              __typename: "OrderSettings",
+            },
+          },
+        }}
       />,
     );
 
     expect(screen.queryByTestId("OrderPayment")).toBeInTheDocument();
   });
 
-  it("renders OrderTransaction when transactions are enabled", () => {
+  it("renders OrderPayment when payments are used in order", () => {
-    mockedUseFlags.mockImplementationOnce(() => ({
-      orderTransactions: { enabled: true, value: "true" },
-    }));
-
     render(
       <OrderPaymentOrTransaction
-        order={orderWithTransactions}
+        {...sharedProps}
-        shop={shopWithTransactions}
+        order={{
-        onMarkAsPaid={() => undefined}
+          ...order,
-        onPaymentRefund={() => undefined}
+          transactions: [],
-        onAddManualTransaction={() => undefined}
+          payments: [payments.pending],
-        onPaymentCapture={() => undefined}
+        }}
-        onTransactionAction={() => undefined}
+      />,
-        onPaymentVoid={() => undefined}
+    );
+
+    expect(screen.queryByTestId("OrderPayment")).toBeInTheDocument();
+  });
+
+  it("renders OrderTransaction when transactions are enabled in channel", () => {
+    render(
+      <OrderPaymentOrTransaction
+        {...sharedProps}
+        order={{
+          ...order,
+          transactions: [],
+        }}
       />,
     );
 
     expect(screen.queryByTestId("OrderSummaryCard")).toBeInTheDocument();
   });
+
+  it("renders OrderTransaction when transactions are used in order", () => {
+    render(<OrderPaymentOrTransaction {...sharedProps} />);
+
+    expect(screen.queryByTestId("OrderSummaryCard")).toBeInTheDocument();
+  });
 });

src/orders/components/OrderPaymentOrTransaction/OrderPaymentOrTransaction.tsx

@@ -1,20 +1,18 @@
 import CardSpacer from "@dashboard/components/CardSpacer";
-import { TransactionActionEnum } from "@dashboard/graphql/transactions";
-import { useFlags } from "@dashboard/hooks/useFlags";
 import {
-  OrderBothTypes,
+  OrderDetailsFragment,
-  orderChannelUseTransactions,
+  OrderDetailsQuery,
-  ShopBothTypes,
+  TransactionActionEnum,
-  ShopWithTransactions,
+} from "@dashboard/graphql";
-} from "@dashboard/orders/types";
+import { orderShouldUseTransactions } from "@dashboard/orders/types";
 import React from "react";
 
 import OrderPayment from "../OrderPayment/OrderPayment";
 import { OrderTransactionsWrapper } from "./OrderTransactionsWrapper";
 
-interface OrderPaymentOrTransactionProps {
+export interface OrderPaymentOrTransactionProps {
-  order: OrderBothTypes;
+  order: OrderDetailsFragment;
-  shop: ShopBothTypes;
+  shop: OrderDetailsQuery["shop"];
   onTransactionAction(transactionId: string, actionType: TransactionActionEnum);
   onPaymentCapture();
   onPaymentVoid();
@@ -35,13 +33,11 @@ export const OrderPaymentOrTransaction: React.FC<
   onMarkAsPaid,
   onAddManualTransaction,
 }) => {
-  const { orderTransactions } = useFlags(["orderTransactions"]);
+  if (orderShouldUseTransactions(order)) {
-
-  if (orderChannelUseTransactions(order, orderTransactions.enabled)) {
     return (
       <OrderTransactionsWrapper
         order={order}
-        shop={shop as ShopWithTransactions}
+        shop={shop}
         onTransactionAction={onTransactionAction}
         onPaymentCapture={onPaymentCapture}
         onMarkAsPaid={onMarkAsPaid}

src/orders/components/OrderPaymentOrTransaction/OrderTransactionsWrapper.tsx

@@ -1,9 +1,9 @@
 import CardSpacer from "@dashboard/components/CardSpacer";
-import { TransactionActionEnum } from "@dashboard/graphql/types.generated";
 import {
-  OrderDetailsWithTransactionsFragment,
+  OrderDetailsFragment,
-  OrderDetailsWithTransactionsQuery,
+  OrderDetailsQuery,
-} from "@dashboard/graphql/types.transactions.generated";
+  TransactionActionEnum,
+} from "@dashboard/graphql/types.generated";
 import React from "react";
 
 import OrderAddTransaction from "../OrderAddTransaction";
@@ -17,8 +17,8 @@ import OrderTransactionPayment from "../OrderTransactionPayment";
 import { getFilteredPayments } from "./utils";
 
 interface OrderTransactionsWrapper {
-  order: OrderDetailsWithTransactionsFragment;
+  order: OrderDetailsFragment;
-  shop: OrderDetailsWithTransactionsQuery["shop"];
+  shop: OrderDetailsQuery["shop"];
   onTransactionAction(transactionId: string, actionType: TransactionActionEnum);
   onPaymentCapture();
   onMarkAsPaid();

src/orders/components/OrderPaymentOrTransaction/utils.test.ts

@@ -1,25 +1,19 @@
-import {
+import { order as orderFixture, payments } from "@dashboard/orders/fixtures";
-  order,
-  orderWithTransactions,
-  payments,
-} from "@dashboard/orders/fixtures";
 
 import { getFilteredPayments } from "./utils";
 
-describe("getFilteredTransactions", () => {
+describe("getFilteredPayments", () => {
+  const order = orderFixture(null);
   it("returns empty when there is no order", () => {
     expect(getFilteredPayments(null)).toStrictEqual([]);
   });
 
   it("returns empty when there are no payments", () => {
-    expect(
+    expect(getFilteredPayments(order)).toStrictEqual([]);
-      getFilteredPayments({ ...orderWithTransactions, payments: [] }),
-    ).toStrictEqual([]);
   });
 
   it("returns payments that are active and have transactions attached", () => {
     expect(
-      // @ts-expect-error types mistmatch in generated types
       getFilteredPayments({ ...order, payments: [payments.authorized] }),
     ).toStrictEqual([payments.authorized]);
   });

src/orders/components/OrderPaymentOrTransaction/utils.ts

@@ -1,4 +1,4 @@
-import { OrderDetailsFragment } from "@dashboard/graphql/transactions";
+import { OrderDetailsFragment } from "@dashboard/graphql";
 
 /** Returns paymetns from order that were used to pay for the order */
 export function getFilteredPayments(order: OrderDetailsFragment) {

src/orders/components/OrderPaymentSummaryCard/OrderPaymentSummaryCard.tsx

@@ -3,10 +3,7 @@ import CardTitle from "@dashboard/components/CardTitle";
 import { Hr } from "@dashboard/components/Hr";
 import { Pill } from "@dashboard/components/Pill";
 import Skeleton from "@dashboard/components/Skeleton";
-import {
+import { OrderAction, OrderDetailsFragment } from "@dashboard/graphql";
-  OrderAction,
-  OrderDetailsFragment,
-} from "@dashboard/graphql/transactions";
 import { transformPaymentStatus } from "@dashboard/misc";
 import {
   orderGrantRefundUrl,
@@ -69,6 +66,7 @@ const OrderPaymentSummaryCard: React.FC<OrderPaymementProps> = ({
       <CardTitle
         toolbar={
           <Pill
+            key={payment.status}
             label={payment.localized}
             color={payment.status}
             className={classes.paymentStatus}

src/orders/components/OrderPaymentSummaryCard/components/PaymentsSummary/PaymentsSummary.tsx

@@ -1,4 +1,4 @@
-import { OrderDetailsFragment } from "@dashboard/graphql/transactions";
+import { OrderDetailsFragment } from "@dashboard/graphql";
 import { CardContent } from "@material-ui/core";
 import clsx from "clsx";
 import React from "react";

src/orders/components/OrderPaymentSummaryCard/components/PaymentsSummary/utils.test.ts

@@ -1,11 +1,13 @@
 import {
-  orderWithTransactions,
+  order as orderFixture,
   prepareMoney,
 } from "@dashboard/orders/fixtures";
 
 import { getShouldDisplayAmounts } from "./utils";
 
 describe("PaymentSummary / getShouldDisplayAmounts", () => {
+  const order = orderFixture(null);
+
   it("hides everything when no order is passed", () => {
     expect(getShouldDisplayAmounts(undefined)).toStrictEqual(
       expect.objectContaining({
@@ -20,7 +22,7 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
   it("displays everything, but authorized if there's a pending value", () => {
     expect(
       getShouldDisplayAmounts({
-        ...orderWithTransactions,
+        ...order,
         totalAuthorized: prepareMoney(0),
         totalAuthorizePending: prepareMoney(0),
         totalCharged: prepareMoney(1),
@@ -38,14 +40,14 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
 
   it("displays everything with authorized if there's a pending value", () => {
     const result1 = getShouldDisplayAmounts({
-      ...orderWithTransactions,
+      ...order,
       totalAuthorized: prepareMoney(12),
       totalAuthorizePending: prepareMoney(0),
       totalChargePending: prepareMoney(1),
     });
 
     const result2 = getShouldDisplayAmounts({
-      ...orderWithTransactions,
+      ...order,
       totalAuthorized: prepareMoney(12),
       totalAuthorizePending: prepareMoney(12),
     });
@@ -64,7 +66,7 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
   it("displays capture and authorize amount when they are different", () => {
     expect(
       getShouldDisplayAmounts({
-        ...orderWithTransactions,
+        ...order,
         totalAuthorized: prepareMoney(10),
         totalCharged: prepareMoney(12),
       }),
@@ -81,7 +83,7 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
   it("displays capoture amount when it's not equal to total amount", () => {
     expect(
       getShouldDisplayAmounts({
-        ...orderWithTransactions,
+        ...order,
         totalAuthorized: prepareMoney(0),
         totalCharged: prepareMoney(12),
         total: {
@@ -104,7 +106,7 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
   it("displays authorized if there is authorized amount", () => {
     expect(
       getShouldDisplayAmounts({
-        ...orderWithTransactions,
+        ...order,
         totalAuthorized: prepareMoney(10),
         totalCharged: prepareMoney(0),
       }),
@@ -123,7 +125,7 @@ describe("PaymentSummary / getShouldDisplayAmounts", () => {
   it("hides everything if order is fully settled", () => {
     expect(
       getShouldDisplayAmounts({
-        ...orderWithTransactions,
+        ...order,
         totalCharged: prepareMoney(1),
         total: {
           tax: prepareMoney(0),

src/orders/components/OrderPaymentSummaryCard/components/PaymentsSummary/utils.ts

@@ -1,4 +1,4 @@
-import { OrderDetailsFragment } from "@dashboard/graphql/transactions";
+import { OrderDetailsFragment } from "@dashboard/graphql";
 
 import { PaymentState } from "./types";
 

src/orders/components/OrderPaymentSummaryCard/components/RefundsSummary.tsx

@@ -1,4 +1,4 @@
-import { OrderDetailsFragment } from "@dashboard/graphql/transactions";
+import { OrderDetailsFragment } from "@dashboard/graphql";
 import { Typography } from "@material-ui/core";
 import React from "react";
 import { FormattedMessage } from "react-intl";

src/orders/components/OrderPaymentSummaryCard/utils.ts

@@ -1,15 +1,17 @@
-import { PaymentChargeStatusEnum } from "@dashboard/graphql";
+import {
-import { OrderBothTypes, OrderSharedType } from "@dashboard/orders/types";
+  OrderDetailsFragment,
+  PaymentChargeStatusEnum,
+} from "@dashboard/graphql";
 import { IMoney } from "@dashboard/utils/intl";
 
 import { extractOutstandingBalance } from "../OrderSummaryCard/utils";
 
-export const extractRefundedAmount = (order: OrderSharedType): IMoney => {
+export const extractRefundedAmount = (order: OrderDetailsFragment): IMoney => {
   if (order?.paymentStatus === PaymentChargeStatusEnum.FULLY_REFUNDED) {
     return order?.total?.gross;
   }
   if (order?.paymentStatus === PaymentChargeStatusEnum.PARTIALLY_REFUNDED) {
-    return extractOutstandingBalance(order as OrderBothTypes);
+    return extractOutstandingBalance(order);
   }
   return (
     order?.total?.gross && {

src/orders/components/OrderRefundReturnAmount/utils.ts

@@ -1,9 +1,6 @@
+import { OrderDetailsFragment } from "@dashboard/graphql";
 import { FormsetData } from "@dashboard/hooks/useFormset";
-import {
+import { OrderRefundSharedType } from "@dashboard/orders/types";
-  OrderBothTypes,
-  OrderRefundSharedType,
-  OrderSharedType,
-} from "@dashboard/orders/types";
 import {
   getAllFulfillmentLinesPriceSum,
   getOrderCharged,
@@ -23,7 +20,7 @@ export const getMiscellaneousAmountValues = (
 ): OrderRefundAmountValuesProps => {
   const authorizedAmount = order?.total?.gross;
   const previouslyRefunded = getPreviouslyRefundedPrice(order);
-  const maxRefund = getOrderCharged(order);
+  const maxRefund = getOrderCharged(order as OrderDetailsFragment);
 
   return {
     authorizedAmount,
@@ -59,7 +56,7 @@ export const getProductsAmountValues = ({
   const shipmentCost = getShipmentCost(order);
 
   const previouslyRefunded = getPreviouslyRefundedPrice(order);
-  const maxRefund = getOrderCharged(order);
+  const maxRefund = getOrderCharged(order as OrderDetailsFragment);
   const refundedLinesSum = getRefundedLinesPriceSum(
     order?.lines,
     unfulfilledItemsQuantities as FormsetData<null, string>,
@@ -138,7 +135,7 @@ const getReturnTotalAmount = ({
   order,
   maxRefund,
 }: {
-  order: OrderBothTypes;
+  order: OrderDetailsFragment;
   selectedProductsValue: IMoney;
   refundShipmentCosts: boolean;
   maxRefund: IMoney;
@@ -157,7 +154,7 @@ const getReturnTotalAmount = ({
 };
 
 export const getReturnProductsAmountValues = (
-  order: OrderBothTypes,
+  order: OrderDetailsFragment,
   formData: OrderReturnFormData,
 ) => {
   const authorizedAmount = getAuthorizedAmount(order);
@@ -170,12 +167,15 @@ export const getReturnProductsAmountValues = (
   } = formData;
 
   const replacedProductsValue = authorizedAmount?.currency && {
-    amount: getReplacedProductsAmount(order as OrderSharedType, formData),
+    amount: getReplacedProductsAmount(order as OrderDetailsFragment, formData),
     currency: authorizedAmount.currency,
   };
 
   const selectedProductsValue = authorizedAmount?.currency && {
-    amount: getReturnSelectedProductsAmount(order as OrderSharedType, formData),
+    amount: getReturnSelectedProductsAmount(
+      order as OrderDetailsFragment,
+      formData,
+    ),
     currency: authorizedAmount.currency,
   };
 

src/orders/components/OrderReturnPage/OrderReturnPage.tsx

@@ -1,15 +1,10 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
-import { OrderErrorFragment } from "@dashboard/graphql";
+import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
-import { useFlags } from "@dashboard/hooks/useFlags";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import { renderCollection } from "@dashboard/misc";
-import {
+import { orderHasTransactions } from "@dashboard/orders/types";
-  OrderBothTypes,
-  orderHasTransactions,
-  OrderSharedType,
-} from "@dashboard/orders/types";
 import { orderUrl } from "@dashboard/orders/urls";
 import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
@@ -29,7 +24,7 @@ import {
 } from "./utils";
 
 export interface OrderReturnPageProps {
-  order: OrderBothTypes;
+  order: OrderDetailsFragment;
   loading: boolean;
   errors?: OrderErrorFragment[];
   onSubmit: (data: OrderRefundSubmitData) => SubmitPromise;
@@ -39,8 +34,6 @@ export interface OrderReturnPageProps {
 const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
   const { order, loading, errors = [], onSubmit, submitStatus } = props;
 
-  const { orderTransactions } = useFlags(["orderTransactions"]);
-
   const intl = useIntl();
   return (
     <OrderRefundForm order={order} onSubmit={onSubmit}>
@@ -58,7 +51,7 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
                 <ItemsCard
                   errors={errors}
                   order={order}
-                  lines={getUnfulfilledLines(order as OrderSharedType)}
+                  lines={getUnfulfilledLines(order as OrderDetailsFragment)}
                   itemsQuantities={data.unfulfilledItemsQuantities}
                   itemsSelections={data.itemsToBeReplaced}
                   onChangeQuantity={handlers.changeUnfulfiledItemsQuantity}
@@ -71,7 +64,7 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
               </>
             )}
             {renderCollection(
-              getWaitingFulfillments(order as OrderSharedType),
+              getWaitingFulfillments(order as OrderDetailsFragment),
               ({ id, lines }) => (
                 <React.Fragment key={id}>
                   <ItemsCard
@@ -92,7 +85,7 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
               ),
             )}
             {renderCollection(
-              getFulfilledFulfillemnts(order as OrderSharedType),
+              getFulfilledFulfillemnts(order as OrderDetailsFragment),
               ({ id, lines }) => (
                 <React.Fragment key={id}>
                   <ItemsCard
@@ -114,7 +107,7 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
             )}
           </DetailPageLayout.Content>
           <DetailPageLayout.RightSidebar>
-            {orderHasTransactions(order, orderTransactions.enabled) ? (
+            {orderHasTransactions(order) ? (
               <SubmitCard
                 disabled={isSaveDisabled}
                 onSubmit={submit}

src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/ReturnItemsCard.tsx

@@ -2,10 +2,13 @@ import Money from "@dashboard/components/Money";
 import Skeleton from "@dashboard/components/Skeleton";
 import TableCellAvatar from "@dashboard/components/TableCellAvatar";
 import TableRowLink from "@dashboard/components/TableRowLink";
-import { OrderErrorFragment, OrderLineFragment } from "@dashboard/graphql";
+import {
+  OrderDetailsFragment,
+  OrderErrorFragment,
+  OrderLineFragment,
+} from "@dashboard/graphql";
 import { FormsetChange } from "@dashboard/hooks/useFormset";
 import { getById, renderCollection } from "@dashboard/misc";
-import { OrderBothTypes } from "@dashboard/orders/types";
 import {
   Card,
   CardContent,
@@ -95,7 +98,7 @@ interface OrderReturnRefundLinesCardProps {
   canReplace?: boolean;
   errors: OrderErrorFragment[];
   lines: OrderLineFragment[];
-  order: OrderBothTypes;
+  order: OrderDetailsFragment;
   itemsSelections: FormsetReplacementData;
   itemsQuantities: FormsetQuantityData;
   onChangeSelected: FormsetChange<boolean>;

src/orders/components/OrderReturnPage/form.tsx

@@ -1,5 +1,5 @@
 import { useExitFormDialog } from "@dashboard/components/Form/useExitFormDialog";
-import { FulfillmentStatus } from "@dashboard/graphql";
+import { FulfillmentStatus, OrderDetailsFragment } from "@dashboard/graphql";
 import useForm, {
   CommonUseFormResultWithHandlers,
   SubmitPromise,
@@ -10,7 +10,6 @@ import useFormset, {
 } from "@dashboard/hooks/useFormset";
 import useHandleFormSubmit from "@dashboard/hooks/useHandleFormSubmit";
 import { getById } from "@dashboard/misc";
-import { OrderBothTypes, OrderSharedType } from "@dashboard/orders/types";
 import React, { useEffect } from "react";
 
 import { OrderRefundAmountCalculationMode } from "../OrderRefundPage/form";
@@ -66,7 +65,7 @@ export type UseOrderRefundFormResult = CommonUseFormResultWithHandlers<
 
 interface OrderReturnProps {
   children: (props: UseOrderRefundFormResult) => React.ReactNode;
-  order: OrderBothTypes;
+  order: OrderDetailsFragment;
   onSubmit: (data: OrderRefundSubmitData) => SubmitPromise;
 }
 
@@ -77,7 +76,7 @@ const getOrderRefundPageFormData = (): OrderReturnData => ({
 });
 
 function useOrderReturnForm(
-  order: OrderSharedType,
+  order: OrderDetailsFragment,
   onSubmit: (data: OrderRefundSubmitData) => SubmitPromise,
 ): UseOrderRefundFormResult {
   const {
@@ -276,7 +275,7 @@ const OrderReturnForm: React.FC<OrderReturnProps> = ({
   order,
   onSubmit,
 }) => {
-  const props = useOrderReturnForm(order as OrderSharedType, onSubmit);
+  const props = useOrderReturnForm(order as OrderDetailsFragment, onSubmit);
 
   return <form>{children(props)}</form>;
 };

src/orders/components/OrderReturnPage/utils.tsx

@@ -1,6 +1,5 @@
-import { FulfillmentStatus } from "@dashboard/graphql";
+import { FulfillmentStatus, OrderDetailsFragment } from "@dashboard/graphql";
 import { getById } from "@dashboard/misc";
-import { OrderSharedType } from "@dashboard/orders/types";
 import { Node } from "@dashboard/types";
 
 import {
@@ -14,30 +13,31 @@ const fulfiledStatuses = [
   FulfillmentStatus.REFUNDED,
 ];
 
-export const getOrderUnfulfilledLines = (order: OrderSharedType) =>
+export const getOrderUnfulfilledLines = (order: OrderDetailsFragment) =>
   order?.lines.filter(line => line.quantityToFulfill > 0) || [];
 
-export const getFulfilledFulfillment = fulfillment =>
+export const getFulfilledFulfillment = (
-  fulfiledStatuses.includes(fulfillment.status);
+  fulfillment: OrderDetailsFragment["fulfillments"][0],
+) => fulfiledStatuses.includes(fulfillment.status);
 
-export const getFulfilledFulfillemnts = (order?: OrderSharedType) =>
+export const getFulfilledFulfillemnts = (order?: OrderDetailsFragment) =>
   order?.fulfillments.filter(getFulfilledFulfillment) || [];
 
-export const getWaitingFulfillments = (order: OrderSharedType) =>
+export const getWaitingFulfillments = (order: OrderDetailsFragment) =>
   order?.fulfillments.filter(
     f => f.status === FulfillmentStatus.WAITING_FOR_APPROVAL,
   ) || [];
 
-export const getUnfulfilledLines = (order?: OrderSharedType) =>
+export const getUnfulfilledLines = (order?: OrderDetailsFragment) =>
   order?.lines.filter(line => line.quantityToFulfill > 0) || [];
 
-export const getAllOrderFulfilledLines = (order?: OrderSharedType) =>
+export const getAllOrderFulfilledLines = (order?: OrderDetailsFragment) =>
   getFulfilledFulfillemnts(order).reduce(
     (result, { lines }) => [...result, ...getParsedLines(lines)],
     [],
   );
 
-export const getAllOrderWaitingLines = (order?: OrderSharedType) =>
+export const getAllOrderWaitingLines = (order?: OrderDetailsFragment) =>
   getWaitingFulfillments(order).reduce(
     (result, { lines }) => [...result, ...getParsedLines(lines)],
     [],
@@ -69,7 +69,7 @@ export function getParsedLineData<T>({
 }
 
 export function getParsedLineDataForFulfillmentStatus<T>(
-  order: OrderSharedType,
+  order: OrderDetailsFragment,
   fulfillmentStatus: FulfillmentStatus,
   lineItemOptions: LineItemOptions<T>,
 ) {
@@ -79,14 +79,14 @@ export function getParsedLineDataForFulfillmentStatus<T>(
 }
 
 export const getFulfillmentsWithStatus = (
-  order: OrderSharedType,
+  order: OrderDetailsFragment,
   fulfillmentStatus: FulfillmentStatus,
 ) =>
   order?.fulfillments.filter(({ status }) => status === fulfillmentStatus) ||
   [];
 
 export const getParsedLinesOfFulfillments = (
-  fullfillments: OrderSharedType["fulfillments"],
+  fullfillments: OrderDetailsFragment["fulfillments"],
 ) =>
   fullfillments.reduce(
     (result, { lines }) => [...result, ...getParsedLines(lines)],
@@ -94,7 +94,7 @@ export const getParsedLinesOfFulfillments = (
   );
 
 export const getParsedLines = (
-  lines: OrderSharedType["fulfillments"][0]["lines"],
+  lines: OrderDetailsFragment["fulfillments"][0]["lines"],
 ) =>
   lines.map(({ id, quantity, orderLine }) => ({
     ...orderLine,

src/orders/components/OrderSendRefundPage/OrderSendRefund.stories.tsx

@@ -2,11 +2,11 @@ import Decorator from "@dashboard/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { orderWithTransactions, prepareMoney } from "../../fixtures";
+import { order as orderFixture, prepareMoney } from "../../fixtures";
 import OrderSendRefund, { OrderSendRefundPageProps } from "./OrderSendRefund";
 
 const props: OrderSendRefundPageProps = {
-  order: orderWithTransactions,
+  order: orderFixture(null),
   loading: false,
   onAddManualRefund: () => undefined,
   addManualRefundState: "default",
@@ -20,7 +20,7 @@ storiesOf("Views / Orders / Send refund order", module)
     <OrderSendRefund
       {...props}
       order={{
-        ...orderWithTransactions,
+        ...orderFixture(null),
         totalGrantedRefund: prepareMoney(10),
         totalRemainingGrant: prepareMoney(10),
       }}

src/orders/components/OrderSendRefundPage/OrderSendRefund.tsx

@@ -7,7 +7,7 @@ import Skeleton from "@dashboard/components/Skeleton";
 import {
   CreateManualTransactionRefundMutationVariables,
   OrderDetailsFragment,
-} from "@dashboard/graphql/transactions";
+} from "@dashboard/graphql";
 import { orderUrl } from "@dashboard/orders/urls";
 import { Card, CardContent } from "@material-ui/core";
 import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";

src/orders/components/OrderSendRefundPage/components/TransactionCard.tsx

@@ -6,7 +6,7 @@ import {
   TransactionActionEnum,
   TransactionItemFragment,
   useOrderSendRefundMutation,
-} from "@dashboard/graphql/transactions";
+} from "@dashboard/graphql";
 import { Typography } from "@material-ui/core";
 import { useId } from "@reach/auto-id";
 import { Button, makeStyles } from "@saleor/macaw-ui";

src/orders/components/OrderSendRefundPage/styles.ts

@@ -12,7 +12,6 @@ export const useStyles = makeStyles(
     },
     cardLoading: {
       height: "20em",
-      background: "white",
     },
   },
   { name: "OrderSendRefundPage" },

src/orders/components/OrderSummaryCard/OrderSummaryCard.tsx

@@ -1,8 +1,5 @@
 import CardTitle from "@dashboard/components/CardTitle";
-import {
+import { OrderDetailsFragment, OrderDiscountType } from "@dashboard/graphql";
-  OrderDetailsFragment,
-  OrderDiscountType,
-} from "@dashboard/graphql/transactions";
 import { Card, CardContent } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";

src/orders/components/OrderSummaryCard/utils.ts

@@ -1,9 +1,5 @@
 import { subtractMoney } from "@dashboard/components/Money";
-import {
+import { GiftCardEventsEnum, OrderDetailsFragment } from "@dashboard/graphql";
-  GiftCardEventsEnum,
-  OrderDetailsFragment,
-} from "@dashboard/graphql/transactions";
-import { OrderBothTypes } from "@dashboard/orders/types";
 import { getOrderCharged } from "@dashboard/orders/utils/data";
 import { IMoney } from "@dashboard/utils/intl";
 import compact from "lodash/compact";
@@ -43,7 +39,9 @@ export const extractOrderGiftCardUsedAmount = (
   }, 0);
 };
 
-export const extractOutstandingBalance = (order: OrderBothTypes): IMoney =>
+export const extractOutstandingBalance = (
+  order: OrderDetailsFragment,
+): IMoney =>
   getOrderCharged(order) &&
   order?.total?.gross &&
   subtractMoney(order.total.gross, getOrderCharged(order));

src/orders/components/OrderTransaction.stories.tsx

@@ -1,7 +1,7 @@
 import {
   TransactionActionEnum,
   TransactionEventTypeEnum,
-} from "@dashboard/graphql/transactions";
+} from "@dashboard/graphql";
 import OrderTransaction, {
   OrderTransactionProps,
 } from "@dashboard/orders/components/OrderTransaction";

src/orders/components/OrderTransaction/OrderTransaction.tsx

@@ -1,7 +1,7 @@
 import {
   TransactionActionEnum,
   TransactionItemFragment,
-} from "@dashboard/graphql/transactions";
+} from "@dashboard/graphql";
 import { FakeTransaction, TransactionFakeEvent } from "@dashboard/orders/types";
 import { Card } from "@material-ui/core";
 import clsx from "clsx";

src/orders/components/OrderTransaction/components/CardTitle/CardTitle.tsx

@@ -2,7 +2,7 @@ import DefaultCardTitle from "@dashboard/components/CardTitle";
 import {
   TransactionActionEnum,
   TransactionItemFragment,
-} from "@dashboard/graphql/transactions";
+} from "@dashboard/graphql";
 import { FakeTransaction } from "@dashboard/orders/types";
 import { IconButton } from "@material-ui/core";
 import { Button, LinkIcon } from "@saleor/macaw-ui";

src/orders/components/OrderTransaction/components/TransactionEvents/TransactionEvents.tsx

@@ -1,4 +1,4 @@
-import { TransactionEventFragment } from "@dashboard/graphql/transactions";
+import { TransactionEventFragment } from "@dashboard/graphql";
 import { renderCollection } from "@dashboard/misc";
 import { TransactionFakeEvent } from "@dashboard/orders/types";
 import { TableCell, TableRow } from "@material-ui/core";
@@ -63,6 +63,7 @@ export const TransactionEvents: React.FC<OrderTransactionEventsProps> = ({
         events,
         transactionEvent => (
           <EventItem
+            key={transactionEvent.id}
             event={transactionEvent}
             onHover={setHoveredPspReference}
             hoveredPspReference={hoveredPspReference}

src/orders/components/OrderTransaction/components/TransactionEvents/components/EventItem.tsx

@@ -1,5 +1,5 @@
 import Money from "@dashboard/components/Money";
-import { TransactionEventFragment } from "@dashboard/graphql/transactions";
+import { TransactionEventFragment } from "@dashboard/graphql";
 import { TransactionFakeEvent } from "@dashboard/orders/types";
 import { TableCell, TableRow } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -47,13 +47,23 @@ const useStyles = makeStyles(
         width: "126px",
       },
     },
-    colPspReference: {
+    colMessage: {
-      [theme.breakpoints.up("md")]: {
+      minWidth: "200px",
-        width: "250px",
+      maxWidth: "250px",
+      wordBreak: "break-word",
+      whiteSpace: "normal",
     },
+    colPspReference: {
+      minWidth: "10px",
+      maxWidth: "150px",
+    },
+    spacer: {
+      minWidth: "150px",
+      maxWidth: "150px",
     },
     colDate: {
       width: "25%",
+      whiteSpace: "nowrap",
     },
     colCreatedBy: {
       width: "20%",
@@ -86,7 +96,8 @@ export const EventItem: React.FC<EventItemProps> = ({
   const classes = useStyles();
   const { type, status } = mapTransactionEvent(event);
 
-  const isHovered = event.pspReference === hoveredPspReference;
+  const isHovered =
+    event.pspReference && event.pspReference === hoveredPspReference;
 
   return (
     <TableRow
@@ -100,20 +111,19 @@ export const EventItem: React.FC<EventItemProps> = ({
       <TableCell>
         {event.amount?.currency && <Money money={event.amount} />}
       </TableCell>
-      <TableCell
+      <TableCell className={clsx(classes.colSmall, classes.colMessage)}>
-        className={classes.colSmall}
-        colSpan={!event.pspReference && 2}
-      >
         <EventType type={type} message={event.message} />
       </TableCell>
-      {event.pspReference && (
       <TableCell className={clsx(classes.colSmall, classes.colPspReference)}>
+        {event.pspReference ? (
           <PspReference
             reference={event.pspReference}
             url={event.externalUrl}
           />
-        </TableCell>
+        ) : (
+          <div className={classes.spacer} />
         )}
+      </TableCell>
       <TableCell
         className={clsx(classes.colDate, !hasCreatedBy && classes.colLast)}
       >

src/orders/components/OrderTransaction/components/TransactionEvents/components/EventType.tsx

@@ -28,12 +28,12 @@ export const EventType = ({ type, message }: EventTypeProps) => {
 
   const displayType = mapEventToMessage
     ? intl.formatMessage(mapEventToMessage)
-    : type ?? message;
+    : message || type;
 
   return (
     <Box display="flex" alignItems="center">
       {displayType}
-      {type !== null && message && (
+      {displayType !== message && message && (
         <Tooltip>
           <Tooltip.Trigger>
             <div className={classes.tooltipWrapper}>

src/orders/components/OrderTransaction/components/TransactionEvents/components/PspReference.tsx

@@ -15,12 +15,15 @@ const useStyles = makeStyles(
       gap: theme.spacing(1),
     },
     pill: {
-      // TODO: change to new dashboard monospace font
+      fontFamily:
-      fontFamily: "monospace",
+        "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
       fontWeight: 600,
       fontSize: "12px",
       borderRadius: "4px",
-      background: "#F5F5F5",
+      background:
+        theme.palette.type === "light"
+          ? theme.palette.grey[100]
+          : theme.palette.background.paper,
       padding: "4px",
       cursor: "default",
       whiteSpace: "nowrap",

src/orders/components/OrderTransaction/utils.test.ts

@@ -1,4 +1,4 @@
-import { TransactionEventFragment } from "@dashboard/graphql/transactions";
+import { TransactionEventFragment } from "@dashboard/graphql";
 import {
   TransactionFakeEvent,
   TransactionMappingResult,

src/orders/components/OrderTransaction/utils.ts

@@ -3,7 +3,7 @@ import {
   TransactionEventFragment,
   TransactionEventTypeEnum,
   TransactionItemFragment,
-} from "@dashboard/graphql/transactions";
+} from "@dashboard/graphql";
 import {
   FakeTransaction,
   TransactionFakeEvent,
@@ -24,10 +24,15 @@ export const mapActionToMessage: Record<
   VOID: transactionActionMessages.void,
   CHARGE: transactionActionMessages.capture,
   CANCEL: transactionActionMessages.cancel,
+  // refund is handled in "Send refund" view not in Transactions list
   REFUND: null,
 };
 
 const typeMap: Record<TransactionEventTypeEnum, TransactionMappingResult> = {
+  INFO: {
+    type: "INFO",
+    status: "INFO",
+  },
   CHARGE_BACK: {
     type: "CHARGEBACK",
     status: "INFO",
@@ -46,6 +51,10 @@ const typeMap: Record<TransactionEventTypeEnum, TransactionMappingResult> = {
     type: "AUTHORIZATION",
     status: "FAILED",
   },
+  AUTHORIZATION_ACTION_REQUIRED: {
+    type: "AUTHORIZATION",
+    status: "INFO",
+  },
   AUTHORIZATION_REQUEST: {
     type: "AUTHORIZATION",
     status: "REQUEST",
@@ -60,6 +69,10 @@ const typeMap: Record<TransactionEventTypeEnum, TransactionMappingResult> = {
     type: "CHARGE",
     status: "FAILED",
   },
+  CHARGE_ACTION_REQUIRED: {
+    type: "CHARGE",
+    status: "INFO",
+  },
   CHARGE_REQUEST: {
     type: "CHARGE",
     status: "REQUEST",

src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx

@@ -1,5 +1,5 @@
 import ConfirmButton from "@dashboard/components/ConfirmButton";
-import { TransactionActionEnum } from "@dashboard/graphql/transactions";
+import { TransactionActionEnum } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
 import {
   Dialog,

src/orders/components/OrderTransactionGiftCard/OrderTransactionGiftCard.tsx

@@ -3,7 +3,7 @@ import {
   OrderDetailsFragment,
   OrderGiftCardFragment,
   TransactionEventTypeEnum,
-} from "@dashboard/graphql/transactions";
+} from "@dashboard/graphql";
 import { FakeTransaction, TransactionFakeEvent } from "@dashboard/orders/types";
 import { prepareMoney } from "@dashboard/orders/utils/data";
 import React from "react";

src/orders/components/OrderTransactionGiftCard/utils.ts

@@ -1,7 +1,4 @@
-import {
+import { GiftCardEventsEnum, OrderGiftCardFragment } from "@dashboard/graphql";
-  GiftCardEventsEnum,
-  OrderGiftCardFragment,
-} from "@dashboard/graphql/transactions";
 
 export const getUsedInGiftCardEvents = (
   giftCard: OrderGiftCardFragment,