Add transaction reference input at order page (#837)

* Add transaction reference input at order page

* Add spacer between cards in order details

Co-authored-by: Karolina Kuźniewicz <karolina.kuzniewicz@mirumee.com>
Co-authored-by: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>

locale/defaultMessages.json

@@ -3311,10 +3311,18 @@
     "context": "order line total price",
     "string": "Total"
   },
+  "src_dot_orders_dot_components_dot_OrderHistory_dot_1154330234": {
+    "context": "transaction reference",
+    "string": "Transaction Reference {transactionReference}"
+  },
   "src_dot_orders_dot_components_dot_OrderHistory_dot_1230178536": {
     "context": "order history message",
     "string": "Order address was updated"
   },
+  "src_dot_orders_dot_components_dot_OrderHistory_dot_1463685940": {
+    "context": "order history message",
+    "string": "Order was marked as paid"
+  },
   "src_dot_orders_dot_components_dot_OrderHistory_dot_1521936480": {
     "context": "order history message",
     "string": "Fulfilled {quantity} items"
@@ -3379,10 +3387,6 @@
     "context": "order history message",
     "string": "Payment was authorized"
   },
-  "src_dot_orders_dot_components_dot_OrderHistory_dot_3328124376": {
-    "context": "order history message",
-    "string": "Marked order as paid"
-  },
   "src_dot_orders_dot_components_dot_OrderHistory_dot_3453124210": {
     "context": "order history message",
     "string": "Shipping tracking number was sent to customer"
@@ -3512,8 +3516,15 @@
   "src_dot_orders_dot_components_dot_OrderList_dot_898333473": {
     "string": "No orders found"
   },
-  "src_dot_orders_dot_components_dot_OrderMarkAsPaidDialog_dot_2823153104": {
+  "src_dot_orders_dot_components_dot_OrderMarkAsPaidDialog_dot_1739834732": {
-    "string": "Are you sure you want to mark this order as paid?"
+    "context": "transaction reference",
+    "string": "Transaction reference"
+  },
+  "src_dot_orders_dot_components_dot_OrderMarkAsPaidDialog_dot_1758712563": {
+    "string": "Please provide a transaction reference using the input below:"
+  },
+  "src_dot_orders_dot_components_dot_OrderMarkAsPaidDialog_dot_2105685861": {
+    "string": "You're going to mark this order as paid."
   },
   "src_dot_orders_dot_components_dot_OrderMarkAsPaidDialog_dot_4196844912": {
     "context": "dialog header",

schema.graphql

@@ -2646,7 +2646,7 @@ type Mutation {
   orderFulfill(input: OrderFulfillInput!, order: ID): OrderFulfill
   orderFulfillmentCancel(id: ID!, input: FulfillmentCancelInput!): FulfillmentCancel
   orderFulfillmentUpdateTracking(id: ID!, input: FulfillmentUpdateTrackingInput!): FulfillmentUpdateTracking
-  orderMarkAsPaid(id: ID!): OrderMarkAsPaid
+  orderMarkAsPaid(id: ID!, transactionReference: String): OrderMarkAsPaid
   orderRefund(amount: PositiveDecimal!, id: ID!): OrderRefund
   orderUpdate(id: ID!, input: OrderUpdateInput!): OrderUpdate
   orderUpdateShipping(order: ID!, input: OrderUpdateShippingInput): OrderUpdateShipping
@@ -2962,6 +2962,7 @@ type OrderEvent implements Node {
   lines: [OrderEventOrderLineObject]
   fulfilledItems: [FulfillmentLine]
   warehouse: Warehouse
+  transactionReference: String
 }
 
 type OrderEventCountableConnection {

src/components/Timeline/TimelineEvent.tsx

@@ -10,6 +10,15 @@ import { DateTime } from "../Date";
 
 const useStyles = makeStyles(
   theme => ({
+    container: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      marginBottom: theme.spacing(),
+      marginLeft: theme.spacing(3),
+      width: "100%"
+    },
     date: {
       color: theme.typography.caption.color
     },
@@ -31,8 +40,6 @@ const useStyles = makeStyles(
       alignItems: "center",
       display: "flex",
       justifyContent: "space-between",
-      marginBottom: theme.spacing(),
-      marginLeft: theme.spacing(3),
       width: "100%"
     },
     panel: {
@@ -57,6 +64,11 @@ const useStyles = makeStyles(
       marginBottom: theme.spacing(3),
       position: "relative",
       width: "100%"
+    },
+    secondaryTitle: {
+      color: "#9e9e9e",
+      fontSize: 14,
+      marginTop: theme.spacing(2)
     }
   }),
   { name: "TimelineEvent" }
@@ -65,11 +77,12 @@ const useStyles = makeStyles(
 interface TimelineEventProps {
   children?: React.ReactNode;
   date: string;
+  secondaryTitle?: string;
   title: string;
 }
 
 export const TimelineEvent: React.FC<TimelineEventProps> = props => {
-  const { children, date, title } = props;
+  const { children, date, secondaryTitle, title } = props;
 
   const classes = useStyles(props);
 
@@ -87,11 +100,20 @@ export const TimelineEvent: React.FC<TimelineEventProps> = props => {
           </ExpansionPanelDetails>
         </ExpansionPanel>
       ) : (
-        <div className={classes.noExpander}>
+        <div className={classes.container}>
-          <Typography>{title}</Typography>
+          <div className={classes.noExpander}>
-          <Typography className={classes.date}>
+            <Typography>{title}</Typography>
-            <DateTime date={date} />
+            <Typography className={classes.date}>
-          </Typography>
+              <DateTime date={date} />
+            </Typography>
+          </div>
+          {secondaryTitle && (
+            <div className={classes.noExpander}>
+              <Typography className={classes.secondaryTitle}>
+                {secondaryTitle}
+              </Typography>
+            </div>
+          )}
         </div>
       )}
     </div>

src/fragments/orders.ts

@@ -13,6 +13,7 @@ export const fragmentOrderEvent = gql`
     invoiceNumber
     message
     quantity
+    transactionReference
     type
     user {
       id
@@ -171,5 +172,6 @@ export const fragmentOrderDetails = gql`
       name
       currencyCode
     }
+    isPaid
   }
 `;

src/fragments/types/OrderDetailsFragment.ts

@@ -58,6 +58,7 @@ export interface OrderDetailsFragment_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderDetailsFragment_events_user | null;
 }
@@ -320,4 +321,5 @@ export interface OrderDetailsFragment {
   discount: OrderDetailsFragment_discount | null;
   invoices: (OrderDetailsFragment_invoices | null)[] | null;
   channel: OrderDetailsFragment_channel;
+  isPaid: boolean | null;
 }

src/fragments/types/OrderEventFragment.ts

@@ -24,6 +24,7 @@ export interface OrderEventFragment {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderEventFragment_user | null;
 }

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -213,11 +213,9 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
                   onRefund={onPaymentRefund}
                   onVoid={onPaymentVoid}
                 />
+                <CardSpacer />
                 <Metadata data={data} onChange={changeMetadata} />
-                <OrderHistory
+                <OrderHistory history={order?.events} onNoteAdd={onNoteAdd} />
-                  history={maybe(() => order.events)}
-                  onNoteAdd={onNoteAdd}
-                />
               </div>
               <div>
                 <OrderCustomer

src/orders/components/OrderHistory/OrderHistory.tsx

@@ -166,7 +166,7 @@ const getEventMessage = (event: OrderDetails_order_events, intl: IntlShape) => {
       });
     case OrderEventsEnum.ORDER_MARKED_AS_PAID:
       return intl.formatMessage({
-        defaultMessage: "Marked order as paid",
+        defaultMessage: "Order was marked as paid",
         description: "order history message"
       });
     case OrderEventsEnum.OTHER:
@@ -288,6 +288,23 @@ const OrderHistory: React.FC<OrderHistoryProps> = props => {
                   />
                 );
               }
+              if (event.type === OrderEventsEnum.ORDER_MARKED_AS_PAID) {
+                return (
+                  <TimelineEvent
+                    date={event.date}
+                    title={getEventMessage(event, intl)}
+                    secondaryTitle={intl.formatMessage(
+                      {
+                        defaultMessage:
+                          "Transaction Reference {transactionReference}",
+                        description: "transaction reference"
+                      },
+                      { transactionReference: event.transactionReference }
+                    )}
+                    key={event.id}
+                  />
+                );
+              }
               return (
                 <TimelineEvent
                   date={event.date}

src/orders/components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog.tsx

@@ -1,4 +1,5 @@
 import DialogContentText from "@material-ui/core/DialogContentText";
+import TextField from "@material-ui/core/TextField";
 import ActionDialog from "@saleor/components/ActionDialog";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import FormSpacer from "@saleor/components/FormSpacer";
@@ -12,16 +13,20 @@ export interface OrderMarkAsPaidDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
   errors: OrderErrorFragment[];
   open: boolean;
+  transactionReference: string;
   onClose: () => void;
   onConfirm: () => void;
+  handleTransactionReference: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const OrderMarkAsPaidDialog: React.FC<OrderMarkAsPaidDialogProps> = ({
   confirmButtonState,
   errors: apiErrors,
+  handleTransactionReference,
   onClose,
   onConfirm,
-  open
+  open,
+  transactionReference
 }) => {
   const intl = useIntl();
   const errors = useModalDialogErrors(apiErrors, open);
@@ -38,8 +43,20 @@ const OrderMarkAsPaidDialog: React.FC<OrderMarkAsPaidDialogProps> = ({
       onConfirm={onConfirm}
     >
       <DialogContentText>
-        <FormattedMessage defaultMessage="Are you sure you want to mark this order as paid?" />
+        <FormattedMessage defaultMessage="You're going to mark this order as paid." />
+        <br />
+        <FormattedMessage defaultMessage="Please provide a transaction reference using the input below:" />
       </DialogContentText>
+      <TextField
+        fullWidth
+        name="transactionReference"
+        label={intl.formatMessage({
+          defaultMessage: "Transaction reference",
+          description: "transaction reference"
+        })}
+        value={transactionReference}
+        onChange={handleTransactionReference}
+      />
       {errors.length > 0 && (
         <>
           <FormSpacer />

src/orders/fixtures.ts

@@ -832,6 +832,7 @@ export const order = (placeholder: string): OrderDetails_order => ({
       invoiceNumber: null,
       message: null,
       quantity: 1,
+      transactionReference: "123",
       type: OrderEventsEnum.FULFILLMENT_FULFILLED_ITEMS,
       user: {
         __typename: "User",
@@ -849,6 +850,7 @@ export const order = (placeholder: string): OrderDetails_order => ({
       invoiceNumber: null,
       message: "This is note",
       quantity: null,
+      transactionReference: "124",
       type: OrderEventsEnum.NOTE_ADDED,
       user: null
     },
@@ -862,6 +864,7 @@ export const order = (placeholder: string): OrderDetails_order => ({
       invoiceNumber: null,
       message: "This is note",
       quantity: null,
+      transactionReference: "125",
       type: OrderEventsEnum.NOTE_ADDED,
       user: null
     },
@@ -875,6 +878,7 @@ export const order = (placeholder: string): OrderDetails_order => ({
       invoiceNumber: null,
       message: "Note from external service",
       quantity: null,
+      transactionReference: "126",
       type: OrderEventsEnum.EXTERNAL_SERVICE_NOTIFICATION,
       user: null
     },
@@ -888,6 +892,7 @@ export const order = (placeholder: string): OrderDetails_order => ({
       invoiceNumber: null,
       message: null,
       quantity: null,
+      transactionReference: "127",
       type: OrderEventsEnum.EMAIL_SENT,
       user: null
     },
@@ -901,6 +906,7 @@ export const order = (placeholder: string): OrderDetails_order => ({
       invoiceNumber: null,
       message: null,
       quantity: null,
+      transactionReference: "128",
       type: OrderEventsEnum.EMAIL_SENT,
       user: null
     },
@@ -914,6 +920,7 @@ export const order = (placeholder: string): OrderDetails_order => ({
       invoiceNumber: null,
       message: null,
       quantity: null,
+      transactionReference: "129",
       type: OrderEventsEnum.PAYMENT_AUTHORIZED,
       user: null
     }
@@ -1023,6 +1030,7 @@ export const order = (placeholder: string): OrderDetails_order => ({
       url: "invoice1"
     }
   ],
+  isPaid: true,
   lines: [
     {
       __typename: "OrderLine",
@@ -1190,6 +1198,7 @@ export const draftOrder = (placeholder: string): OrderDetails_order => ({
       url: "invoice1"
     }
   ],
+  isPaid: false,
   lines: [
     {
       __typename: "OrderLine" as "OrderLine",

src/orders/mutations.ts

@@ -185,8 +185,8 @@ export const TypedOrderVoidMutation = TypedMutation<
 const orderMarkAsPaidMutation = gql`
   ${fragmentOrderDetails}
   ${orderErrorFragment}
-  mutation OrderMarkAsPaid($id: ID!) {
+  mutation OrderMarkAsPaid($id: ID!, $transactionReference: String) {
-    orderMarkAsPaid(id: $id) {
+    orderMarkAsPaid(id: $id, transactionReference: $transactionReference) {
       errors: orderErrors {
         ...OrderErrorFragment
       }

src/orders/types/FulfillOrder.ts

@@ -66,6 +66,7 @@ export interface FulfillOrder_orderFulfill_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: FulfillOrder_orderFulfill_order_events_user | null;
 }
@@ -328,6 +329,7 @@ export interface FulfillOrder_orderFulfill_order {
   discount: FulfillOrder_orderFulfill_order_discount | null;
   invoices: (FulfillOrder_orderFulfill_order_invoices | null)[] | null;
   channel: FulfillOrder_orderFulfill_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface FulfillOrder_orderFulfill {

src/orders/types/OrderAddNote.ts

@@ -30,6 +30,7 @@ export interface OrderAddNote_orderAddNote_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderAddNote_orderAddNote_order_events_user | null;
 }

src/orders/types/OrderCancel.ts

@@ -64,6 +64,7 @@ export interface OrderCancel_orderCancel_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderCancel_orderCancel_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderCancel_orderCancel_order {
   discount: OrderCancel_orderCancel_order_discount | null;
   invoices: (OrderCancel_orderCancel_order_invoices | null)[] | null;
   channel: OrderCancel_orderCancel_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderCancel_orderCancel {

src/orders/types/OrderCapture.ts

@@ -64,6 +64,7 @@ export interface OrderCapture_orderCapture_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderCapture_orderCapture_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderCapture_orderCapture_order {
   discount: OrderCapture_orderCapture_order_discount | null;
   invoices: (OrderCapture_orderCapture_order_invoices | null)[] | null;
   channel: OrderCapture_orderCapture_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderCapture_orderCapture {

src/orders/types/OrderDetails.ts

@@ -58,6 +58,7 @@ export interface OrderDetails_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderDetails_order_events_user | null;
 }
@@ -320,6 +321,7 @@ export interface OrderDetails_order {
   discount: OrderDetails_order_discount | null;
   invoices: (OrderDetails_order_invoices | null)[] | null;
   channel: OrderDetails_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderDetails_shop_countries {

src/orders/types/OrderDraftCancel.ts

@@ -64,6 +64,7 @@ export interface OrderDraftCancel_draftOrderDelete_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderDraftCancel_draftOrderDelete_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderDraftCancel_draftOrderDelete_order {
   discount: OrderDraftCancel_draftOrderDelete_order_discount | null;
   invoices: (OrderDraftCancel_draftOrderDelete_order_invoices | null)[] | null;
   channel: OrderDraftCancel_draftOrderDelete_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderDraftCancel_draftOrderDelete {

src/orders/types/OrderDraftFinalize.ts

@@ -64,6 +64,7 @@ export interface OrderDraftFinalize_draftOrderComplete_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderDraftFinalize_draftOrderComplete_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderDraftFinalize_draftOrderComplete_order {
   discount: OrderDraftFinalize_draftOrderComplete_order_discount | null;
   invoices: (OrderDraftFinalize_draftOrderComplete_order_invoices | null)[] | null;
   channel: OrderDraftFinalize_draftOrderComplete_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderDraftFinalize_draftOrderComplete {

src/orders/types/OrderDraftUpdate.ts

@@ -64,6 +64,7 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderDraftUpdate_draftOrderUpdate_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderDraftUpdate_draftOrderUpdate_order {
   discount: OrderDraftUpdate_draftOrderUpdate_order_discount | null;
   invoices: (OrderDraftUpdate_draftOrderUpdate_order_invoices | null)[] | null;
   channel: OrderDraftUpdate_draftOrderUpdate_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderDraftUpdate_draftOrderUpdate {

src/orders/types/OrderFulfillmentCancel.ts

@@ -64,6 +64,7 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderFulfillmentCancel_orderFulfillmentCancel_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order {
   discount: OrderFulfillmentCancel_orderFulfillmentCancel_order_discount | null;
   invoices: (OrderFulfillmentCancel_orderFulfillmentCancel_order_invoices | null)[] | null;
   channel: OrderFulfillmentCancel_orderFulfillmentCancel_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderFulfillmentCancel_orderFulfillmentCancel {

src/orders/types/OrderFulfillmentUpdateTracking.ts

@@ -64,6 +64,7 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
   discount: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_discount | null;
   invoices: (OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_invoices | null)[] | null;
   channel: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking {

src/orders/types/OrderLineDelete.ts

@@ -64,6 +64,7 @@ export interface OrderLineDelete_draftOrderLineDelete_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderLineDelete_draftOrderLineDelete_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderLineDelete_draftOrderLineDelete_order {
   discount: OrderLineDelete_draftOrderLineDelete_order_discount | null;
   invoices: (OrderLineDelete_draftOrderLineDelete_order_invoices | null)[] | null;
   channel: OrderLineDelete_draftOrderLineDelete_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderLineDelete_draftOrderLineDelete {

src/orders/types/OrderLineUpdate.ts

@@ -64,6 +64,7 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderLineUpdate_draftOrderLineUpdate_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order {
   discount: OrderLineUpdate_draftOrderLineUpdate_order_discount | null;
   invoices: (OrderLineUpdate_draftOrderLineUpdate_order_invoices | null)[] | null;
   channel: OrderLineUpdate_draftOrderLineUpdate_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderLineUpdate_draftOrderLineUpdate {

src/orders/types/OrderLinesAdd.ts

@@ -64,6 +64,7 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderLinesAdd_draftOrderLinesCreate_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order {
   discount: OrderLinesAdd_draftOrderLinesCreate_order_discount | null;
   invoices: (OrderLinesAdd_draftOrderLinesCreate_order_invoices | null)[] | null;
   channel: OrderLinesAdd_draftOrderLinesCreate_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderLinesAdd_draftOrderLinesCreate {

src/orders/types/OrderMarkAsPaid.ts

@@ -64,6 +64,7 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderMarkAsPaid_orderMarkAsPaid_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order {
   discount: OrderMarkAsPaid_orderMarkAsPaid_order_discount | null;
   invoices: (OrderMarkAsPaid_orderMarkAsPaid_order_invoices | null)[] | null;
   channel: OrderMarkAsPaid_orderMarkAsPaid_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderMarkAsPaid_orderMarkAsPaid {
@@ -340,4 +342,5 @@ export interface OrderMarkAsPaid {
 
 export interface OrderMarkAsPaidVariables {
   id: string;
+  transactionReference?: string | null;
 }

src/orders/types/OrderRefund.ts

@@ -64,6 +64,7 @@ export interface OrderRefund_orderRefund_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderRefund_orderRefund_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderRefund_orderRefund_order {
   discount: OrderRefund_orderRefund_order_discount | null;
   invoices: (OrderRefund_orderRefund_order_invoices | null)[] | null;
   channel: OrderRefund_orderRefund_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderRefund_orderRefund {

src/orders/types/OrderUpdate.ts

@@ -64,6 +64,7 @@ export interface OrderUpdate_orderUpdate_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderUpdate_orderUpdate_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderUpdate_orderUpdate_order {
   discount: OrderUpdate_orderUpdate_order_discount | null;
   invoices: (OrderUpdate_orderUpdate_order_invoices | null)[] | null;
   channel: OrderUpdate_orderUpdate_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderUpdate_orderUpdate {

src/orders/types/OrderVoid.ts

@@ -64,6 +64,7 @@ export interface OrderVoid_orderVoid_order_events {
   invoiceNumber: string | null;
   message: string | null;
   quantity: number | null;
+  transactionReference: string | null;
   type: OrderEventsEnum | null;
   user: OrderVoid_orderVoid_order_events_user | null;
 }
@@ -326,6 +327,7 @@ export interface OrderVoid_orderVoid_order {
   discount: OrderVoid_orderVoid_order_discount | null;
   invoices: (OrderVoid_orderVoid_order_invoices | null)[] | null;
   channel: OrderVoid_orderVoid_order_channel;
+  isPaid: boolean | null;
 }
 
 export interface OrderVoid_orderVoid {

src/orders/views/OrderDetails/index.tsx

@@ -91,6 +91,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
     updatePrivateMetadataOpts
   ] = usePrivateMetadataUpdate({});
   const notify = useNotifier();
+  const [transactionReference, setTransactionReference] = React.useState("");
 
   const [openModal, closeModal] = createDialogActionHandlers<
     OrderUrlDialog,
@@ -325,10 +326,15 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                           onClose={closeModal}
                           onConfirm={() =>
                             orderPaymentMarkAsPaid.mutate({
-                              id
+                              id,
+                              transactionReference
                             })
                           }
                           open={params.action === "mark-paid"}
+                          transactionReference={transactionReference}
+                          handleTransactionReference={({ target }) =>
+                            setTransactionReference(target.value)
+                          }
                         />
                         <OrderPaymentVoidDialog
                           confirmButtonState={orderVoid.opts.status}

src/storybook/stories/orders/OrderMarkAsPaidDialog.tsx

@@ -10,9 +10,11 @@ import Decorator from "../../Decorator";
 const props: OrderMarkAsPaidDialogProps = {
   confirmButtonState: "default",
   errors: [],
+  handleTransactionReference: () => undefined,
   onClose: () => undefined,
   onConfirm: () => undefined,
-  open: true
+  open: true,
+  transactionReference: ""
 };
 
 storiesOf("Orders / OrderMarkAsPaidDialog", module)