diff --git a/site/components/product/ProductSidebar/ProductSidebar.tsx b/site/components/product/ProductSidebar/ProductSidebar.tsx index 87fa92062..f11e2ad4f 100644 --- a/site/components/product/ProductSidebar/ProductSidebar.tsx +++ b/site/components/product/ProductSidebar/ProductSidebar.tsx @@ -9,7 +9,15 @@ import { selectDefaultOptionFromProduct, SelectedOptions, } from '../helpers' -import { Box, Stack, Text as ChakraText } from '@chakra-ui/react' +import { + Alert, + AlertIcon, + Box, + CloseButton, + Stack, + Text as ChakraText, + useDisclosure, +} from '@chakra-ui/react' import { Metafield } from '@commerce/types/common' import productDetailsMetafields from '../../../static_data/productDetailsMetafields.json' @@ -27,6 +35,12 @@ const ProductSidebar: FC = ({ product, className }) => { const [selectedOptions, setSelectedOptions] = useState({}) const { locale = 'it' } = useRouter() + const { + isOpen: isAlertVisible, + onClose, + onOpen, + } = useDisclosure({ defaultIsOpen: true }) + useEffect(() => { selectDefaultOptionFromProduct(product, setSelectedOptions) }, [product]) @@ -74,6 +88,26 @@ const ProductSidebar: FC = ({ product, className }) => { ))} + + {isAlertVisible ? ( + + + + {locale === 'it' + ? "Il modello 3D potrebbe non rappresentare fedelmente l'aspetto del prodotto" + : 'The 3D model may not accurately represent the appearance of the product'} + + + + ) : ( + <> + )}