Skip to content

Commit 2e6927d

Browse files
rquartararorquartararo
authored
fix(order2): QA minor design fixes (#16594)
1 parent ebec94b commit 2e6927d

File tree

6 files changed

+119
-109
lines changed

6 files changed

+119
-109
lines changed

‎src/Apps/Order2/Routes/Checkout/Components/Order2CollapsibleOrderSummary.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,14 @@ export const Order2CollapsibleOrderSummary: React.FC<
2828

2929
return (
3030
<Box backgroundColor="mono0">
31-
<Flex py={1} px={2} justifyContent="space-between">
31+
<Clickable
32+
display="flex"
33+
width="100%"
34+
onClick={handleToggle}
35+
py={1}
36+
px={2}
37+
justifyContent="space-between"
38+
>
3239
<RouterLink flex={0} to={artworkPath} target="_blank">
3340
<Image
3441
mr={1}
@@ -46,7 +53,7 @@ export const Order2CollapsibleOrderSummary: React.FC<
4653
{[artworkVersion?.title, artworkVersion?.date].join(", ")}
4754
</Text>
4855
</Box>
49-
<Clickable display="flex" onClick={handleToggle} flexShrink={0}>
56+
<Flex flexShrink={0}>
5057
<Text variant="sm" color="mono100" mr={0.5}>
5158
{orderData.buyerTotal?.display || orderData.itemsTotal?.display}
5259
</Text>
@@ -59,8 +66,8 @@ export const Order2CollapsibleOrderSummary: React.FC<
5966
transform: isExpanded ? "scaleY(-1)" : "scaleY(1)",
6067
}}
6168
/>
62-
</Clickable>
63-
</Flex>
69+
</Flex>
70+
</Clickable>
6471
<Box
6572
px={2}
6673
overflow="hidden"

