feat module 6, 7 : change product details UI, add atome payment UI

src/components/ProductDetails/ProductDetails.jsx

@@ -4,14 +4,24 @@ import {
   Typography,
   Button,
   TextField,
-  CircularProgress
+  CircularProgress,
+  Dialog,
+  IconButton
 } from "@mui/material";
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
+import StraightenIcon from '@mui/icons-material/Straighten';
+import StorefrontIcon from '@mui/icons-material/Storefront';
+import CloseIcon from '@mui/icons-material/Close';
+import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined';
+import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
+import ShoppingBagOutlinedIcon from '@mui/icons-material/ShoppingBagOutlined';
+import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import { useSelector, useDispatch } from "react-redux";
 import { createCart, addItemToCart } from "../../redux/slices/cartSlice";
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
+import atomeLogo from "../../assets/images/atome.webp";
 
 // Utility function to check if an object is empty
 const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
@@ -34,6 +44,7 @@ const ProductDetails = () => {
   })
   const [variants, setVariants] = useState([])
   const [showLoader, setShowLoader] = useState(false)
+  const [atomeOpen, setAtomeOpen] = useState(false)
   const [alert, setAlert] = useState({ open: false, severity: '', message: '' });
 
   useEffect(() => {
@@ -45,7 +56,7 @@ const ProductDetails = () => {
       let productVariants = product?.variants
 
       // get all variant type
-      if (!productVariants || productVariants?.length == 0) return
+      if (!productVariants || productVariants?.length === 0) return
 
       // we want to get the title for each variant
       const uniqueOptions = {};
@@ -213,51 +224,98 @@ const ProductDetails = () => {
     setQuantity((prevQuantity) => (prevQuantity > 1 ? prevQuantity - 1 : 1));
   };
 
+  const amount = parseFloat(variantSelection.amount || 0)
+  const currencyCode = variantSelection.currencyCode || ""
+  const formattedPrice = `${currencyCode} ${amount.toFixed(2)}`
+  const installmentPrice = `${(amount / 3).toFixed(2)} ${currencyCode}`
+  // const shortDescriptionHtml = getFirstDescriptionBlock(product?.descriptionHtml)
+
 
   return (
     <Box sx={{ position: "relative" }}>
-      {/* Flex Container */}
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-        {/* Section 1: Product Info */}
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
         <Box>
-          <Typography variant="body2" sx={{
-            fontWeight: "400", fontSize: {
-              xs: "0.875rem",
-              sm: "0.875rem",
-              md: "1.1rem",
-            }
-          }}>
+          <Typography
+            variant="body2"
+            sx={{
+              fontWeight: "400",
+              fontSize: {
+                xs: "0.875rem",
+                sm: "0.875rem",
+                md: "1.1rem"
+              },
+              mb: 0.5,
+              textTransform: "uppercase"
+            }}
+          >
             {product?.title}
           </Typography>
-          {/* <Typography variant="body2" color="text.secondary">
-            {product?.collections?.nodes[0]?.title}
-          </Typography> */}
-
-
-          <Typography variant="body2" sx={{
-            fontWeight: "100", fontSize: {
-              xs: "0.875rem",
-              sm: "0.875rem",
-              md: "1.1rem",
-            }
-          }}>
-            {(variantSelection?.quantityAvailable == 0) ? <span style={{ color: "red", fontWeight: "bolder" }}>{`OUT OF STOCK`}</span> : `${variantSelection.currencyCode} ${parseFloat(variantSelection.amount).toFixed(2)}`}
+
+          <Box sx={{ mb: 3 }}>
+            {/*
+            <Typography variant="body1" sx={{ fontWeight: "400", color: "#000" }}>
+              Description
+            </Typography>
+            */}
+            <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
+              <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
+            </Typography>
+          </Box>
+
+          <Typography
+            variant="body2"
+            sx={{
+              fontWeight: "100",
+              fontSize: {
+                xs: "0.875rem",
+                sm: "0.875rem",
+                md: "1.1rem"
+              },
+              mb: 0.75
+            }}
+          >
+            {(variantSelection?.quantityAvailable === 0) ? <span style={{ color: "red", fontWeight: "bolder" }}>OUT OF STOCK</span> : formattedPrice}
           </Typography>
 
+          {/* Atome installment option */}
+          {amount > 0 && (
+            <Box
+              component="button"
+              type="button"
+              onClick={() => setAtomeOpen(true)}
+              sx={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 0.5,
+                border: 0,
+                p: 0,
+                backgroundColor: "transparent",
+                cursor: "pointer",
+                fontWeight: "400",
+                color: "#000",
+                fontFamily: "inherit",
+                fontSize: {
+                  xs: "0.75rem",
+                  md: "0.875rem"
+                }
+              }}
+            >
+              or 3 payments of <strong>{installmentPrice}</strong> with <strong>Atome <img style={{ marginLeft: 5, verticalAlign: "middle" }} width="15" src={atomeLogo} alt="Atome" /></strong>
+            </Box>
+          )}
         </Box>
 
-        {/* Section 2: Variants */}
-        <Box >
-
+        <Box>
           {variants.map(({ name, options }, index) => {
 
             return (
-              <Box sx={{ display: (name == "Title") ? "none" : "block" }}>
+              <Box key={name || index} sx={{ display: (name === "Title") ? "none" : "block" }}>
                 <Typography variant="body2" sx={{
-                  fontWeight: "400", fontSize: {
+                  fontWeight: "400",
+                  fontSize: {
                     xs: "0.875rem",
                     sm: "0.875rem",
-                    md: "1.1rem",
+                    md: "1.1rem"
                   },
                   mb: 1
                 }}>
@@ -267,15 +325,31 @@ const ProductDetails = () => {
                 <Box sx={{
                   display: "flex",
                   flexWrap: "wrap",
-
+                  gap: 1.25,
                   mb: 2
-                }} gap={2}>
+                }}>
                   {options?.map((value) => (
                     <Button
                       key={value}
-                      variant={variantSelection[name] === value ? "contained" : "outlined"}
-                      color={variantSelection[name] === value ? "primary" : "primary"}
-                      sx={{ color: variantSelection[name] === value ? "#FFF" : "#000" }}
+                      variant="outlined"
+                      sx={{
+                        minWidth: 54,
+                        width: {
+                          xs: 92,
+                          md: 110
+                        },
+                        height: 46,
+                        px: 0,
+                        borderRadius: 0,
+                        borderColor: variantSelection[name] === value ? "primary.main" : "#DDD",
+                        backgroundColor: variantSelection[name] === value ? "primary.main" : "#FFF",
+                        color: variantSelection[name] === value ? "#FFF" : "#000",
+                        fontSize: "0.875rem",
+                        "&:hover": {
+                          borderColor: "primary.main",
+                          backgroundColor: variantSelection[name] === value ? "primary.main" : "#FFF",
+                        }
+                      }}
                       onClick={() => handleVariantClick(name, value)}
                     >
                       {value}
@@ -287,27 +361,31 @@ const ProductDetails = () => {
 
           })}
 
+          <Box
+            component="a"
+            href="#"
+            sx={{
+              display: "inline-flex",
+              alignItems: "center",
+              color: "inherit",
+              textDecoration: "underline",
+              textTransform: "uppercase",
+              fontSize: "0.875rem",
+              mb: 1
+            }}
+          >
+            <StraightenIcon sx={{ mr: 0.75, fontSize: 20 }} />
+            Size Chart
+          </Box>
         </Box>
 
 
-        {/* Section 3: Quantity */}
-        <Box sx={{ mb: 5 }}>
-          <Typography variant="body2" sx={{
-            fontWeight: "400", fontSize: {
-              xs: "0.875rem",
-              sm: "0.875rem",
-              md: "1.1rem",
-            },
-            mb: 1
-          }}>
-            Quantity
-          </Typography>
-          <Box display="flex" alignItems="center" gap={2}>
+        <Box sx={{ display: "flex", alignItems: "stretch", gap: 2 }}>
+          <Box display="flex" alignItems="stretch" sx={{ backgroundColor: "#F4F4F4", height: 48 }}>
             <Button
-              variant="contained"
-              color="primary"
-              sx={{ width: "35px" }}
-              disabled={variantSelection?.quantityAvailable <= 0 || quantity == 1}
+              variant="text"
+              sx={{ minWidth: 80, color: "#000", backgroundColor: "#F4F4F4" }}
+              disabled={variantSelection?.quantityAvailable <= 0 || quantity === 1}
               onClick={handleDecrement}
             >
               <RemoveIcon />
@@ -316,52 +394,52 @@ const ProductDetails = () => {
             <TextField
               value={quantity}
               inputProps={{ readOnly: true, style: { textAlign: 'center' } }}
-              size="small"
-              sx={{ width: "100px" }}
+              sx={{
+                width: 58,
+                "& .MuiOutlinedInput-root": {
+                  height: 48,
+                  borderRadius: 0,
+                  backgroundColor: "#F4F4F4",
+                  "& fieldset": {
+                    border: "none"
+                  }
+                }
+              }}
               variant="outlined"
             />
 
             <Button
-              variant="contained"
-              color="primary"
-              sx={{ width: "35px" }}
-              disabled={variantSelection?.quantityAvailable <= 0 || quantity == variantSelection?.quantityAvailable}
+              variant="text"
+              sx={{ minWidth: 80, color: "#000", backgroundColor: "#F4F4F4" }}
+              disabled={variantSelection?.quantityAvailable <= 0 || quantity === variantSelection?.quantityAvailable}
               onClick={handleIncrement}
             >
               <AddIcon />
             </Button>
           </Box>
-        </Box>
 
-        {/* Section 4: Description */}
-        <Box sx={{ mb: 5 }}>
-          <Typography variant="body1" sx={{ fontWeight: "400", color: "#000" }}>
-            Description
-          </Typography>
-          <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
-            <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
-          </Typography>
+          <Button
+            onClick={() => { handleCart() }}
+            variant="contained"
+            color="primary"
+            fullWidth
+            disabled={variantSelection?.quantityAvailable <= 0 || showLoader}
+            sx={{
+              backgroundColor: (theme) => theme.palette.primary.main,
+              color: "white",
+              textTransform: "uppercase",
+              borderRadius: 0,
+              fontSize: "0.875rem",
+              "&:hover": {
+                backgroundColor: (theme) => theme.palette.primary.dark,
+              },
+            }}
+          >
+            <AddShoppingCartIcon sx={{ mr: 1, fontSize: 18 }} />
+            ADD TO CART {showLoader && <CircularProgress sx={{ ml: 1 }} color="white" size={20} />}
+          </Button>
         </Box>
 
-        <Button
-          onClick={() => { handleCart() }}
-          variant="contained"
-          color="common.black"
-          fullWidth
-          disabled={variantSelection?.quantityAvailable <= 0 || showLoader}
-          sx={{
-            backgroundColor: (theme) => theme.palette.common.black,
-            color: "white",
-            textTransform: "none",
-            mt: 2,
-            "&:hover": {
-              backgroundColor: (theme) => theme.palette.grey[900],
-            },
-          }}
-        >
-          ADD TO CART {showLoader && <CircularProgress sx={{ ml: 1 }} color="white" size={20} />}
-        </Button>
-
         {cart?.lines?.nodes?.length > 0 && <Button
           onClick={() => { window.location.href = '/cart' }}
           variant="contained"
@@ -379,7 +457,79 @@ const ProductDetails = () => {
         >
           PAY NOW
         </Button>}
+
+        {/*
+        {/*
+        <Box sx={{ mb: 5 }}>
+          <Typography variant="body1" sx={{ fontWeight: "400", color: "#000" }}>
+            Description
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
+            <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
+          </Typography>
+        </Box>
+        */}
+
+        {/* <Box sx={{ mb: 5 }}>
+          <Typography variant="body1" sx={{ fontWeight: "400", color: "#000" }}>
+            Description
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
+            <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
+          </Typography>
+        </Box> */}
+
+        {/* Product information rows: store availability, details, material, care, shipping, and returns */}
+        <Box sx={{ mt: 4, borderTop: "1px solid #DDD" }}>
+          {/* Store Availability */}
+          <Box sx={{ display: "flex", alignItems: "center", py: 2, borderBottom: "1px solid #DDD" }}>
+            <StorefrontIcon sx={{ mr: 1, fontSize: 20 }} />
+            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+              Store Availability
+            </Typography>
+          </Box>
+
+          {/* Product Details */}
+          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 2, borderBottom: "1px solid #DDD" }}>
+            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+              Product Details
+            </Typography>
+            <AddIcon sx={{ fontSize: 18 }} />
+          </Box>
+
+          {/* Material */}
+          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 2, borderBottom: "1px solid #DDD" }}>
+            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+              Material
+            </Typography>
+            <AddIcon sx={{ fontSize: 18 }} />
+          </Box>
+
+          {/* Care Instruction */}
+          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 2, borderBottom: "1px solid #DDD" }}>
+            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+              Care Instruction
+            </Typography>
+            <AddIcon sx={{ fontSize: 18 }} />
+          </Box>
+          {/* Shipping Information */}
+          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 2, borderBottom: "1px solid #DDD" }}>
+            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+              Shipping Information
+            </Typography>
+            <AddIcon sx={{ fontSize: 18 }} />
+          </Box>
+
+          {/* Return & Exchanges */}
+          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 2, borderBottom: "1px solid #DDD" }}>
+            <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
+              Return & Exchanges
+            </Typography>
+            <AddIcon sx={{ fontSize: 18 }} />
+          </Box>
+        </Box>
       </Box>
