From 1b0086e5705ed43c1d70367f0e99b4dfd2a0c45b Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Thu, 27 Jan 2022 00:11:44 +0330 Subject: [PATCH] reza fixed product --- src/components/AddToCart/index.js | 150 ++++++------ src/components/Button/index.js | 2 +- src/components/ProductDescription/index.js | 111 --------- src/components/ProductImage/index.js | 60 +++++ src/components/ProductImage/index.scss | 9 + src/components/ProductImage/product-chair.svg | 8 + src/components/ProductImage/product-image.jpg | Bin 0 -> 65930 bytes .../ProductStatusCard/arrow-icon.svg | 11 + .../ProductStatusCard/delivery-icon.svg | 11 + .../ProductStatusCard/icon-shop.svg | 12 + src/components/ProductStatusCard/icon1.svg | 6 + src/components/ProductStatusCard/index.js | 125 ++++++++++ .../ProductStatusCard/info-circle.svg | 6 + .../ProductStatusCard/shield-tick.svg | 5 + .../ProductStatusCard/tick-circle.svg | 5 + src/components/ProductSuggestion/index.js | 110 +++++++++ src/components/ProductSuggestion/plus.svg | 3 + .../ProductSuggestion/product-chair.svg | 8 + src/components/ProductTab/index.js | 51 +++++ src/components/ProductTab/table/index.js | 47 ++++ .../Product/Desktop/ProductOverAll/index.js | 214 +++++------------- src/views/Product/Desktop/index.js | 2 +- 22 files changed, 610 insertions(+), 346 deletions(-) delete mode 100644 src/components/ProductDescription/index.js create mode 100644 src/components/ProductImage/index.js create mode 100644 src/components/ProductImage/index.scss create mode 100644 src/components/ProductImage/product-chair.svg create mode 100644 src/components/ProductImage/product-image.jpg create mode 100644 src/components/ProductStatusCard/arrow-icon.svg create mode 100644 src/components/ProductStatusCard/delivery-icon.svg create mode 100644 src/components/ProductStatusCard/icon-shop.svg create mode 100644 src/components/ProductStatusCard/icon1.svg create mode 100644 src/components/ProductStatusCard/index.js create mode 100644 src/components/ProductStatusCard/info-circle.svg create mode 100644 src/components/ProductStatusCard/shield-tick.svg create mode 100644 src/components/ProductStatusCard/tick-circle.svg create mode 100644 src/components/ProductSuggestion/index.js create mode 100644 src/components/ProductSuggestion/plus.svg create mode 100644 src/components/ProductSuggestion/product-chair.svg create mode 100644 src/components/ProductTab/index.js create mode 100644 src/components/ProductTab/table/index.js diff --git a/src/components/AddToCart/index.js b/src/components/AddToCart/index.js index c7f48db..c625ee7 100644 --- a/src/components/AddToCart/index.js +++ b/src/components/AddToCart/index.js @@ -1,80 +1,88 @@ 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'; - - +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, - showProduct, - productName, - productImg, - productCat, - footer -}) =>{ - const specialities = [ - { - icon: circleTick, - description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`, - }, - { - icon: linearGroup, - description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`, - }, - { - icon: shieldTick, - description: `گارانتی اصالت و سلامت فیزیکی`, - } - ]; - return( - <> -
- { - showProduct &&
- -
-

{productName}

-

{productCat}

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

{item.description}

-
- ))} -
-

- {price} - تومان

