Order page nudges (#3671)

* Capitalize first letter

* Use small pills

* Add default title

* Shorten button label

* Move action button to the right

* Update messages

* Harmonize styles

* Align rows

* Update src/orders/components/OrderTransaction/components/TransactionEvents/components/EventStatus.tsx

Co-authored-by: Jonatan Witoszek <jonatanwitoszek@gmail.com>

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

Co-authored-by: Jonatan Witoszek <jonatanwitoszek@gmail.com>

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

Co-authored-by: Jonatan Witoszek <jonatanwitoszek@gmail.com>

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

Co-authored-by: Jonatan Witoszek <jonatanwitoszek@gmail.com>

* Fix import

* Extract messages

* Fix spacing

* Changeset

---------

Co-authored-by: Jonatan Witoszek <jonatanwitoszek@gmail.com>
Co-authored-by: Paweł Chyła <pawel.chyla@saleor.io>
Co-authored-by: andrzejewsky <vox3r69@gmail.com>

.changeset/good-beers-wash.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Order page adjustments

locale/defaultMessages.json

@@ -5561,6 +5561,10 @@
     "context": "click and collect",
     "string": "Click&Collect"
   },
+  "biDgQS": {
+    "context": "button, opens modal to create transaction in order",
+    "string": "Manual transaction"
+  },
   "biVFKU": {
     "context": "subsection header",
     "string": "Billing Address"
@@ -6286,10 +6290,6 @@
     "context": "docs link label",
     "string": "Learn more..."
   },