‎src/Apps/Order2/Routes/Checkout/Components/PaymentStep/Order2PaymentCompletedView.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,12 @@ const getDisplayDetails = (
119119
switch (paymentMethod) {
120120
case "CREDIT_CARD": {
121121
if (paymentPreview && paymentPreview.__typename === "Card") {
122+
const cardBrand = paymentPreview.displayBrand
123+
?.replace(/_/g, " ")
124+
.replace(/\b\w/g, char => char.toUpperCase())
125+
122126
return {
123-
cardBrand: paymentPreview.displayBrand,
127+
cardBrand: cardBrand,
124128
last4: paymentPreview.last4,
125129
bankName: null,
126130
}

‎src/Apps/Order2/Routes/Checkout/Components/PaymentStep/Order2PaymentForm.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,15 +122,14 @@ export const Order2PaymentForm: React.FC<Order2PaymentFormProps> = ({
122122
fontFamily: theme.fonts.sans,
123123
colorPrimary: theme.colors.mono100, // Accordian selected.
124124
colorTextSecondary: theme.colors.mono60, // Accordian not selected.
125-
colorText: theme.colors.mono60, // Used for input labels.
126-
colorBackground: theme.colors.mono5,
127125
},
128126
rules: {
129127
".AccordionItem": {
130128
lineHeight: "26px",
131129
fontSize: "16px",
132130
fontWeight: "normal",
133131
border: "1px solid transparent",
132+
backgroundColor: theme.colors.mono5,
134133
},
135134
".AccordionItem--selected": {
136135
lineHeight: "26px",

‎src/Apps/Order2/Routes/Checkout/Components/PaymentStep/SavedPaymentMethodOption.tsx‎

Lines changed: 66 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import InstitutionIcon from "@artsy/icons/InstitutionIcon"
22
import LockIcon from "@artsy/icons/LockIcon"
33
import { Box, Flex, Radio, RadioGroup, Spacer, Text } from "@artsy/palette"
4+
import { themeGet } from "@styled-system/theme-get"
45
import { Collapse } from "Apps/Order/Components/Collapse"
56
import { type Brand, BrandCreditCardIcon } from "Components/BrandCreditCardIcon"
67
import { FadeInBox } from "Components/FadeInBox"
78
import type { Order2PaymentForm_me$data } from "__generated__/Order2PaymentForm_me.graphql"
89
import type React from "react"
910
import styled from "styled-components"
10-
import { themeGet } from "@styled-system/theme-get"
1111

1212
interface SavedPaymentMethodOptionProps {
1313
me: Order2PaymentForm_me$data
@@ -57,72 +57,75 @@ export const SavedPaymentMethodOption: React.FC<
5757
</HoverFlex>
5858

5959
<Collapse open={isSelected}>
60-
<Text variant="sm" ml="50px">
60+
<Spacer y={1} />
61+
62+
<Text variant="sm">
6163
Select a saved payment method or add a new one.
6264
</Text>
6365

64-
<Box ml="50px">
65-
<RadioGroup
66-
defaultValue={selectedSavedPaymentMethod}
67-
onSelect={val => {
68-
onSavedPaymentMethodSelect(val)
69-
}}
70-
>
71-
{[...savedCreditCards, ...allowedSavedBankAccounts].map(
72-
paymentMethod => {
73-
const formattedExpDate =
74-
paymentMethod.__typename === "CreditCard"
75-
? `${paymentMethod.expirationMonth
76-
.toString()
77-
.padStart(2, "0")}/${paymentMethod.expirationYear
78-
.toString()
79-
.slice(-2)}`
80-
: null
66+
<Spacer y={2} />
67+
68+
<RadioGroup
69+
gap={2}
70+
defaultValue={selectedSavedPaymentMethod}
71+
onSelect={val => {
72+
onSavedPaymentMethodSelect(val)
73+
}}
74+
>
75+
{[...savedCreditCards, ...allowedSavedBankAccounts].map(
76+
paymentMethod => {
77+
const formattedExpDate =
78+
paymentMethod.__typename === "CreditCard"
79+
? `${paymentMethod.expirationMonth
80+
.toString()
81+
.padStart(2, "0")}/${paymentMethod.expirationYear
82+
.toString()
83+
.slice(-2)}`
84+
: null
8185

82-
return (
83-
<Radio
84-
key={paymentMethod.internalID}
85-
value={paymentMethod}
86-
pb="15px"
87-
pt="15px"
88-
label={
89-
<Flex>
90-
{paymentMethod.__typename === "CreditCard" ? (
91-
<>
92-
<BrandCreditCardIcon
93-
type={paymentMethod.brand as Brand}
94-
width="24px"
95-
height="24px"
96-
mr={1}
97-
/>
98-
<Text variant="sm">
99-
•••• {paymentMethod.lastDigits}
100-
{formattedExpDate && ` Exp ${formattedExpDate}`}
101-
</Text>
102-
</>
103-
) : (
104-
<>
105-
<InstitutionIcon
106-
fill="mono100"
107-
width="24px"
108-
height="24px"
109-
mr={1}
110-
/>
111-
<Text variant="sm">
112-
{paymentMethod.bankName &&
113-
`${paymentMethod.bankName} `}
114-
•••• {paymentMethod.last4}
115-
</Text>
116-
</>
117-
)}
118-
</Flex>
119-
}
120-
/>
121-
)
122-
},
123-
)}
124-
</RadioGroup>
125-
</Box>
86+
return (
87+
<Radio
88+
key={paymentMethod.internalID}
89+
value={paymentMethod}
90+
label={
91+
<Flex>
92+
{paymentMethod.__typename === "CreditCard" ? (
93+
<>
94+
<BrandCreditCardIcon
95+
type={paymentMethod.brand as Brand}
96+
width="24px"
97+
height="24px"
98+
flexShrink={0}
99+
mr={1}
100+
/>
101+
<Text variant="sm">
102+
•••• {paymentMethod.lastDigits}
103+
{formattedExpDate && ` Exp ${formattedExpDate}`}
104+
</Text>
105+
</>
106+
) : (
107+
<>
108+
<InstitutionIcon
109+
fill="mono100"
110+
width="24px"
111+
height="24px"
112+
flexShrink={0}
113+
mr={1}
114+
/>
115+
<Text variant="sm">
116+
{paymentMethod.bankName &&
117+
`${paymentMethod.bankName} `}
118+
•••• {paymentMethod.last4}
119+
</Text>
120+
</>
121+
)}
122+
</Flex>
123+
}
124+
/>
125+
)
126+
},
127+
)}
128+
</RadioGroup>
126129
</Collapse>
127130
</Box>
128131
</FadeInBox>

‎src/Apps/Order2/Routes/Checkout/Components/PaymentStep/StripePaymentCheckboxes.tsx‎

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -117,34 +117,31 @@ export const StripePaymentCheckboxes: React.FC<
117117
open={selectedPaymentMethod === "stripe-ach"}
118118
data-testid="stripe-ach-collapse"
119119
>
120-
<Box p={2}>
121-
<Flex>
122-
<Checkbox
123-
selected={savePaymentMethod}
124-
onSelect={onSavePaymentMethodChange}
125-
>
126-
Save bank account for later use.
127-
</Checkbox>
120+
<Flex p={2} position="relative">
121+
<Checkbox
122+
selected={savePaymentMethod}
123+
onSelect={onSavePaymentMethodChange}
124+
>
125+
Save bank account for later use.
126+
</Checkbox>
128127

129-
<Tooltip
130-
placement="top-start"
131-
width={400}
132-
content={`Thank you for signing up for direct debits from Artsy. You
133-
have authorized Artsy and, if applicable, its affiliated
134-
entities to debit the bank account specified above, on behalf
135-
of sellers that use the Artsy website, for any amount owed for
136-
your purchase of artworks from such sellers, according to
137-
Artsy's website and terms. You can change or cancel this
138-
authorization at any time by providing Artsy with 30 (thirty)
139-
days' notice. By clicking "Save bank account for later use",
140-
you authorize Artsy to save the bank account specified above.`}
141-
>
142-
<Clickable ml={0.5} style={{ lineHeight: 0 }}>
143-
<InfoIcon />
144-
</Clickable>
145-
</Tooltip>
146-
</Flex>
147-
</Box>
128+
<Tooltip
129+
width={250}
130+
content={`Thank you for signing up for direct debits from Artsy. You
131+
have authorized Artsy and, if applicable, its affiliated
132+
entities to debit the bank account specified above, on behalf
133+
of sellers that use the Artsy website, for any amount owed for
134+
your purchase of artworks from such sellers, according to
135+
Artsy's website and terms. You can change or cancel this
136+
authorization at any time by providing Artsy with 30 (thirty)
137+
days' notice. By clicking "Save bank account for later use",
138+
you authorize Artsy to save the bank account specified above.`}
139+
>
140+
<Clickable ml={0.5} style={{ lineHeight: 0 }}>
141+
<InfoIcon />
142+
</Clickable>
143+
</Tooltip>
144+
</Flex>
148145
</Collapse>
149146
</>
150147
)

‎src/Apps/Order2/Routes/Checkout/Order2CheckoutApp.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -146,30 +146,30 @@ export const Order2CheckoutApp: React.FC<Order2CheckoutAppProps> = ({
146146
<Order2ExpressCheckout order={orderData} />
147147
)}
148148
{isOffer && (
149-
<>
149+
<Box>
150150
<Jump id={STEP_JUMP_MAP.OFFER_AMOUNT} />
151151
<Order2OfferStep order={orderData} />
152-
</>
152+
</Box>
153153
)}
154-
<>
154+
<Box>
155155
<Jump id={STEP_JUMP_MAP.FULFILLMENT_DETAILS} />
156156
<Order2FulfillmentDetailsStep order={orderData} me={meData} />
157-
</>
158-
<>
157+
</Box>
158+
<Box>
159159
<Jump id={STEP_JUMP_MAP.DELIVERY_OPTION} />
160160
<Order2DeliveryOptionsStep order={orderData} />
161-
</>
162-
<>
161+
</Box>
162+
<Box>
163163
<Jump id={STEP_JUMP_MAP.PAYMENT} />
164164
<Order2PaymentStep order={orderData} me={meData} />
165-
</>
165+
</Box>
166166
</Stack>
167167
<Box display={["block", "block", "none"]}>
168168
<Spacer y={1} />
169-
<>
169+
<Box>
170170
<Jump id={STEP_JUMP_MAP.CONFIRMATION} />
171171
<Order2ReviewStep order={orderData} />
172-
</>
172+
</Box>
173173
<Order2HelpLinksWithInquiry
174174
order={orderData}
175175
artworkID={artworkSlug as string}
@@ -185,10 +185,10 @@ export const Order2CheckoutApp: React.FC<Order2CheckoutAppProps> = ({
185185
display={["none", "none", "block"]}
186186
>
187187
<Box position={["initial", "initial", "sticky"]} top="100px">
188-
<>
188+
<Box>
189189
<Jump id={STEP_JUMP_MAP.CONFIRMATION} />
190190
<Order2ReviewStep order={orderData} />
191-
</>
191+
</Box>
192192
<Separator as="hr" />
193193
<Order2HelpLinksWithInquiry
194194
order={orderData}

0 commit comments

Comments
 (0)