Add to Cart Card Made

3 years ago · 9729e99d5e
parent 50543dec50
commit 9729e99d5e
8 changed files with 134 additions and 32 deletions
--- a/src/assets/icons/vuesax-linear-group.svg
+++ b/src/assets/icons/vuesax-linear-group.svg
@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.544" height="35.544" viewBox="0 0 35.544 35.544">
+  <g id="vuesax_linear_group" data-name="vuesax/linear/group" transform="translate(0 0)">
+    <g id="group" transform="translate(0 0)">
+      <path id="Vector" d="M14.055,17.772h1.481A2.971,2.971,0,0,0,18.5,14.81V0H5.169A5.918,5.918,0,0,0,0,3.036" transform="translate(3.717 2.962)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M0,17.772a4.437,4.437,0,0,0,4.443,4.443H5.924a2.962,2.962,0,1,1,5.924,0h5.924a2.962,2.962,0,1,1,5.924,0h1.481a4.437,4.437,0,0,0,4.443-4.443V13.329H25.177A1.485,1.485,0,0,1,23.7,11.848V7.4a1.485,1.485,0,0,1,1.481-1.481h1.91L24.555,1.5A2.986,2.986,0,0,0,21.978,0H19.253V10.367a2.971,2.971,0,0,1-2.962,2.962H14.81" transform="translate(2.962 7.405)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M5.924,2.962A2.962,2.962,0,1,1,2.962,0,2.962,2.962,0,0,1,5.924,2.962Z" transform="translate(8.886 26.658)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-4" data-name="Vector" d="M5.924,2.962A2.962,2.962,0,1,1,2.962,0,2.962,2.962,0,0,1,5.924,2.962Z" transform="translate(20.734 26.658)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-5" data-name="Vector" d="M5.924,4.443V7.4H1.481A1.485,1.485,0,0,1,0,5.924V1.481A1.485,1.485,0,0,1,1.481,0h1.91Z" transform="translate(26.658 13.329)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-6" data-name="Vector" d="M0,0H8.886" transform="translate(2.962 11.848)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-7" data-name="Vector" d="M0,0H5.924" transform="translate(2.962 16.291)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-8" data-name="Vector" d="M0,0H2.962" transform="translate(2.962 20.734)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-9" data-name="Vector" d="M0,0H35.544V35.544H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>
--- a/src/assets/icons/vuesax-linear-shield-tick.svg
+++ b/src/assets/icons/vuesax-linear-shield-tick.svg
@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35.994" height="35.994" viewBox="0 0 35.994 35.994">
+  <g id="vuesax_linear_shield-tick" data-name="vuesax/linear/shield-tick" transform="translate(0 0)">
+    <g id="shield-tick" transform="translate(0 0)">
+      <path id="Vector" d="M10.618.349,3.134,3.168A5.2,5.2,0,0,0,0,7.682V18.825a7.291,7.291,0,0,0,2.595,5.159L9.043,28.8a6.826,6.826,0,0,0,7.709,0L23.2,23.985A7.291,7.291,0,0,0,25.8,18.825V7.682a5.207,5.207,0,0,0-3.134-4.529L15.177.349A7.626,7.626,0,0,0,10.618.349Z" transform="translate(5.114 2.996)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-2" data-name="Vector" d="M0,4.034,2.415,6.449,8.863,0" transform="translate(13.573 13.768)" fill="none" stroke="#3fa7ce" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H35.994V35.994H0Z" transform="translate(35.994 35.994) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>
--- a/src/assets/icons/vuesax-linear-tick-circle.svg
+++ b/src/assets/icons/vuesax-linear-tick-circle.svg
@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.085" height="38.085" viewBox="0 0 38.085 38.085">
+  <g id="vuesax_linear_tick-circle" data-name="vuesax/linear/tick-circle" transform="translate(0 0)">
+    <g id="tick-circle" transform="translate(0 0)">
+      <path id="Vector" d="M15.869,31.738A15.869,15.869,0,1,0,0,15.869,15.915,15.915,0,0,0,15.869,31.738Z" transform="translate(3.174 3.174)" fill="#42e337" stroke="#9eff97" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-2" data-name="Vector" d="M0,4.491,4.491,8.982l9-8.982" transform="translate(12.298 14.552)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H38.085V38.085H0Z" fill="#afe7ab" opacity="0"/>
+    </g>
+  </g>
+</svg>
--- a/src/components/AddToCart/index.js
+++ b/src/components/AddToCart/index.js
@ -0,0 +1,51 @@
+import React from "react";
+
+import circleTick from '../../assets/icons/vuesax-linear-tick-circle.svg';
+import shieldTick from '../../assets/icons/vuesax-linear-shield-tick.svg';
+import linearGroup from '../../assets/icons/vuesax-linear-group.svg';
+
+
+
+const AddToCartCard = ({
+    numberOfSuggest,
+    sendingTime,
+    button,
+    price,
+    profit
+}) =>{
+    const specialities = [
+        {
+            icon: circleTick,
+            description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`,
+        },
+        {
+            icon: linearGroup,
+            description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`,
+        },
+        {
+            icon: shieldTick,
+            description: `گارانتی اصالت و سلامت فیزیکی`,
+        }
+    ];
+    return(
+        <div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center">
+            {specialities.map((item, index) => (
+                <div className="flex items-center  p-2 w-full border-0 border-b border-solid border-gray-300">
+                    {item.icon && <img src={item.icon} className="pl-3" />}
+                    <p className="text-sm text-blue52 text-right">{item.description}</p>
+                    </div>
+            ))}
+            <div className="w-full flex flex-col items-center justify-center p-4">
+                <h1 className="text-xl text-gray-500">
+                    <span className=" text-blueC0"> {price} </span> 
+                      تومان </h1>
+                    { profit && <h5 className="text-xs p-2 pb-0 text-blue52">با خرید این کالا {profit} تومان سود کنید</h5>}
+            </div>
+            <div className="w-full flex justify-center">
+                {button}
+            </div>
+        </div>
+    );
+};
+
+export default AddToCartCard;
--- a/src/components/Checkbox/index.js
+++ b/src/components/Checkbox/index.js
@ -17,7 +17,7 @@ export default function Checkbox(props) {
      </svg>

      <div className="checkbox-container">
-        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick}/>
+        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} onChange={props.onChange}/>
        <label className="checkbox" htmlFor={"ch"+props.name}>
          <span>
            <svg width="12px" height="10px">
