Skip to content

Commit 1a61390

Browse files
alexcarpenteralexcarpenter
authored
feat(clerk-js,types): Refactor <Checkout /> components (#5359)
1 parent 50a27e2 commit 1a61390

File tree

8 files changed

+411
-416
lines changed

8 files changed

+411
-416
lines changed

‎.changeset/twenty-ducks-pump.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@clerk/clerk-js': patch
3+
'@clerk/types': patch
4+
---
5+
6+
Refactor `<Checkout />` components to apply descriptors and ensure styling is properly connected to theming layer.

‎packages/clerk-js/src/ui/components/Checkout/Checkout.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,7 @@ const AuthenticatedRoutes = withCoreUserGuard((props: __experimental_CheckoutPro
3636
<Drawer.Overlay />
3737
<Drawer.Content>
3838
<Drawer.Header title='Checkout' />
39-
<Drawer.Body>
40-
<CheckoutPage {...props} />
41-
</Drawer.Body>
39+
<CheckoutPage {...props} />
4240
</Drawer.Content>
4341
</Drawer.Root>
4442
);

‎packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx

+102-155
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import type { __experimental_CommerceCheckoutResource } from '@clerk/types';
22

33
import { useCheckoutContext } from '../../contexts';
4-
import { Box, Button, Col, Flex, Icon, Text } from '../../customizables';
5-
import { LineItems } from '../../elements';
4+
import { Box, Button, descriptors, Heading, Icon, Span, Text } from '../../customizables';
5+
import { Drawer, LineItems } from '../../elements';
66
import { Check } from '../../icons';
77

88
export const CheckoutComplete = ({ checkout }: { checkout: __experimental_CommerceCheckoutResource }) => {
@@ -15,44 +15,85 @@ export const CheckoutComplete = ({ checkout }: { checkout: __experimental_Commer
1515
};
1616

1717
return (
18-
<Col
19-
sx={{
20-
flex: 1,
21-
}}
22-
>
23-
<Col
24-
align='center'
25-
justify='center'
26-
gap={8}
27-
sx={t => ({
28-
flex: 1,
29-
paddingBlock: t.space.$4,
30-
})}
31-
>
32-
<SuccessCircle />
33-
34-
<Col
35-
align='center'
36-
gap={2}
37-
sx={{ position: 'relative' }}
18+
<>
19+
<Drawer.Body>
20+
<Span
21+
elementDescriptor={descriptors.checkoutSuccessRoot}
22+
sx={t => ({
23+
margin: 'auto',
24+
position: 'relative',
25+
aspectRatio: '1/1',
26+
display: 'grid',
27+
width: '100%',
28+
padding: t.space.$4,
29+
flexShrink: 0,
30+
})}
3831
>
39-
{/* TODO(@COMMERCE): needs localization */}
40-
<Text variant='h2'>Payment was successful!</Text>
41-
<Text sx={t => ({ textAlign: 'center', paddingInline: t.space.$8 })}>
42-
{/* TODO(@COMMERCE): needs localization */}
43-
Minim adipisicing enim fugiat enim est ad nisi exercitation nisi exercitation quis culpa.
44-
</Text>
45-
</Col>
46-
</Col>
32+
<Ring scale={1} />
33+
<Ring scale={0.75} />
34+
<Ring scale={0.5} />
35+
<Box
36+
elementDescriptor={descriptors.checkoutSuccessBadge}
37+
sx={t => ({
38+
margin: 'auto',
39+
gridArea: '1/1',
40+
display: 'flex',
41+
position: 'relative',
42+
width: t.sizes.$16,
43+
height: t.sizes.$16,
44+
borderRadius: t.radii.$circle,
45+
backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.30) 95.31%)`,
46+
boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset',
47+
':before': {
48+
content: '""',
49+
position: 'absolute',
50+
inset: t.space.$1,
51+
borderRadius: t.radii.$circle,
52+
backgroundColor: t.colors.$colorBackground,
53+
},
54+
})}
55+
>
56+
<Icon
57+
icon={Check}
58+
colorScheme='neutral'
59+
sx={{
60+
position: 'relative',
61+
margin: 'auto',
62+
}}
63+
aria-hidden
64+
/>
65+
</Box>
66+
<Span
67+
sx={t => ({
68+
margin: 'auto',
69+
gridArea: '1/1',
70+
position: 'relative',
71+
textAlign: 'center',
72+
transform: `translateY(${t.space.$20})`,
73+
})}
74+
>
75+
<Heading
76+
elementDescriptor={descriptors.checkoutSuccessTitle}
77+
as='h2'
78+
textVariant='h2'
79+
>
80+
Payment was successful!
81+
</Heading>
82+
<Text
83+
elementDescriptor={descriptors.checkoutSuccessDescription}
84+
colorScheme='secondary'
85+
sx={t => ({ textAlign: 'center', paddingInline: t.space.$8, marginBlockStart: t.space.$2 })}
86+
>
87+
{/* TODO(@COMMERCE): needs localization */}
88+
Minim adipisicing enim fugiat enim est ad nisi exercitation nisi exercitation quis culpa.
89+
</Text>
90+
</Span>
91+
</Span>
92+
</Drawer.Body>
4793

48-
<Col
49-
gap={2}
94+
<Drawer.Footer
5095
sx={t => ({
51-
padding: t.space.$4,
52-
borderTopWidth: t.borderWidths.$normal,
53-
borderTopStyle: t.borderStyles.$solid,
54-
borderTopColor: t.colors.$neutralAlpha100,
55-
position: 'relative',
96+
rowGap: t.space.$4,
5697
})}
5798
>
5899
<LineItems.Root>
@@ -77,131 +118,37 @@ export const CheckoutComplete = ({ checkout }: { checkout: __experimental_Commer
77118
<LineItems.Description>{checkout.invoice ? checkout.invoice.id : '–'}</LineItems.Description>
78119
</LineItems.Group>
79120
</LineItems.Root>
80-
<Button
81-
colorScheme='secondary'
82-
variant='bordered'
83-
size='sm'
84-
hasArrow
85-
textVariant={'buttonSmall'}
86-
sx={t => ({
87-
width: '100%',
88-
marginTop: t.space.$2,
89-
})}
90-
onClick={handleClose}
91-
>
121+
<Button onClick={handleClose}>
92122
{/* TODO(@COMMERCE): needs localization */}
93123
Continue
94124
</Button>
95-
</Col>
96-
</Col>
125+
</Drawer.Footer>
126+
</>
97127
);
98128
};
99129

100-
const SuccessCircle = () => {
130+
function Ring({
131+
scale,
132+
}: {
133+
/**
134+
* Number between 0-1
135+
*/
136+
scale: number;
137+
}) {
101138
return (
102-
<Flex
103-
align='center'
104-
justify='center'
139+
<Span
140+
elementDescriptor={descriptors.checkoutSuccessRing}
105141
sx={t => ({
106-
position: 'relative',
107-
width: '100%',
108-
height: t.sizes.$16,
142+
margin: 'auto',
143+
gridArea: '1/1',
144+
width: `${scale * 100}%`,
145+
height: `${scale * 100}%`,
146+
borderWidth: 1,
147+
borderStyle: 'solid',
148+
borderColor: t.colors.$neutralAlpha200,
149+
borderRadius: t.radii.$circle,
150+
maskImage: `linear-gradient(to bottom, transparent 15%, black, transparent 85%)`,
109151
})}
110-
>
111-
{/* rings */}
112-
<Box>
113-
<Box
114-
sx={t => ({
115-
position: 'absolute',
116-
top: `-${t.sizes.$8}`,
117-
bottom: `-${t.sizes.$8}`,
118-
left: '50%',
119-
translate: '-50% 0',
120-
aspectRatio: '1/1',
121-
borderWidth: 1,
122-
borderStyle: 'solid',
123-
borderColor: t.colors.$neutralAlpha150,
124-
borderRadius: t.radii.$circle,
125-
})}
126-
/>
127-
<Box
128-
sx={t => ({
129-
position: 'absolute',
130-
top: `-${t.sizes.$24}`,
131-
bottom: `-${t.sizes.$24}`,
132-
left: '50%',
133-
translate: '-50% 0',
134-
aspectRatio: '1/1',
135-
borderWidth: 1,
136-
borderStyle: 'solid',
137-
borderColor: t.colors.$neutralAlpha200,
138-
borderRadius: t.radii.$circle,
139-
})}
140-
/>
141-
<Box
142-
sx={t => ({
143-
position: 'absolute',
144-
top: `-${t.sizes.$40}`,
145-
bottom: `-${t.sizes.$40}`,
146-
left: '50%',
147-
translate: '-50% 0',
148-
aspectRatio: '1/1',
149-
borderWidth: 1,
150-
borderStyle: 'solid',
151-
borderColor: t.colors.$neutralAlpha200,
152-
borderRadius: t.radii.$circle,
153-
})}
154-
/>
155-
</Box>
156-
157-
{/* fade overlays */}
158-
<Box
159-
sx={t => ({
160-
position: 'absolute',
161-
width: '120%',
162-
aspectRatio: '1/1',
163-
top: '50%',
164-
translate: '0 -50%',
165-
backgroundImage: `linear-gradient(to bottom, ${t.colors.$colorBackground} 35%, transparent 48%, transparent 52%, ${t.colors.$colorBackground} 65%)`,
166-
})}
167-
/>
168-
169-
{/* coin */}
170-
<Box
171-
sx={t => ({
172-
position: 'relative',
173-
width: t.sizes.$16,
174-
height: t.sizes.$16,
175-
borderRadius: t.radii.$circle,
176-
backgroundImage:
177-
'linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.30) 95.31%)',
178-
})}
179-
>
180-
<Box
181-
sx={t => ({
182-
position: 'relative',
183-
width: t.sizes.$16,
184-
height: t.sizes.$16,
185-
borderRadius: t.radii.$circle,
186-
backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 60.94%)',
187-
backgroundBlendMode: 'plus-lighter, normal',
188-
boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset',
189-
})}
190-
>
191-
<Flex
192-
align='center'
193-
justify='center'
194-
sx={t => ({
195-
position: 'absolute',
196-
inset: t.space.$1,
197-
borderRadius: t.radii.$circle,
198-
backgroundColor: t.colors.$colorBackground,
199-
})}
200-
>
201-
<Icon icon={Check} />
202-
</Flex>
203-
</Box>
204-
</Box>
205-
</Flex>
152+
/>
206153
);
207-
};
154+
}

0 commit comments

Comments
 (0)