update

kitkatbr · Jul 26, 2024 · b300dbd · b300dbd
1 parent 56ab3ca
commit b300dbd
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 43 deletions.
diff --git a/src/components/product-selection/product-display/index.js b/src/components/product-selection/product-display/index.js
@@ -34,9 +34,21 @@ const ProductDisplay = ({ region, product }) => {
         }}
         variant="fz_s"
       >
-        {product.description}
-      </Text>
-      <OptionSelector product={product} />
+    <div className="product-desc">
+      <span className="product-title">
+      {product.title}
+
+              <span className="badge">
+                New
+              </span>
+      </span>
+      <span className="product-caption">
+      {product.description}
+            </span>
+
+
+    </div>      </Text>
+      <OptionSelector product={product} region={region}   />
     </Flex>
   ) : null
 }

diff --git a/src/components/product-selection/product-display/option-selector.js b/src/components/product-selection/product-display/option-selector.js
@@ -1,12 +1,25 @@
-import { Box, Flex, Select, Text } from "@theme-ui/components"
+import { Box, Flex, Select, Text, Input, Slider } from "@theme-ui/components"
 import React, { useContext, useEffect, useMemo, useState } from "react"
 import ProductContext from "../../../context/product-context"
+import { formatVariantPrice } from "medusa-react"
 
-const OptionSelector = ({ product }) => {
+const OptionSelector = ({ product, region}) => {
   const { quantity, updateQuantity, selectVariant } = useContext(ProductContext)
   const [options, setOptions] = useState([])
   const [selection, setSelection] = useState(JSON.stringify({}))
 
+  let price = formatVariantPrice({
+    variant: product.variants[0] ,
+    region,
+  })
+
+  let cifra = "#"
+  if (price?.includes("R$")) { price = price.replace("R$","").replace(",",""), cifra="R$"}
+  if (price?.includes("$")) { price = price.replace("$","").replace(",",""), cifra="$"}
+  if (price?.includes("€")) { price = price.replace("€","").replace(",",""), cifra="€"}
+
+
+
   useEffect(() => {
     const opts = []
     for (const option of product.options) {
@@ -145,44 +158,86 @@ const OptionSelector = ({ product }) => {
         }}
       >
         <Text sx={{ mb: "12px", fontWeight: "bold" }}>Quantity</Text>
-        <Select
-          defaultValue={quantity || 1}
-          sx={{
-            minWidth: "170px",
-            height: "40px",
-            border: "1px solid #E5E7EB",
-            borderRadius: "4px",
-            backgroundColor: "inherit",
-            color: "#6B7280",
-            outline: "none",
-          }}
-          arrow={
-            <Box
-              as="svg"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="#6B7280"
-              sx={{
-                ml: -28,
-                alignSelf: "center",
-                pointerEvents: "none",
-              }}
-            >
-              <path d="M7.41 7.84l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" />
-            </Box>
-          }
-          onChange={handleQuantity}
-        >
-          {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((v, i) => {
-            return (
-              <option key={i} value={`${v}`}>
-                {v}
-              </option>
-            )
-          })}
-        </Select>
+
+
+
+        <Flex
+      sx={{
+        flexDirection: "column",
+        mb: ".75em",
+        width: "100%",
+      }}
+    >
+<Input
+
+value={quantity}
+readOnly
+sx={{
+  minWidth: "170px",
+  height: "40px",
+  border: "1px solid #E5E7EB",
+  borderRadius: "4px",
+  backgroundColor: "inherit",
+  color: "#6B7280",
+  outline: "none",
+}}
+
+/>
+
+<Slider 
+        defaultValue={quantity || 1}
+        onChange={handleQuantity}
+        max={Number(product.metadata.max)}
+        min={Number(product.metadata.min)}
+        sx={{
+
+          backgroundColor: "#f3f4f6",
+          color: "#6e46eb",
+          marginTop: "20px",
+
+
+        }}
+
+        />
+<Flex sx={{ alignItems: "center", margin: "" }}>
+              <Text sx={{ fontWeight: "light", color: "#9ba2ad" }}>1000K</Text>
+
+              <Text sx={{ width: "90%", fontWeight: "light", color: "#9ba2ad" }}></Text>
+
+
+
+              <Text sx={{ mr: "6px", fontWeight: "light", color: "#9ba2ad"}}>10000K</Text>
+
+              </Flex>
+
+    </Flex>
+
+    <Text
+        sx={{
+          mt: "16px",
+          lineHeight: "24px",
+          fontSize: "14px",
+          fontWeight: 300,
+          color: "#6B7280",
+        }}
+        variant="fz_s"
+      >
+
+<div className="btn-group">
+
+
+<span className="product-price">
+<div className="price-card price-card-new"><span>{cifra}</span>{ price * quantity}<span>.00</span></div>
+
+
+  </span>
+
+
+</div>
+
+         </Text>
+
+
       </Flex>
     </Flex>
   )