djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Order page nudges (#3671)

Browse source 
* 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>
This commit is contained in:
Timur Carpeev 2023-07-10 15:06:11 +02:00 committed by GitHub
parent 391b429fce
commit de098fd520
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 64 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/good-beers-wash.md Normal file
View file

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

8
locale/defaultMessages.json
View file

@ -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"

4
src/orders/components/OrderAddTransaction/messages.ts
View file

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

34
src/orders/components/OrderTransaction/components/CardTitle/CardTitle.tsx
View file

@ -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>
}

19
src/orders/components/OrderTransaction/components/CardTitle/MoneyDisplay.tsx
View file

@ -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}>
<dt className={classes.label}>{label}</dt>
<Typography
component="dd"
variant="body2"
className={classes.moneyWrapper}
>
<span className={classes.currency}>{money.currency}&nbsp;</span>
<span className={classes.amount}>{amount}</span>
</Typography>
</dl>
<div className={classes.wrapper}>
<div>{label}</div>
<div>
<span>{money.currency}&nbsp;</span>
<span>{amount}</span>
</div>
</div>
);
};

28
src/orders/components/OrderTransaction/components/CardTitle/styles.ts
View file

@ -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),
"& > dl": {
minWidth: "73px", // aligns amounts with < 10 to each other
},
gap: vars.spacing[7],
alignItems: "center",
},
}),
{ 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,
},
}),
{

9
src/orders/components/OrderTransaction/components/TransactionEvents/TransactionEvents.tsx
View file

@ -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: "12px",
paddingRight: "12px",
paddingLeft: vars.spacing[4],
paddingRight: vars.spacing[4],
"&:first-child": {
// Override for Material first td
paddingRight: "12px",
paddingLeft: vars.spacing[9],
},
},
},

15
src/orders/components/OrderTransaction/components/TransactionEvents/components/EventStatus.tsx
View file

@ -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;

8
src/orders/components/OrderTransaction/components/TransactionEvents/components/EventType.tsx
View file

@ -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
? intl.formatMessage(mapEventToMessage)
: message || type;
const displayType = capitalize(
mapEventToMessage ? intl.formatMessage(mapEventToMessage) : message || type,
);
return (
<Box display="flex" alignItems="center">
{displayType}