added link to order button and tooltip for the size chart

waterloop · Dec 20, 2023 · 483a62f · 483a62f
1 parent 2b58f0c
commit 483a62f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
+    "@tippyjs/react": "^4.2.6",
     "axios": "^0.21.1",
     "dotenv": "^8.2.0",
     "google-map-react": "^2.0.4",

diff --git a/src/components/ProductCard/ProductDetails.tsx b/src/components/ProductCard/ProductDetails.tsx
@@ -4,6 +4,9 @@ import { ProductDetailsProperty } from 'pages/Shop/Shop';
 import { useParams } from 'react-router';
 import sizeIcon from '../../static/img/merchStore/size-icon.svg';
 import useProductDetails from 'hooks/product-details';
+import Tippy from '@tippyjs/react';
+// import 'tippy.js/dist/tippy.css';
+import sizeChart from '../../../src/static/img/merchStore/size-chart.svg';
 
 interface ProductDetailsProps {
     data?: ProductDetailsProperty;
@@ -21,6 +24,7 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({
         <div className='productDetailsContainer'>
             <div className='productDetailsTop'>
                 <div className='leftSection'>
+                    {/* Make sure to change the data to productDetails once we update the cms database to hold thumbnails */}
                     {data?.thumbnails?.map((item) => {
                         return (
                             <img src={item}></img>
@@ -29,17 +33,23 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({
                     )}
                 </div>
                 <div className='middleSection'>
-                    <img src={data?.picture}></img>
+                    <img src={productDetails?.picture}></img>
                 </div>
                 <div className='rightSection'>
-                    <div className='productTitle'>{data?.name}</div>
-                    <div className='price'>{data?.price}</div>
+                    <div className='productTitle'>{productDetails?.name}</div>
+                    <div className='price'>{"CA $" + productDetails?.price}</div>
                     <div className='sizeChart'>
                         <div className='sizeChartText'>How does it fit?  </div>
-                        <img src={sizeIcon} className='sizeChartIcon'></img>
+                        <Tippy content={<img src={sizeChart}/>}>
+                        <img id="sizechart" src={sizeIcon} className='sizeChartIcon'></img>
+                        </Tippy>
+                    </div>
+                    <div className='description'>{productDetails?.description}</div>
+                    <div className='orderButton'>
+                    <a href={productDetails?.order_link} target="_blank" style={{ textDecoration: 'none'}}>
+                    Order with Form
+                    </a>
                     </div>
-                    <div className='description'>{data?.description}</div>
-                    <div className='orderButton'>Order with Form</div>
                 </div>
             </div>
             <div className='relatedProductsContainer'></div>