- { profit &&
با خرید این کالا {profit} تومان سود کنید
} -
-
- {button} + numberOfSuggest, + sendingTime, + button, + price, + profit, + showProduct, + productName, + productImg, + productCat, + footer, +}) => { + const specialities = [ + { + icon: circleTick, + description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`, + }, + { + icon: linearGroup, + description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`, + }, + { + icon: shieldTick, + description: `گارانتی اصالت و سلامت فیزیکی`, + }, + ]; + return ( + <> +
+ {showProduct && ( +
+ +
+

{productName}

+

{productCat}

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

{item.description}

+
+ ))} +
+

+ {price} + تومان{" "} +

+ {profit && ( +
+ با خرید این کالا {profit} تومان سود کنید +
+ )}
- {footer && +
{button}
+
+ {footer && (
- { - footer == 'SendBack' && - <> - -
-

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

-

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

-
- - } -
} - - ); + {footer == "SendBack" && ( + <> + +
+

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

+

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

+
+ + )} +
+ )} + + ); }; -export default AddToCartCard; \ No newline at end of file +export default AddToCartCard; diff --git a/src/components/Button/index.js b/src/components/Button/index.js index 7d68668..7262f1a 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -17,7 +17,7 @@ export default function Button({ }) { return (
+
+
+ +
+
+

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

+

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

+
+
+ + ); +}; + +const mapStateToProps = (state) => ({ + isDark: state.publicApi.isDark, +}) + +export default connect(mapStateToProps)(ProductStatusCard); + +ProductStatusCard.defaultProps = { + items: [ + { + icon: tick, + title: "توصیه به خرید توسط 4420 نفر", + subtitle: null, + alertIcon: false, + customerSatisfaction: false, + customerSatisfactionPercent: null, + }, + { + icon: shop, + title: " آپادانا ", + subtitle: " فروشنده", + alertIcon: true, + customerSatisfaction: true, + customerSatisfactionPercent: " 91.5 ", + }, + { + icon: delivery, + title: " 20 روز کاری پس از سفارش ", + subtitle: "زمان ارسال", + alertIcon: false, + customerSatisfaction: false, + customerSatisfactionPercent: null, + }, + { + icon: shield, + title: "اصالت و سلامت فیزیکی", + subtitle: "گارانتی ", + alertIcon: true, + customerSatisfaction: false, + customerSatisfactionPercent: null, + }, + ], + + productPrice: " 56/894/000 ", + discountPrice: " 540.000 ", +}; diff --git a/src/components/ProductStatusCard/info-circle.svg b/src/components/ProductStatusCard/info-circle.svg new file mode 100644 index 0000000..4910bd7 --- /dev/null +++ b/src/components/ProductStatusCard/info-circle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ProductStatusCard/shield-tick.svg b/src/components/ProductStatusCard/shield-tick.svg new file mode 100644 index 0000000..fd2e0f8 --- /dev/null +++ b/src/components/ProductStatusCard/shield-tick.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/ProductStatusCard/tick-circle.svg b/src/components/ProductStatusCard/tick-circle.svg new file mode 100644 index 0000000..d969ba7 --- /dev/null +++ b/src/components/ProductStatusCard/tick-circle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/ProductSuggestion/index.js b/src/components/ProductSuggestion/index.js new file mode 100644 index 0000000..7962d98 --- /dev/null +++ b/src/components/ProductSuggestion/index.js @@ -0,0 +1,110 @@ +import React, { useState } from "react"; +import {connect} from 'react-redux'; + +import Button from "../Button"; + +import productImg from "./product-chair.svg"; +import plus from "./plus.svg"; + +const ProductSuggestion = ({ suggestions, isDark }) => { + const [selectedProduct, setSelectedProduct] = useState(null); + + return ( +
+

+ این کالاها برای خرید به شما پیشنهام می دهیم +

+ {/* product design */} +
+ {suggestions.map((suggestion, index) => ( +
+
setSelectedProduct(suggestion)} + > + +

+ {suggestion.productTitle} +

+

+ {suggestion.productPrice} + تومان +

+ {/*
+ انتخاب شما + +
*/} +
+ {Number(index) !== suggestions.length - 1 && ( + + )} +
+ ))} +
+ {/* bottom */} +
+
+

+ جمع لوازم اختیاری خریداری شده + 56/894/400 + تومان +

+ + 1 کالا + +
+

+ در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید +

+
+
+ ); +}; + +const mapStateToProps = (state) => ({ + isDark: state.publicApi.isDark, +}) + +export default connect(mapStateToProps)(ProductSuggestion); + +ProductSuggestion.defaultProps = { + suggestions: [ + { + productImage: productImg, + productTitle: "لپ تاپ گیمینگ ایسوس", + productPrice: "750000", + plusIcon: null, + }, + { + productImage: productImg, + productTitle: "مانیتور 40 اینچ", + productPrice: "3.000.000", + plusIcon: plus, + }, + { + productImage: productImg, + productTitle: "ماوس گیمینگ", + productPrice: "650/000", + plusIcon: plus, + }, + { + productImage: productImg, + productTitle: "لپ تاپ مک بوک پرو 2022", + productPrice: "2000", + plusIcon: plus, + }, + ], +}; diff --git a/src/components/ProductSuggestion/plus.svg b/src/components/ProductSuggestion/plus.svg new file mode 100644 index 0000000..adc93a9 --- /dev/null +++ b/src/components/ProductSuggestion/plus.svg @@ -0,0 +1,3 @@ + + + + diff --git a/src/components/ProductSuggestion/product-chair.svg b/src/components/ProductSuggestion/product-chair.svg new file mode 100644 index 0000000..f5bb26c --- /dev/null +++ b/src/components/ProductSuggestion/product-chair.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ProductTab/index.js b/src/components/ProductTab/index.js new file mode 100644 index 0000000..3e77166 --- /dev/null +++ b/src/components/ProductTab/index.js @@ -0,0 +1,51 @@ +import React, { useState } from "react"; +import Table from "./table"; + +const ProductTab = ({ tabs }) => { + const [selectedTab, setSelectedTab] = useState(tabs[0]); + + return ( +
+
+
    + {tabs.map((tab, index) => ( +
  • setSelectedTab(tab)} + key={index} + > + {tab.title} +
    • + ))} +
+
+
+ {selectedTab?.components} +
+
+ ); +}; + +export default ProductTab; + +ProductTab.defaultProps = { + tabs: [ + { + title: "مشخصات", + components: , + bg: "bg-transparent", + }, + { + title: "پرسش", + components: "نقد و بررسی", + bg: "bg-blue-500", + }, + { + title: "سوال", + components: "پرسش و پاسخ", + bg: "bg-yellow-500", + }, + ], +}; diff --git a/src/components/ProductTab/table/index.js b/src/components/ProductTab/table/index.js new file mode 100644 index 0000000..39fda4a --- /dev/null +++ b/src/components/ProductTab/table/index.js @@ -0,0 +1,47 @@ +import React from "react"; + +const persian = { + weight: "وزن", + pageNumber: "تعداد صفحات", + pageType: "نوع کاغذ", + bookNumber: "شماره شابک", + publisher: "انتشارات", + author: "نویسنده", + bookType: "قطع", + publishedYear: "سال انتشار", +}; + +const Table = ({ specifications }) => { + return ( +
    + {Object.keys(specifications).map((specification, index) => ( +
  • +
    + {persian[specification]} +
    +
    + {specifications[specification]} +
    +
    • + ))} +
+ ); +}; + +export default Table; + +Table.defaultProps = { + specifications: { + weight: "1 کیلوگرم", + pageNumber: "400 صفحه", + pageType: "گلاسه", + bookNumber: "124900985340561870112312499", + publisher: "رزمندگان", + author: "یک نویسنده گمنام", + bookType: "خشتی", + publishedYear: "1399", + }, +}; diff --git a/src/views/Product/Desktop/ProductOverAll/index.js b/src/views/Product/Desktop/ProductOverAll/index.js index 88219ee..88ccb19 100644 --- a/src/views/Product/Desktop/ProductOverAll/index.js +++ b/src/views/Product/Desktop/ProductOverAll/index.js @@ -10,8 +10,11 @@ import Comment from "../../Comment"; import Rate from "../../Rate"; import StarRating from "../../../../components/StarRating"; import AddToCartCard from "../../../../components/AddToCart"; -import logo from '../../../../assets/images/user.png'; -import ProductDescription from "../../../../components/ProductDescription"; +import logo from "../../../../assets/images/user.png"; +import ProductTab from "../../../../components/ProductTab"; +import ProductImages from "../../../../components/ProductImage"; +import ProductStatusCard from "../../../../components/ProductStatusCard"; +import ProductSuggestions from "../../../../components/ProductSuggestion"; export const ProductOverAll = ({ productType, @@ -26,19 +29,11 @@ export const ProductOverAll = ({ }) => { const [type, setType] = useState("physical"); return ( - -
-
- -
-
+
+
+ +
+

{type === "digital" ? book?.product[0]?.name @@ -47,7 +42,7 @@ export const ProductOverAll = ({
{"پایه" + " " + grades[book?.gradeId]}
-
+
@@ -56,191 +51,86 @@ export const ProductOverAll = ({

- -
-
-

نوع کتاب

-

به من کمک کن انتخاب کنم

+
+
+

نوع کتاب

+

+ به من کمک کن انتخاب کنم +

-
+
-
+
-
- - 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' - /> - } - - footer='SendBack' - - /> +
+
-
- - - 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' - /> - } - - // footer='SendBack' - - /> - } - - - /> -
    -
  • - {book?.pagesNum}
    صفحه -
    • -
  • - {"فیزیکی - دیجیتالی"}
    در دسترس -
    • -
  • - {book?.rate}
    امتیاز -
    • -
- -
-
-
-
-

- خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ - ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ - ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ - ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ - ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ - ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ - ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ - ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "} -

-
+ +
- ) -} + ); +}; const mapStateToProps = (state) => ({ book: state.book.info, diff --git a/src/views/Product/Desktop/index.js b/src/views/Product/Desktop/index.js index b797975..2ec6653 100644 --- a/src/views/Product/Desktop/index.js +++ b/src/views/Product/Desktop/index.js @@ -3,7 +3,7 @@ import ProductOverAll from "./ProductOverAll"; const DesktopProductLayout = () =>{ return ( -
+
);