Skip to content

@W-18685092@ @W-18685121@ Chakra v3 - update checkout shipping address and shipping option selection #2690

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vcua-mobify merged 10 commits into from
Jul 2, 2025
Merged

@W-18685092@ @W-18685121@ Chakra v3 - update checkout shipping address and shipping option selection #2690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
48b2aa4
Apply initial changes
vcua-mobify Jun 26, 2025
6b15b70
Radio card changes
vcua-mobify Jun 27, 2025
fb713be
More radio card adjustments
vcua-mobify Jun 27, 2025
94c4d15
Fix shipping option selection
vcua-mobify Jun 27, 2025
cd86efb
Use value instead of selectedAddress for isSelected
vcua-mobify Jun 27, 2025
a77cb42
Lint
vcua-mobify Jun 27, 2025
37dfee0
Merge branch 'feature/chakra-ui-upgrade-v3' into vc/checkout-shipping…
unandyala Jun 30, 2025
11b6bd2
Merge branch 'feature/chakra-ui-upgrade-v3' into vc/checkout-shipping…
vcua-mobify Jul 2, 2025
40913ed
Remove extra comment
vcua-mobify Jul 2, 2025
89044f4
Merge branch 'feature/chakra-ui-upgrade-v3' into vc/checkout-shipping…
vcua-mobify Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/extension-chakra-storefront/src/components/action-card/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const ActionCard = ({
{onEdit && (
<Button
onClick={onEdit}
variant="link"
variant="link-blue"
size="sm"
ref={editBtnRef}
aria-label={editBtnLabel}
Expand All @@ -63,7 +63,7 @@ const ActionCard = ({
)}
{onRemove && (
<Button
variant="link"
variant="link-red"
size="sm"
colorScheme="red"
onClick={handleRemove}
Expand Down
3 changes: 2 additions & 1 deletion packages/extension-chakra-storefront/src/components/field/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const Field = ({
endElement={
type === 'password' ? (
<IconButton
variant="ghosted"
variant="ghost"
aria-label={passwordIconLabel}
onClick={() => setHidePassword(!hidePassword)}
>
Expand Down Expand Up @@ -113,6 +113,7 @@ const Field = ({
<>
<NativeSelect.Root ref={ref} value={value} {..._inputProps}>
<NativeSelect.Field
value={value || ''}
onChange={onChange}
placeholder={placeholder}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/components/forms/address-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const AddressFields = ({

return (
<Stack
spacing={5}
gap={5}
aria-label={intl.formatMessage(formTitleAriaLabel)}
tabIndex="0"
ref={addressFormRef}
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-chakra-storefront/src/components/forms/form-action-buttons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const FormActionButtons = ({
onCancel = () => {}
}) => {
return (
<Stack direction={{base: 'column', lg: 'row-reverse'}} spacing={4}>
<Stack direction={{base: 'column', lg: 'row-reverse'}} gap={4}>
<Button type="submit" minWidth={28} {...saveButtonProps}>
{saveButtonLabel ? (
<FormattedMessage {...saveButtonLabel} />
Expand Down
91 changes: 43 additions & 48 deletions packages/extension-chakra-storefront/src/components/radio-card/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,70 +6,65 @@
*/
import React from 'react'
import PropTypes from 'prop-types'
import {Box, useRadio, useRadioGroup} from '@chakra-ui/react'
import {Box, RadioCard as ChakraRadioCard, useSlotRecipe} from '@chakra-ui/react'
import {CheckIcon} from '../../components/icons'

const RadioCardGroupContext = React.createContext()

export const RadioCard = (props) => {
const getRadioGroupProps = React.useContext(RadioCardGroupContext)
const {getInputProps, getRadioProps} = useRadio(getRadioGroupProps(props))
const {value, children, isSelected} = getRadioGroupProps(props)
const recipe = useSlotRecipe({key: 'radioCard'})
const styles = recipe()

const input = getInputProps()
const checkbox = getRadioProps()
return (
<Box as="label">
<input {...input} />
<Box
{...checkbox}
aria-hidden={false}
position="relative"
cursor="pointer"
border="1px solid"
borderColor="gray.200"
borderRadius="base"
height="full"
_checked={{
borderColor: 'blue.600'
}}
_focus={{
boxShadow: 'outline'
}}
px={4}
py={4}
>
{input.checked && (
<Box
position="absolute"
top={0}
right={0}
w={0}
h={0}
borderStyle="solid"
borderWidth="0 38px 38px 0"
borderColor="transparent"
borderRightColor="blue.600"
>
<CheckIcon color="white" position="absolute" right="-40px" top="1px" />
</Box>
)}

{props.children}
</Box>
</Box>
<ChakraRadioCard.Item key={value} value={value} css={styles.item}>
{/* TODO: Use the _checked state of the radio card instead of isSelected */}
{isSelected && (
<Box
position="absolute"
top={0}
right={0}
w={0}
h={0}
borderStyle="solid"
borderWidth="0 38px 38px 0"
borderColor="transparent"
borderRightColor="blue.600"
>
<CheckIcon color="white" position="absolute" right="-40px" top="1px" />
</Box>
)}
<ChakraRadioCard.ItemHiddenInput />
<ChakraRadioCard.ItemControl>{children}</ChakraRadioCard.ItemControl>
</ChakraRadioCard.Item>
)
}

export const RadioCardGroup = (props) => {
const {getRootProps, getRadioProps} = useRadioGroup(props)
const group = getRootProps()
const {value, onValueChange, ...groupProps} = props
const recipe = useSlotRecipe({key: 'radioCard'})
const styles = recipe()

return (
<RadioCardGroupContext.Provider value={getRadioProps}>
<Box {...group}>{props.children}</Box>
<RadioCardGroupContext.Provider
value={(itemProps) => ({...itemProps, value: itemProps.value})}
>
<ChakraRadioCard.Root
value={value}
onValueChange={onValueChange}
css={styles.root}
{...groupProps}
>
{props.children}
</ChakraRadioCard.Root>
</RadioCardGroupContext.Provider>
)
}

RadioCard.propTypes = {children: PropTypes.any}
RadioCardGroup.propTypes = {children: PropTypes.any}
RadioCardGroup.propTypes = {
value: PropTypes.any,
onValueChange: PropTypes.func,
children: PropTypes.any
}
30 changes: 17 additions & 13 deletions ...es/extension-chakra-storefront/src/pages/checkout/partials/shipping-address-selection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,14 @@ const ShippingAddressEditForm = ({
})}
data-testid="sf-shipping-address-edit-form"
>
<Stack spacing={6}>
<Stack gap={6}>
{hasSavedAddresses && !isBillingAddress && (
<Heading as="h3" size="sm">
{title}
</Heading>
)}

<Stack spacing={6}>
<Stack gap={6}>
<AddressFields
form={form}
formTitleAriaLabel={formTitleAriaLabel}
Expand Down Expand Up @@ -208,7 +208,6 @@ const ShippingAddressSelection = ({
}

const address = customer.addresses.find((addr) => addr.addressId === addressId)
Copy link
Contributor

@alexvuong alexvuong Jul 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure how the Chakra V3 is related to the address below?

Copy link
Contributor Author

@vcua-mobify vcua-mobify Jul 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's an extra comment that I've removed.


form.reset({...address})
}

Expand Down Expand Up @@ -270,20 +269,22 @@ const ShippingAddressSelection = ({
}
return (
<form onSubmit={form.handleSubmit(submitForm)}>
<Stack spacing={4}>
<Stack gap={4}>
{hasSavedAddresses && !isBillingAddress && (
<Controller
name="addressId"
defaultValue=""
control={form.control}
rules={{required: !isEditingAddress}}
render={({field: {value}}) => (
<RadioCardGroup value={value} onChange={handleAddressIdSelection}>
<SimpleGrid
columns={[1, 1, 2]}
spacing={4}
gridAutoFlow="row dense"
>
render={({field: {value, onChange}}) => (
<RadioCardGroup
value={value}
onValueChange={(selected) => {
onChange(selected.value)
handleAddressIdSelection(selected.value)
}}
>
<SimpleGrid columns={[1, 1, 2]} gap={4} gridAutoFlow="row dense">
{customer.addresses?.map((address, index) => {
const editLabel = formatMessage(
{
Expand All @@ -302,7 +303,10 @@ const ShippingAddressSelection = ({
)
return (
<React.Fragment key={address.addressId}>
<RadioCard value={address.addressId}>
<RadioCard
value={address.addressId}
isSelected={address.addressId === value}
>
<ActionCard
padding={0}
border="none"
Expand Down Expand Up @@ -361,7 +365,7 @@ const ShippingAddressSelection = ({
color="blue.600"
height={['44px', '44px', '167px']}
rounded="base"
fontWeight="medium"
fontWeight="semibold"
leftIcon={<PlusIcon boxSize={'15px'} />}
onClick={toggleAddressEdit}
>
Expand Down
13 changes: 6 additions & 7 deletions packages/extension-chakra-storefront/src/pages/checkout/partials/shipping-address.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,13 +120,12 @@ export default function ShippingAddress() {
})}
>
<ToggleCardEdit>
TODO
{/* <ShippingAddressSelection */}
{/* selectedAddress={selectedShippingAddress} */}
{/* submitButtonLabel={submitButtonMessage} */}
{/* onSubmit={submitAndContinue} */}
{/* formTitleAriaLabel={shippingAddressAriaLabel} */}
{/* /> */}
<ShippingAddressSelection
selectedAddress={selectedShippingAddress}
submitButtonLabel={submitButtonMessage}
onSubmit={submitAndContinue}
formTitleAriaLabel={shippingAddressAriaLabel}
/>
</ToggleCardEdit>
{selectedShippingAddress && (
<ToggleCardSummary>
Expand Down
74 changes: 44 additions & 30 deletions packages/extension-chakra-storefront/src/pages/checkout/partials/shipping-options.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/
import React, {useEffect} from 'react'
import {FormattedMessage, FormattedNumber, useIntl} from 'react-intl'
import {Box, Button, Container, Flex, Radio, RadioGroup, Stack, Text} from '@chakra-ui/react'
import {Box, Button, Container, Flex, HStack, RadioGroup, Stack, Text} from '@chakra-ui/react'
import {useForm, Controller} from 'react-hook-form'
import {useCheckout} from '../../../pages/checkout/util/checkout-context'
import {ChevronDownIcon} from '../../../components/icons'
Expand Down Expand Up @@ -124,32 +124,57 @@ export default function ShippingOptions() {
onSubmit={form.handleSubmit(submitForm)}
data-testid="sf-checkout-shipping-options-form"
>
<Stack spacing={6}>
<Stack gap={6}>
{shippingMethods?.applicableShippingMethods && (
<Controller
name="shippingMethodId"
control={form.control}
defaultValue=""
render={({field: {value, onChange}}) => (
<RadioGroup
<RadioGroup.Root
name="shipping-options-radiogroup"
value={value}
onChange={onChange}
onValueChange={(selected) => {
onChange(selected.value) // Chakra v3 radio returns the selected id in an object with a value property
}}
>
<Stack spacing={5}>
<Stack gap={5}>
{shippingMethods.applicableShippingMethods.map(
(opt) => (
<Radio value={opt.id} key={opt.id}>
<RadioGroup.Item value={opt.id} key={opt.id}>
<RadioGroup.ItemHiddenInput />
<RadioGroup.ItemIndicator />
<Flex justify="space-between" w="full">
<Box>
<Text>{opt.name}</Text>
<Text
fontSize="sm"
color="gray.600"
>
{opt.description}
</Text>
</Box>
<HStack>
<Box>
<RadioGroup.ItemText>
{opt.name}
</RadioGroup.ItemText>
<Text
fontSize="sm"
color="gray.600"
>
{opt.description}
</Text>
{opt.shippingPromotions?.map(
(promo) => {
return (
<Text
key={
promo.promotionId
}
fontSize="sm"
color="green.600"
>
{
promo.calloutMsg
}
</Text>
)
}
)}
</Box>
</HStack>
<Text fontWeight="bold">
<FormattedNumber
value={opt.price}
Expand All @@ -158,29 +183,18 @@ export default function ShippingOptions() {
/>
</Text>
</Flex>

{opt.shippingPromotions?.map((promo) => {
return (
<Text
key={promo.promotionId}
fontSize="sm"
color="green.600"
>
{promo.calloutMsg}
</Text>
)
})}
</Radio>
</RadioGroup.Item>
)
)}
</Stack>
</RadioGroup>
</RadioGroup.Root>
)}
/>
)}

<Box>
<Button variant="link" size="sm" rightIcon={<ChevronDownIcon />}>
{/* TODO: Get the rightIcon to display */}
<Button variant="link-blue" size="sm" rightIcon={<ChevronDownIcon />}>
<FormattedMessage
defaultMessage="Do you want to send this as a gift?"
id="shipping_options.action.send_as_a_gift"
Expand Down
5 changes: 2 additions & 3 deletions packages/extension-chakra-storefront/src/theme/components/base/native-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ export default defineSlotRecipe({
filled: {
field: {
border: '2px solid',
borderColor: 'transparent',
background: 'red.200',
borderColor: 'gray.100',
_hover: {
background: 'gray.200'
},
Expand All @@ -30,7 +29,7 @@ export default defineSlotRecipe({
}
},
indicator: {
color: 'white'
color: 'black'
}
}
}
Expand Down
Loading
Loading