-  "hnaOnB": {
-    "context": "button, opens modal to create transaction in order",
-    "string": "Capture manual transaction"
-  },
   "ho75Lr": {
     "context": "status label deactivated",
     "string": "Deactivated"

src/orders/components/OrderAddTransaction/messages.ts

@@ -2,8 +2,8 @@ import { defineMessages } from "react-intl";
 
 export const addTransactionMessages = defineMessages({
   captureTransaction: {
-    defaultMessage: "Capture manual transaction",
+    defaultMessage: "Manual transaction",
-    id: "hnaOnB",
+    id: "biDgQS",
     description: "button, opens modal to create transaction in order",
   },
   markAsPaid: {

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

@@ -3,6 +3,7 @@ import {
   TransactionActionEnum,
   TransactionItemFragment,
 } from "@dashboard/graphql";
+import { capitalize } from "@dashboard/misc";
 import { FakeTransaction } from "@dashboard/orders/types";
 import { IconButton } from "@material-ui/core";
 import { Button, LinkIcon } from "@saleor/macaw-ui";
@@ -44,9 +45,10 @@ export const CardTitle: React.FC<CardTitleProps> = ({
     chargePendingAmount,
     canceledAmount,
     chargedAmount,
-    authorizedAmount,
+    authorizedAmount
   } = transaction;
 
+  const title = capitalize(transaction.name || "Transaction")
   return (
     <DefaultCardTitle
       className={className}
@@ -61,22 +63,10 @@ export const CardTitle: React.FC<CardTitleProps> = ({
                 <LinkIcon />
               </IconButton>
             )}
-            {transaction.name}
+            {title}
           </TransactionLink>
 
           <div className={classes.dataDisplay}>
-            {showActions &&
-              transaction.actions
-                .filter(action => action !== TransactionActionEnum.REFUND)
-                .map(action => (
-                  <Button
-                    variant="tertiary"
-                    onClick={() => onTransactionAction(transaction.id, action)}
-                  >
-                    <FormattedMessage {...mapActionToMessage[action]} />
-                  </Button>
-                ))}
-
             {cancelPendingAmount.amount > 0 && (
               <MoneyDisplay
                 label={intl.formatMessage(messages.cancelPending)}
@@ -132,6 +122,22 @@ export const CardTitle: React.FC<CardTitleProps> = ({
                 money={authorizedAmount}
               />
             )}
+
+            {showActions &&
+              transaction.actions
+                .filter(action => action !== TransactionActionEnum.REFUND)
+                .map(action => (
+                  <div>
+                    <Button
+                      variant="tertiary"
+                      onClick={() =>
+                        onTransactionAction(transaction.id, action)
+                      }
+                    >
+                      <FormattedMessage {...mapActionToMessage[action]} />
+                    </Button>
+                  </div>
+                ))}
           </div>
         </div>
       }

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

@@ -1,7 +1,6 @@
 import { formatMoneyAmount } from "@dashboard/components/Money";
 import useLocale from "@dashboard/hooks/useLocale";
 import { IMoney } from "@dashboard/utils/intl";
-import { Typography } from "@material-ui/core";
 import React from "react";
 
 import { useMoneyDisplayStyles } from "./styles";
@@ -18,16 +17,12 @@ export const MoneyDisplay = ({ label, money }: MoneyDisplayProps) => {
   const amount = formatMoneyAmount(money, locale);
 
   return (
-    <dl className={classes.wrapper}>
+    <div className={classes.wrapper}>
-      <dt className={classes.label}>{label}</dt>
+      <div>{label}</div>
-      <Typography
+      <div>
-        component="dd"
+        <span>{money.currency}&nbsp;</span>
-        variant="body2"
+        <span>{amount}</span>
-        className={classes.moneyWrapper}
+      </div>
-      >
+    </div>
-        <span className={classes.currency}>{money.currency}&nbsp;</span>
-        <span className={classes.amount}>{amount}</span>
-      </Typography>
-    </dl>
   );
 };

src/orders/components/OrderTransaction/components/CardTitle/styles.ts

@@ -1,4 +1,5 @@
 import { makeStyles } from "@saleor/macaw-ui";
+import { vars } from "@saleor/macaw-ui/next";
 
 export const useStyles = makeStyles(
   theme => ({
@@ -12,15 +13,11 @@ export const useStyles = makeStyles(
       display: "flex",
       gap: theme.spacing(1),
       alignItems: "center",
-      fontWeight: 600,
     },
     dataDisplay: {
       display: "flex",
-      gap: theme.spacing(2),
+      gap: vars.spacing[7],
-
+      alignItems: "center",
-      "& > dl": {
-        minWidth: "73px", // aligns amounts with < 10 to each other
-      },
     },
   }),
   { name: "OrderTransactionCardTitle" },
@@ -29,25 +26,10 @@ export const useStyles = makeStyles(
 export const useMoneyDisplayStyles = makeStyles(
   theme => ({
     wrapper: {
+      fontSize: vars.fontSize.captionSmall,
+      lineHeight: vars.lineHeight.captionSmall,
       color: theme.palette.saleor.main[2],
       margin: 0,
-      textAlign: "left",
-    },
-    label: {
-      fontWeight: 600,
-      lineHeight: "12px",
-      fontSize: theme.spacing(1.25),
-      textTransform: "uppercase",
-    },
-    moneyWrapper: {
-      margin: 0,
-      fontSize: 14,
-    },
-    currency: {
-      fontWeight: 400,
-    },
-    amount: {
-      fontWeight: 600,
     },
   }),
   {

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

@@ -4,6 +4,7 @@ import { renderCollection } from "@dashboard/misc";
 import { TransactionFakeEvent } from "@dashboard/orders/types";
 import { TableCell, TableRow } from "@material-ui/core";
 import { makeStyles, ResponsiveTable } from "@saleor/macaw-ui";
+import { vars } from "@saleor/macaw-ui/next";
 import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -18,12 +19,10 @@ const useStyles = makeStyles(
   theme => ({
     table: {
       "&& td": {
-        // Gap = 24px
+        paddingLeft: vars.spacing[4],
-        paddingLeft: "12px",
+        paddingRight: vars.spacing[4],
-        paddingRight: "12px",
         "&:first-child": {
-          // Override for Material first td
+          paddingLeft: vars.spacing[9],
-          paddingRight: "12px",
         },
       },
     },

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

@@ -17,6 +17,7 @@ export const EventStatus: React.FC<EventStatusProps> = ({ status }) => {
       return (
         <Pill
           color="warning"
+          size="small"
           label={intl.formatMessage(statusMessages.pending)}
         />
       );
@@ -24,6 +25,7 @@ export const EventStatus: React.FC<EventStatusProps> = ({ status }) => {
       return (
         <Pill
           color="success"
+          size={"small"}
           label={intl.formatMessage(statusMessages.success)}
         />
       );
@@ -31,16 +33,25 @@ export const EventStatus: React.FC<EventStatusProps> = ({ status }) => {
       return (
         <Pill
           color="error"
+          size={"small"}
           label={intl.formatMessage(statusMessages.failure)}
         />
       );
     case "REQUEST":
       return (
-        <Pill color="info" label={intl.formatMessage(statusMessages.request)} />
+        <Pill
+          color="info"
+          size={"small"}
+          label={intl.formatMessage(statusMessages.request)}
+        />
       );
     case "INFO":
       return (
-        <Pill color="generic" label={intl.formatMessage(statusMessages.info)} />
+        <Pill
+          color="generic"
+          size={"small"}
+          label={intl.formatMessage(statusMessages.info)}
+        />
       );
     default:
       const _exhaustiveCheck: never = status;

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

@@ -1,4 +1,5 @@
 // @ts-strict-ignore
+import { capitalize } from "@dashboard/misc";
 import { transactionEventTypeMap } from "@dashboard/orders/messages";
 import { TransactionEventType } from "@dashboard/orders/types";
 import { makeStyles } from "@saleor/macaw-ui";
@@ -27,10 +28,9 @@ export const EventType = ({ type, message }: EventTypeProps) => {
   const classes = useStyles();
   const mapEventToMessage = transactionEventTypeMap[type];
 
-  const displayType = mapEventToMessage
+  const displayType = capitalize(
-    ? intl.formatMessage(mapEventToMessage)
+    mapEventToMessage ? intl.formatMessage(mapEventToMessage) : message || type,
-    : message || type;
+  );
-
   return (
     <Box display="flex" alignItems="center">
       {displayType}