+      
       {alert.open && (
         <Alert
           severity={alert.severity}
@@ -390,6 +540,149 @@ const ProductDetails = () => {
           {alert.message}
         </Alert>
       )}
+
+      <Dialog
+        open={atomeOpen}
+        onClose={() => setAtomeOpen(false)}
+        maxWidth="md"
+        fullWidth
+        PaperProps={{
+          sx: {
+            borderRadius: 0,
+            backgroundColor: "#FFF",
+            px: { xs: 3, md: 8 },
+            py: { xs: 6, md: 7 },
+            position: "relative"
+          }
+        }}
+      >
+        <IconButton
+          aria-label="Close Atome popup"
+          onClick={() => setAtomeOpen(false)}
+          sx={{
+            position: "absolute",
+            right: 16,
+            top: 12,
+            color: "#000"
+          }}
+        >
+          <CloseIcon sx={{ fontSize: 34 }} />
+        </IconButton>
+
+        <Box sx={{ textAlign: "center" }}>
+          <Box sx={{ display: "inline-flex", alignItems: "center", gap: 1, mb: 4 }}>
+            <Typography
+              component="span"
+              sx={{
+                fontSize: { xs: "2.25rem", md: "3rem" },
+                fontWeight: 700,
+                lineHeight: 1,
+                color: "#000"
+              }}
+            >
+              atome
+            </Typography>
+            <Box
+              component="span"
+              sx={{
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: { xs: 42, md: 50 },
+                height: { xs: 42, md: 50 },
+                borderRadius: "9px",
+                backgroundColor: "#F0FF4F",
+                color: "#000",
+                fontWeight: 700,
+                fontSize: { xs: "2rem", md: "2.35rem" },
+                lineHeight: 1
+              }}
+            >
+              A
+            </Box>
+          </Box>
+
+          <Typography sx={{ fontSize: "1.35rem", fontWeight: 500, mb: 1 }}>
+            Time to own it
+          </Typography>
+          <Typography sx={{ color: "#7D8799", fontSize: "1.1rem", mb: { xs: 6, md: 9 } }}>
+            Why wait? Shop today, 3 easy payments.
+          </Typography>
+
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" },
+              gap: { xs: 5, md: 6 },
+              mb: { xs: 6, md: 9 }
+            }}
+          >
+            {[
+              {
+                icon: <AccountBalanceWalletOutlinedIcon />,
+                title: "3 easy payments",
+                text: "100% transparent"
+              },
+              {
+                icon: <LayersOutlinedIcon />,
+                title: "Split bill into 3 payments",
+                text: "Hassle-free experience"
+              },
+              {
+                icon: <ShoppingBagOutlinedIcon />,
+                title: "Hundreds of merchants",
+                text: "Vast variety"
+              }
+            ].map((item) => (
+              <Box key={item.title} sx={{ textAlign: "center" }}>
+                <Box
+                  sx={{
+                    color: "#111827",
+                    "& svg": {
+                      fontSize: 72,
+                      stroke: "#111827",
+                      strokeWidth: 0.6
+                    },
+                    mb: 3
+                  }}
+                >
+                  {item.icon}
+                </Box>
+                <Typography sx={{ fontWeight: 700, fontSize: "1.05rem", mb: 1 }}>
+                  {item.title}
+                </Typography>
+                <Typography sx={{ color: "#7D8799", fontSize: "1rem" }}>
+                  {item.text}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+
+          <Typography sx={{ fontWeight: 700, mb: 2 }}>
+            Terms & Conditions
+          </Typography>
+          <Button
+            component="a"
+            href="https://www.atome.sg/how-it-works"
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="contained"
+            sx={{
+              backgroundColor: "#F0FF4F",
+              color: "#071021",
+              minWidth: 260,
+              fontWeight: 700,
+              fontSize: "1.35rem",
+              textTransform: "none",
+              "&:hover": {
+                backgroundColor: "#E5F33F"
+              }
+            }}
+          >
+            How it works
+          </Button>
+        </Box>
+      </Dialog>
     </Box>
   );
 };