Add wishlist item to the cart #158
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,9 +4,10 @@ | |
| * SPDX-License-Identifier: BSD-3-Clause | ||
| * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause | ||
| */ | ||
| import React, {useContext, useState, useEffect} from 'react' | ||
| import {useLocation} from 'react-router-dom' | ||
| import PropTypes from 'prop-types' | ||
| import {useIntl, FormattedMessage} from 'react-intl' | ||
| import { | ||
| AspectRatio, | ||
| Box, | ||
|
|
@@ -22,33 +23,40 @@ import { | |
| Stack, | ||
| useBreakpointValue | ||
| } from '@chakra-ui/react' | ||
| import useBasket from '../commerce-api/hooks/useBasket' | ||
| import Link from '../components/link' | ||
| import RecommendedProducts from '../components/recommended-products' | ||
| import {LockIcon} from '../components/icons' | ||
| import {DEFAULT_CURRENCY} from '../constants' | ||
| import {useVariationAttributes} from './' | ||
| import {findImageGroupBy} from '../utils/image-groups-utils' | ||
|
|
||
| export const AddToCartModalContext = React.createContext() | ||
| export const useAddToCartModalContext = () => useContext(AddToCartModalContext) | ||
|
Contributor
There was a problem hiding this comment. Should we declare this context inside the
Contributor
Author
There was a problem hiding this comment.
I'd say no, because i think the
So i think this question comes down to recognizing the separation of concerns. A mental model for myself is like OO programming's principle Encapsulation, I view the module (e.g. this
Contributor
Author
There was a problem hiding this comment. I noticed TL;DR i'm moving this to context.js
Contributor
Author
There was a problem hiding this comment. I couldn't do this because there is a circular dependency between the context, hook and the component... I really don't want to separate the component from the hook and contexts because the component itself doesn't work, it is meant to work only with the hook.
Contributor
There was a problem hiding this comment. Would you mind adding a comment to explain that so it won't confuse other developers? |
||
|
|
||
| /** | ||
| * Visual feedback (a modal) for adding item to the cart. | ||
| */ | ||
| export const AddToCartModal = () => { | ||
| const {isOpen, onClose, data} = useAddToCartModalContext() | ||
| const {product, quantity} = data || {} | ||
| const intl = useIntl() | ||
| const basket = useBasket() | ||
| const size = useBreakpointValue({base: 'full', lg: '2xl', xl: '4xl'}) | ||
| const variationAttributes = useVariationAttributes(product) | ||
| if (!isOpen) { | ||
| return null | ||
| } | ||
| const {currency, productItems, productSubTotal, itemAccumulatedCount} = basket | ||
| const {id, variationValues} = product | ||
| const lineItemPrice = productItems?.find((item) => item.productId === id)?.basePrice * quantity | ||
| const image = findImageGroupBy(product.imageGroups, { | ||
| viewType: 'small', | ||
| selectedVariationAttributes: variationValues | ||
| })?.images?.[0] | ||
|
|
||
| return ( | ||
| <Modal size={size} isOpen={isOpen} onClose={onClose}> | ||
| <ModalOverlay /> | ||
| <ModalContent | ||
| margin="0" | ||
|
|
@@ -113,7 +121,7 @@ const AddToCartModal = ({product, variant, quantity, isOpen, onClose, ...props}) | |
| {!!lineItemPrice && | ||
| intl.formatNumber(lineItemPrice, { | ||
| style: 'currency', | ||
| currency: currency || DEFAULT_CURRENCY | ||
| })} | ||
| </Text> | ||
| </Box> | ||
|
|
@@ -138,7 +146,7 @@ const AddToCartModal = ({product, variant, quantity, isOpen, onClose, ...props}) | |
| {productSubTotal && | ||
| intl.formatNumber(productSubTotal, { | ||
| style: 'currency', | ||
| currency: currency || DEFAULT_CURRENCY | ||
| })} | ||
| </Text> | ||
| </Flex> | ||
|
|
@@ -164,7 +172,15 @@ const AddToCartModal = ({product, variant, quantity, isOpen, onClose, ...props}) | |
| </Box> | ||
| </Flex> | ||
| </ModalBody> | ||
| <Box padding="8"> | ||
| <RecommendedProducts | ||
| title={<FormattedMessage defaultMessage="You Might Also Like" />} | ||
| recommender={'pdp-similar-items'} | ||
| products={product && [product.id]} | ||
| mx={{base: -4, md: -8, lg: 0}} | ||
| shouldFetch={() => product?.id} | ||
| /> | ||
| </Box> | ||
| </ModalContent> | ||
| </Modal> | ||
| ) | ||
|
|
@@ -185,4 +201,34 @@ AddToCartModal.propTypes = { | |
| children: PropTypes.any | ||
| } | ||
|
|
||
| export const useAddToCartModal = () => { | ||
| const [state, setState] = useState({ | ||
| isOpen: false, | ||
| data: null | ||
| }) | ||
|
|
||
| const {pathname} = useLocation() | ||
| useEffect(() => { | ||
| setState({ | ||
| ...state, | ||
| isOpen: false | ||
| }) | ||
| }, [pathname]) | ||
|
|
||
| return { | ||
| isOpen: state.isOpen, | ||
| data: state.data, | ||
| onOpen: (data) => { | ||
| setState({ | ||
| isOpen: true, | ||
| data | ||
| }) | ||
| }, | ||
| onClose: () => { | ||
| setState({ | ||
| isOpen: false, | ||
| data: null | ||
| }) | ||
| } | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
need this for the swatch images.