feat module 6, 7 : add side bar for store availability, details available (location, stock, whatsapp)

src/components/ProductDetails/ProductDetails.jsx

@@ -6,13 +6,20 @@ import {
   TextField,
   CircularProgress,
   Dialog,
-  IconButton
+  IconButton,
+  Drawer,
+  InputBase,
+  Tooltip
 } 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 KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import WhatsAppIcon from '@mui/icons-material/WhatsApp';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
 import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined';
 import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
 import ShoppingBagOutlinedIcon from '@mui/icons-material/ShoppingBagOutlined';
@@ -45,6 +52,9 @@ const ProductDetails = () => {
   const [variants, setVariants] = useState([])
   const [showLoader, setShowLoader] = useState(false)
   const [atomeOpen, setAtomeOpen] = useState(false)
+  const [storeAvailabilityOpen, setStoreAvailabilityOpen] = useState(false)
+  const [storeSearch, setStoreSearch] = useState("")
+  const [expandedStoreRows, setExpandedStoreRows] = useState({})
   const [expandedInfoRows, setExpandedInfoRows] = useState({})
   const [alert, setAlert] = useState({ open: false, severity: '', message: '' });
 
@@ -231,6 +241,46 @@ const ProductDetails = () => {
   const installmentPrice = `${(amount / 3).toFixed(2)} ${currencyCode}`
   // const shortDescriptionHtml = getFirstDescriptionBlock(product?.descriptionHtml)
 
+  const storeLocations = [
+    {
+      name: "AMBER IOI CITY MALL",
+      address: "G-67 IOI City Mall, Putrajaya",
+      whatsapp: "https://wa.me/60172282072",
+      maps: "https://www.google.com/maps/search/?api=1&query=AMBER%20IOI%20City%20Mall%20Putrajaya"
+    },
+    {
+      name: "AMBER WANGSA WALK MALL",
+      address: "Lot G-77, Wangsa Walk Mall, Kuala Lumpur",
+      whatsapp: "https://wa.me/60172282072",
+      maps: "https://www.google.com/maps/search/?api=1&query=AMBER%20Wangsa%20Walk%20Mall%20Kuala%20Lumpur"
+    }
+  ]
+
+  const filteredStoreLocations = storeLocations.filter(({ name, address }) => {
+    const searchValue = storeSearch.trim().toLowerCase()
+
+    if (!searchValue) return true
+
+    return `${name} ${address}`.toLowerCase().includes(searchValue)
+  })
+
+  const selectedVariantLabel = Object.entries(variantSelection)
+    .filter(([key]) => !["amount", "currencyCode", "id", "quantityAvailable"].includes(key))
+    .map(([, value]) => value)
+    .join(" / ")
+
+  const storeStockText = variantSelection?.quantityAvailable > 0
+    ? `${variantSelection.quantityAvailable} stock left`
+    : "Out of stock"
+
+  const getStoreWhatsappUrl = (store) => {
+    const productTitle = product?.title || "this item"
+    const variantText = selectedVariantLabel ? ` - ${selectedVariantLabel}` : ""
+    const message = `Halo ${store.name}, apakah ${productTitle}${variantText} masih tersedia? Terima kasih`
+
+    return `${store.whatsapp}?text=${encodeURIComponent(message)}`
+  }
+
   const toggleInfoRow = (row) => {
     setExpandedInfoRows((prevRows) => ({
       ...prevRows,
@@ -238,6 +288,13 @@ const ProductDetails = () => {
     }))
   }
 
+  const toggleStoreRow = (row) => {
+    setExpandedStoreRows((prevRows) => ({
+      ...prevRows,
+      [row]: !prevRows[row]
+    }))
+  }
+
   const infoRowSx = (isExpanded) => ({
     display: "flex",
     alignItems: "flex-start",
@@ -544,12 +601,29 @@ const ProductDetails = () => {
         {/* 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>
+          */}
+          <Box
+            onClick={() => setStoreAvailabilityOpen(true)}
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              py: 2,
+              borderBottom: "1px solid #DDD",
+              cursor: "pointer"
+            }}
+          >
+            <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
@@ -782,8 +856,249 @@ const ProductDetails = () => {
           </Box>
         </Box>
       </Dialog>
+
+      {/* Store Availability Sidebar */}
+      <Drawer
+        anchor="right"
+        open={storeAvailabilityOpen}
+        onClose={() => setStoreAvailabilityOpen(false)}
+        PaperProps={{
+          sx: {
+            width: { xs: "100vw", sm: 430, md: 500 },
+            maxWidth: "100%",
+            boxSizing: "border-box",
+            overflowX: "hidden",
+            px: { xs: 2, md: 4 },
+            py: { xs: 3, md: 4 },
+            borderRadius: 0,
+            fontFamily: "inherit"
+          }
+        }}
+      >
+        <Box sx={{ position: "relative" }}>
+          <IconButton
+            aria-label="Close store availability"
+            onClick={() => setStoreAvailabilityOpen(false)}
+            sx={{
+              position: "absolute",
+              right: -12,
+              top: -12,
+              color: "#000"
+            }}
+          >
+            <CloseIcon sx={{ fontSize: 30 }} />
+          </IconButton>
+
+          <Typography
+            variant="body2"
+            sx={{
+              textTransform: "uppercase",
+              fontWeight: "400",
+              fontSize: { xs: "1.05rem", sm: "1.2rem", md: "1.5rem" },
+              pr: 4,
+              mb: 0.5
+            }}
+          >
+            Store Availability
+          </Typography>
+
+          <Typography variant="body2" sx={{ fontWeight: "400", fontSize: { xs: "0.9rem", md: "1.05rem" }, mb: 1.5 }}>
+            Select variant
+          </Typography>
+
+          <Box sx={{ borderBottom: "1px solid #999", pb: 2.5, mb: 3 }}>
+            {variants.map(({ name, options }, index) => (
+              <Box key={name || index} sx={{ display: (name === "Title") ? "none" : "flex", flexWrap: "wrap", gap: { xs: 0.75, md: 1 } }}>
+                {options?.map((value) => (
+                  <Button
+                    key={value}
+                    variant="outlined"
+                    sx={{
+                      minWidth: { xs: 46, md: 50 },
+                      height: { xs: 42, md: 44 },
+                      px: 1.5,
+                      borderRadius: 0,
+                      borderColor: variantSelection[name] === value ? "primary.main" : "#999",
+                      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}
+                  </Button>
+                ))}
+              </Box>
+            ))}
+          </Box>
+
+          <Box
+            sx={{
+              backgroundColor: "#F4F4F4",
+              height: { xs: 48, md: 52 },
+              display: "flex",
+              alignItems: "center",
+              px: 2,
+              mb: 2
+            }}
+          >
+            <InputBase
+              value={storeSearch}
+              onChange={(event) => setStoreSearch(event.target.value)}
+              placeholder="Search store"
+              fullWidth
+              sx={{
+                fontSize: "0.95rem",
+                color: "#000"
+              }}
+            />
+          </Box>
+
+          {selectedVariantLabel && (
+            <Typography sx={{ color: "text.secondary", fontSize: "0.8rem", mb: 1.5 }}>
+              Showing availability for {selectedVariantLabel}
+            </Typography>
+          )}
+
+          <Box>
+            {filteredStoreLocations.map((store) => {
+              const isExpanded = expandedStoreRows[store.name]
+
+              return (
+                <Box key={store.name} sx={{ borderBottom: "1px solid #999", py: 2 }}>
+                  <Box sx={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 1.5 }}>
+                    <Box sx={{ minWidth: 0 }}>
+                      <Typography
+                        sx={{
+                          textTransform: "uppercase",
+                          fontWeight: "400",
+                          fontSize: { xs: "0.95rem", md: "1.1rem" },
+                          mb: 0.5,
+                          lineHeight: 1.35,
+                          wordBreak: "break-word"
+                        }}
+                      >
+                        {store.name}
+                      </Typography>
+                      <Typography
+                        sx={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 0.5,
+                          color: variantSelection?.quantityAvailable > 0 ? "#808000" : "error.main",
+                          fontSize: "0.9rem"
+                        }}
+                      >
+                        <Box
+                          component="span"
+                          sx={{
+                            width: 8,
+                            height: 8,
+                            borderRadius: "50%",
+                            backgroundColor: variantSelection?.quantityAvailable > 0 ? "#808000" : "error.main",
+                            display: "inline-block",
+                            flexShrink: 0
+                          }}
+                        />
+                        {storeStockText}
+                      </Typography>
+                    </Box>
+
+                    <Box sx={{ display: "flex", alignItems: "center", gap: 0.5, flexShrink: 0 }}>
+                      <IconButton
+                        component="a"
+                        href={getStoreWhatsappUrl(store)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label={`Whatsapp ${store.name}`}
+                        sx={{ color: "#000", p: 0.5 }}
+                      >
+                        <WhatsAppIcon sx={{ fontSize: 20 }} />
+                      </IconButton>
+                      <IconButton
+                        aria-label={`Toggle ${store.name}`}
+                        onClick={() => toggleStoreRow(store.name)}
+                        sx={{ color: "#000", p: 0.5 }}
+                      >
+                        {isExpanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+                      </IconButton>
+                    </Box>
+                  </Box>
+
+                  <Box
+                    sx={{
+                      maxHeight: isExpanded ? 110 : 0,
+                      overflow: "hidden",
+                      transition: "max-height 0.25s ease-in-out"
+                    }}
+                  >
+                    <Box sx={{ display: "flex", alignItems: "center", gap: 0.75, pt: 1, minWidth: 0 }}>
+                      <Typography sx={{ color: "text.secondary", fontSize: "0.875rem", minWidth: 0, wordBreak: "break-word" }}>
+                        {store.address}
+                      </Typography>
+                      <Tooltip title="Open in Maps" arrow>
+                        <IconButton
+                          component="a"
+                          href={store.maps}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          aria-label={`Open ${store.name} in maps`}
+                          sx={{
+                            color: "#000",
+                            p: 0.25
+                          }}
+                        >
+                          <LocationOnIcon sx={{ fontSize: 20 }} />
+                        </IconButton>
+                      </Tooltip>
+                    </Box>
+                    {/*
+                    <Button
+                      component="a"
+                      href={store.maps}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      variant="outlined"
+                      sx={{
+                        mt: 1.25,
+                        minWidth: 74,
+                        height: 36,
+                        borderRadius: 0,
+                        borderColor: "#000",
+                        color: "#000",
+                        textTransform: "none",
+                        fontSize: "0.875rem",
+                        fontWeight: 400,
+                        px: 2,
+                        "&:hover": {
+                          borderColor: "primary.main",
+                          backgroundColor: "transparent"
+                        }
+                      }}
+                    >
+                      Maps
+                    </Button>
+                    */}
+                  </Box>
+                </Box>
+              )
+            })}
+
+            {filteredStoreLocations.length === 0 && (
+              <Typography sx={{ color: "text.secondary", fontSize: "0.95rem", py: 3 }}>
+                No store found.
+              </Typography>
+            )}
+          </Box>
+        </Box>
+      </Drawer>
     </Box>
   );
 };
 
 export default ProductDetails;
+