diff --git a/public/images/AddToCart2arrow-icon.svg b/public/images/AddToCart2arrow-icon.svg new file mode 100644 index 0000000..930bd30 --- /dev/null +++ b/public/images/AddToCart2arrow-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/AddToCart2delivery-icon.svg b/public/images/AddToCart2delivery-icon.svg new file mode 100644 index 0000000..e4cc601 --- /dev/null +++ b/public/images/AddToCart2delivery-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/AddToCart2icon-shop.svg b/public/images/AddToCart2icon-shop.svg new file mode 100644 index 0000000..564b601 --- /dev/null +++ b/public/images/AddToCart2icon-shop.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/images/AddToCart2icon1.svg b/public/images/AddToCart2icon1.svg new file mode 100644 index 0000000..b4287d7 --- /dev/null +++ b/public/images/AddToCart2icon1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/AddToCart2info-circle.svg b/public/images/AddToCart2info-circle.svg new file mode 100644 index 0000000..4910bd7 --- /dev/null +++ b/public/images/AddToCart2info-circle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/AddToCart2shield-tick.svg b/public/images/AddToCart2shield-tick.svg new file mode 100644 index 0000000..fd2e0f8 --- /dev/null +++ b/public/images/AddToCart2shield-tick.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/AddToCart2tick-circle.svg b/public/images/AddToCart2tick-circle.svg new file mode 100644 index 0000000..d969ba7 --- /dev/null +++ b/public/images/AddToCart2tick-circle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/AddToCart/AddToCart1/index.js b/src/components/AddToCart/AddToCart1/index.js new file mode 100644 index 0000000..24cf10a --- /dev/null +++ b/src/components/AddToCart/AddToCart1/index.js @@ -0,0 +1,68 @@ +import React from "react"; + +const AddToCart1 = ({ + numberOfSuggest, + sendingTime, + button, + price, + profit, + showProduct, + productName, + productImg, + productCat, +}) => { + const specialities = [ + { + icon: "images/tick-circle.svg", + description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`, + }, + { + icon: "images/shield-tick.svg", + description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`, + }, + { + icon: "images/delivery-icon.svg", + description: `گارانتی اصالت و سلامت فیزیکی`, + }, + ]; + return ( +
+ {showProduct && ( +
+ productImage +
+

{productName}

+

{productCat}

+
+
+ )} + {specialities.map((item, index) => ( +
+ {item.icon && } +

{item.description}

+
+ ))} +
+

+ {price} + تومان +

+ {profit && ( +
+ با خرید این کالا {profit} تومان سود کنید +
+ )} +
+
{button}
+
+ ); +}; + +export default AddToCart1; diff --git a/src/components/AddToCart/AddToCart2/index.js b/src/components/AddToCart/AddToCart2/index.js new file mode 100644 index 0000000..353ea1c --- /dev/null +++ b/src/components/AddToCart/AddToCart2/index.js @@ -0,0 +1,126 @@ +import React from "react"; +import Button from "../../ButtonDesign/Button"; + +const AddToCart2 = ({ items, productPrice, discountPrice }) => { + console.log(items.alertIcon); + + return ( +
+
+ {items.map((item, index) => ( + <> +
+
+ +
+

+ {item.subtitle} + {item.title} +

+ {item.customerSatisfaction && ( +

+ رضایت خریداران: + + {item.customerSatisfactionPercent} + +

+ )} +
+
+ {item.alertIcon && ( + + )} +
+ {Number(index) !== items.length - 1 && ( +
+ )} + + ))} +
+

+ {productPrice} + تومان +

+

+ با خرید این کالا + {discountPrice} + صرفه جویی کنید +

+
+
+
+
+
+
+ +
+
+

+ بازگشت بی چون و چرا +

+

+ از اونجایی که ما خیلی خوب هستیم و دوستون داریم در صورتی که از کالایی + خوشتون نیومده میتونید بی قید و شرط پس بدید +

+
+
+
+ ); +}; + +export default AddToCart2; + +AddToCart2.defaultProps = { + items: [ + { + icon: "images/AddToCart2tick-circle.svg", + title: "توصیه به خرید توسط 4420 نفر", + subtitle: null, + alertIcon: false, + customerSatisfaction: false, + customerSatisfactionPercent: null, + }, + { + icon: "images/AddToCart2icon-shop.svg", + title: " آپادانا ", + subtitle: " فروشنده", + alertIcon: true, + customerSatisfaction: true, + customerSatisfactionPercent: " 91.5 ", + }, + { + icon: "images/AddToCart2delivery-icon.svg", + title: " 20 روز کاری پس از سفارش ", + subtitle: "زمان ارسال", + alertIcon: false, + customerSatisfaction: false, + customerSatisfactionPercent: null, + }, + { + icon: "images/AddToCart2shield-tick.svg", + title: "اصالت و سلامت فیزیکی", + subtitle: "گارانتی ", + alertIcon: true, + customerSatisfaction: false, + customerSatisfactionPercent: null, + }, + ], + + productPrice: " 56/894/000 ", + discountPrice: " 540.000 ", +}; diff --git a/src/components/AddToCart/index.js b/src/components/AddToCart/index.js index 12493f7..3273ec2 100644 --- a/src/components/AddToCart/index.js +++ b/src/components/AddToCart/index.js @@ -1,68 +1,27 @@ -import React from "react"; +import React, { useState } from "react"; -const AddToCartCard = ({ - numberOfSuggest, - sendingTime, - button, - price, - profit, - showProduct, - productName, - productImg, - productCat, -}) => { - const specialities = [ - { - icon: "images/tick-circle.svg", - description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`, - }, - { - icon: "images/shield-tick.svg", - description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`, - }, - { - icon: "images/delivery-icon.svg", - description: `گارانتی اصالت و سلامت فیزیکی`, - }, - ]; +import AddToCart1 from "./AddToCart1"; +import AddToCart2 from "./AddToCart2"; + +function AddToCart() { + const list = { + 1: , + 2: , + }; + const [type, setType] = useState(1); return ( -
- {showProduct && ( -
- productImage -
-

{productName}

-

{productCat}

-
-
- )} - {specialities.map((item, index) => ( -
- {item.icon && } -

{item.description}

-
- ))} -
-

- {price} - تومان -

- {profit && ( -
- با خرید این کالا {profit} تومان سود کنید -
- )} -
-
{button}
+
+ + {list[type]}
); -}; +} -export default AddToCartCard; +export default AddToCart; diff --git a/src/redux/data.js b/src/redux/data.js index e7e26fa..7fc226a 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -1,6 +1,6 @@ import ButtonDesign from "../components/ButtonDesign"; import Design2D from "../components/Design2D"; -import AddToCartCard from "../components/AddToCart"; +import AddToCart from "../components/AddToCart"; import Advertisements from "../components/Advertisements"; import Alert from "../components/Alert"; import Toast from "../components/Toast"; @@ -141,11 +141,11 @@ const components = [ }, { name: "AddToCartCard", - author: "Keshavarzi", + author: "Keshavarzi/Andalib", props: [], content: { - name: "AddToCartCard OR Product Status Card", - component: , + name: "AddToCartCard", + component: , code: null, }, },