--- a/src/components/VerticalExpandableProductFilter/index.js
+++ b/src/components/VerticalExpandableProductFilter/index.js
@ -66,9 +66,9 @@ export default function VerticalExpandableProductFilter(props) {
                <Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
                  checkedBox[i] = !checkedBox[i]
                  setChecked(checkedBox)
-                  props.onChange(name , item1.name);
                  
-                }} />
+                  
+                }} onChange={() => props.onChange(name , item1.name)} />
                <strong className="text-xs font-light text-gray-500">
                  {props.preName ? props.preName + ' ' + item1.name : item1.name}
                </strong>
--- a/src/views/Product/Desktop/ProductOverAll/index.js
+++ b/src/views/Product/Desktop/ProductOverAll/index.js
@ -9,6 +9,7 @@ import Header from "../../../../components/Header";
 import Comment from "../../Comment";
 import Rate from "../../Rate";
 import StarRating from "../../../../components/StarRating";
+import AddToCartCard from "../../../../components/AddToCart";

 export const ProductOverAll = ({
  productType,
@ -94,9 +95,52 @@ export const ProductOverAll = ({
              />
            </div>
          </div>
+          <div className="flex justify-center py-6">
+            <Button
+              title="مشاهده دوره ویدیویی این محصول       >"
+              backgroundColor={isDark ? "bg-transparent" : "bg-blueC0'"}
+              border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "2px" }}
+              color={isDark ? "text-white" : "text-blue52"}
+              
+              selectable={true}
+              onClick={() => setType("physical")}
+              
+              customStyle='bg-black bg-opacity-10'
+              twPaddings='py-4 px-32'
+              radius={false}
+              />
+          </div>
        </div>
        <div>
-          <h1>aopdjsoqweqweqweqweqweWajsduh</h1>
+          <AddToCartCard 
+          price={type === "digital" ? book?.product[0]?.price : book?.product[1]?.price}
+          sendingTime={20}
+          numberOfSuggest={160}
+          profit={12000}
+          button={
+            <Button
+            onClick={() =>
+              proxy.status()
+                ? pushToCart({
+                  productId:
+                    type === "digital"
+                      ? book?.product[0]?.id
+                      : book?.product[1]?.id,
+                  userId: userId,
+                  count: 1,
+                })
+                : toast.info("ابتدا وارد حساب کاربری خود شوید.")
+            }
+            title='افزودن به سبد خرید'
+            backgroundColor="bg-blueC0"
+            border={{ color: "#196EC055", width: "1px" }}
+            width="100%"
+            color="text-white"
+           twPaddings='py-4'
+          />
+          }
+
+          />
        </div>

      </header>
@ -119,34 +163,7 @@ export const ProductOverAll = ({
      </h2>

      <div className="w-full flex flex-row justify-between items-center mt-4">
-        <Button
-          onClick={() =>
-            proxy.status()
-              ? pushToCart({
-                productId:
-                  type === "digital"
-                    ? book?.product[0]?.id
-                    : book?.product[1]?.id,
-                userId: userId,
-                count: 1,
-              })
-              : toast.info("ابتدا وارد حساب کاربری خود شوید.")
-          }
-          title={
-            "خرید با قیمت" +
-            " " +
-            (type === "digital"
-              ? book?.product[0]?.price
-              : book?.product[1]?.price) +
-            " " +
-            "تومان"
-          }
-          backgroundColor="bg-blueC0"
-          border={{ color: "#196EC055", width: "1px" }}
-          width="65%"
-          color="text-white"
-        />
-
+        
      </div>
      <div className="w-full flex flex-row justify-between items-center mt-4">
        <Button
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -33,6 +33,7 @@ module.exports = {
      grayEE: "#EEEEEE",
      grayF9: "#F9F9F9",
      grayF4: "#EBF0F4",
+      grayF7: "#F7F7F7"
    }),
    textColor: (theme) => ({
      ...theme("colors"),