@weareconceptstudio/account 0.0.0 → 0.0.2

package/dist/components/OrderedItems/ReviewPopup/style.js

@@ -0,0 +1,329 @@
+import styled from 'styled-components';
+const ReviewPopupStyle = styled.section `
+	--account_infoWrapMTop: var(--sp3x);
+	--account_bannerImageBorderRadius: var(--sp1-5x);
+	--account_bannerImageMTop: var(--sp4x);
+	--account_bannerImageWidth: 21.1%;
+	--account_proportion: 26.3%;
+	--account_nameMTop: var(--sp2x);
+	--account_lineDistance: var(--sp4x);
+
+	//! Second part sizes
+	--account_popupFieldLabelMBot: var(--sp3x);
+	--account_rateFieldWrapMBot: var(--sp4x);
+	--account_ratioFieldWrapMBot: var(--sp6x);
+	--account_starDistance: var(--sp1x);
+	/* --account_radioIconSize: var(--sp3x);
+	--account_radioDistance: var(--sp4x);
+	--account_radioTextDistance: var(--sp1-5x); */
+	--account_textFieldWrapMTop: var(--sp6x);
+	--account_textFieldLabelMBot: var(--sp1x);
+
+	//! Last part sizes
+	--account_uploaderWrapperMTop: var(--sp4x);
+	--account_popupButtonsMTop: var(--sp4x);
+	--account_btnDistance: var(--sp5x);
+
+	.info-wrap {
+		margin-top: var(--account_infoWrapMTop);
+
+		.info-link {
+			text-decoration: underline;
+			transition: color var(--account_trTime);
+
+			@media (hover: hover) {
+				&:hover {
+					color: var(--account_primaryColor3);
+				}
+			}
+		}
+	}
+
+	.banner-image {
+		overflow: hidden;
+		border-radius: var(--account_bannerImageBorderRadius);
+		margin-top: var(--account_bannerImageMTop);
+		width: var(--account_bannerImageWidth);
+
+		--imagePaddingTop: var(--account_proportion);
+	}
+
+	.name-text {
+		margin-top: var(--account_nameMTop);
+		padding-bottom: var(--account_lineDistance);
+		border-bottom: 1px solid var(--account_primaryColor5);
+	}
+
+	.review-popup-form-container {
+		margin-top: var(--account_lineDistance);
+
+		.ant-rate {
+			font-size: var(--account_h5);
+
+			.ant-rate-star:not(:last-child) {
+				margin-right: var(--account_starDistance);
+			}
+		}
+
+		label {
+			font-weight: 500 !important;
+			margin-bottom: var(--account_popupFieldLabelMBot);
+		}
+
+		.form-item {
+			margin-bottom: var(--account_rateFieldWrapMBot) !important;
+		}
+
+		.rate-field-wrap {
+			margin-bottom: var(--account_rateFieldWrapMBot);
+		}
+
+		.radio-field-wrap {
+			margin-bottom: var(--account_ratioFieldWrapMBot);
+
+			/* .ant-radio {
+				font-size: var(--account_radioIconSize);
+				padding-right: var(--account_radioTextDistance);
+			}
+
+			.ant-radio-wrapper.ant-radio-wrapper-in-form-item input[type='radio'] {
+				width: var(--account_radioIconSize);
+				height: var(--account_radioIconSize);
+			}
+
+			.ant-radio-inner {
+				width: var(--account_radioIconSize);
+				height: var(--account_radioIconSize);
+			}
+
+			span.ant-radio + * {
+				padding-right: 0;
+				padding-left: 0;
+			}
+
+			.ant-radio-wrapper {
+				margin-right: var(--account_radioDistance);
+			} */
+		}
+
+		.text-field-wrap {
+			margin-top: var(--account_textFieldWrapMTop);
+
+			label {
+				margin-bottom: var(--account_textFieldLabelMBot) !important;
+			}
+		}
+	}
+
+	.uploader-wrapper {
+		margin-top: var(--account_uploaderWrapperMTop);
+	}
+
+	.popup-buttons-wrapper {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		margin: 0 calc(-1 * calc(var(--account_btnDistance) / 2));
+		margin-top: var(--account_popupButtonsMTop);
+
+		.btn-wrap {
+			margin: 0 calc(var(--account_btnDistance) / 2);
+		}
+	}
+
+	.ant-radio-group {
+		display: block;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_infoWrapMTop: var(--sp2x);
+		--account_bannerImageBorderRadius: var(--sp1-5x);
+		--account_bannerImageMTop: var(--sp4x);
+		--account_bannerImageWidth: 20.3%;
+		--account_proportion: 25.3%;
+		--account_nameMTop: var(--sp2x);
+		--account_lineDistance: var(--sp4x);
+
+		//! Second part sizes
+		--account_popupFieldLabelMBot: var(--sp3x);
+		--account_rateFieldWrapMBot: var(--sp3x);
+		--account_ratioFieldWrapMBot: var(--sp6x);
+		--account_starDistance: var(--sp1x);
+		/* --account_radioIconSize: var(--sp3x);
+		--account_radioTextDistance: var(--sp1-5x);
+		--account_radioDistance: var(--sp4x); */
+		--account_textFieldLabelMBot: var(--sp1x);
+		--account_textFieldWrapMTop: var(--sp3x);
+
+		//! Last part sizes
+		--account_uploaderWrapperMTop: var(--sp3x);
+		--account_popupButtonsMTop: var(--sp4x);
+		--account_btnDistance: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_infoWrapMTop: var(--sp2x);
+		--account_bannerImageBorderRadius: var(--sp1-5x);
+		--account_bannerImageMTop: var(--sp3x);
+		--account_bannerImageWidth: 21.5%;
+		--account_proportion: 26.8%;
+		--account_nameMTop: var(--sp2x);
+		--account_lineDistance: var(--sp3x);
+
+		//! Second part sizes
+		--account_popupFieldLabelMBot: var(--sp2x);
+		--account_rateFieldWrapMBot: var(--sp3x);
+		--account_ratioFieldWrapMBot: var(--sp4x);
+		--account_starDistance: var(--sp0-5x);
+		/* --account_radioIconSize: var(--sp3x);
+		--account_radioTextDistance: var(--sp1x);
+		--account_radioDistance: var(--sp3x); */
+		--account_textFieldLabelMBot: var(--sp1x);
+		--account_textFieldWrapMTop: var(--sp3x);
+
+		//! Last part sizes
+		--account_uploaderWrapperMTop: var(--sp3x);
+		--account_popupButtonsMTop: var(--sp3x);
+		--account_btnDistance: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_infoWrapMTop: var(--sp2x);
+		--account_bannerImageBorderRadius: var(--sp1-5x);
+		--account_bannerImageMTop: var(--sp3x);
+		--account_bannerImageWidth: 22.5%;
+		--account_proportion: 28%;
+		--account_nameMTop: var(--sp2x);
+		--account_lineDistance: var(--sp3x);
+
+		//! Second part sizes
+		--account_popupFieldLabelMBot: var(--sp1x);
+		--account_rateFieldWrapMBot: var(--sp2-5x);
+		--account_starDistance: var(--sp0-5x);
+		--account_ratioFieldWrapMBot: var(--sp3x);
+		/* --account_radioIconSize: var(--sp3x);
+		--account_radioTextDistance: var(--sp1x);
+		--account_radioDistance: var(--sp3x); */
+		--account_textFieldLabelMBot: var(--sp0-5x);
+		--account_textFieldWrapMTop: var(--sp2-5x);
+
+		//! Last part sizes
+		--account_uploaderWrapperMTop: var(--sp2-5x);
+		--account_popupButtonsMTop: var(--sp3x);
+		--account_btnDistance: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_infoWrapMTop: var(--sp1x);
+		--account_bannerImageBorderRadius: var(--sp1x);
+		--account_bannerImageMTop: var(--sp3x);
+		--account_bannerImageWidth: 21.5%;
+		--account_proportion: 26.7%;
+		--account_nameMTop: var(--sp1-5x);
+		--account_lineDistance: var(--sp2-5x);
+
+		//! Second part sizes
+		--account_popupFieldLabelMBot: var(--sp1x);
+		--account_rateFieldWrapMBot: var(--sp2-5x);
+		--account_starDistance: var(--sp0-5x);
+		--account_ratioFieldWrapMBot: var(--sp3x);
+		/* --account_radioIconSize: var(--sp2-5x);
+		--account_radioTextDistance: var(--sp1x);
+		--account_radioDistance: var(--sp2x); */
+		--account_textFieldLabelMBot: var(--sp0-5x);
+		--account_textFieldWrapMTop: var(--sp2-5x);
+
+		//! Last part sizes
+		--account_uploaderWrapperMTop: var(--sp2-5x);
+		--account_popupButtonsMTop: var(--sp3x);
+		--account_btnDistance: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_infoWrapMTop: var(--sp1x);
+		--account_bannerImageBorderRadius: var(--sp1x);
+		--account_bannerImageMTop: var(--sp3x);
+		--account_bannerImageWidth: 18.7%;
+		--account_proportion: 23.4%;
+		--account_nameMTop: var(--sp1x);
+		--account_lineDistance: var(--sp2-5x);
+
+		//! Second part sizes
+		--account_popupFieldLabelMBot: var(--sp1x);
+		--account_rateFieldWrapMBot: var(--sp2-5x);
+		--account_starDistance: var(--sp0-5x);
+		--account_ratioFieldWrapMBot: var(--sp2-5x);
+		/* --account_radioIconSize: var(--sp2-5x);
+		--account_radioTextDistance: var(--sp1x);
+		--account_radioDistance: var(--sp2x); */
+		--account_textFieldLabelMBot: var(--sp0-5x);
+		--account_textFieldWrapMTop: var(--sp2-5x);
+
+		//! Last part sizes
+		--account_uploaderWrapperMTop: var(--sp2-5x);
+		--account_popupButtonsMTop: var(--sp3x);
+		--account_btnDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_infoWrapMTop: var(--sp1x);
+		--account_bannerImageBorderRadius: var(--sp1x);
+		--account_bannerImageMTop: var(--sp3x);
+		--account_bannerImageWidth: 21.7%;
+		--account_proportion: 27%;
+		--account_nameMTop: var(--sp1x);
+		--account_lineDistance: var(--sp2-5x);
+
+		//! Second part sizes
+		--account_popupFieldLabelMBot: var(--sp1x);
+		--account_rateFieldWrapMBot: var(--sp2-5x);
+		--account_starDistance: var(--sp0-5x);
+		--account_ratioFieldWrapMBot: var(--sp2-5x);
+		/* --account_radioIconSize: var(--sp2-5x);
+		--account_radioTextDistance: var(--sp1x);
+		--account_radioDistance: var(--sp2x); */
+		--account_textFieldLabelMBot: var(--sp0-5x);
+		--account_textFieldWrapMTop: var(--sp2-5x);
+
+		//! Last part sizes
+		--account_uploaderWrapperMTop: var(--sp2-5x);
+		--account_popupButtonsMTop: var(--sp3x);
+		--account_btnDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_infoWrapMTop: var(--sp1x);
+		--account_bannerImageBorderRadius: var(--sp1x);
+		--account_bannerImageMTop: var(--sp2-5x);
+		--account_bannerImageWidth: 28.3%;
+		--account_proportion: 35.3%;
+		--account_nameMTop: var(--sp1x);
+		--account_lineDistance: var(--sp2x);
+
+		//! Second part sizes
+		--account_popupFieldLabelMBot: var(--sp1x);
+		--account_rateFieldWrapMBot: var(--sp2x);
+		--account_starDistance: var(--sp0-5x);
+		--account_ratioFieldWrapMBot: var(--sp2x);
+		/* --account_radioIconSize: var(--sp2-5x);
+		--account_radioTextDistance: var(--sp1x);
+		--account_radioDistance: var(--sp2x); */
+		--account_textFieldLabelMBot: var(--sp0-5x);
+		--account_textFieldWrapMTop: var(--sp2x);
+
+		//! Last part sizes
+		--account_uploaderWrapperMTop: var(--sp2x);
+		--account_popupButtonsMTop: var(--sp2-5x);
+		--account_btnDistance: var(--sp2x);
+
+		.popup-buttons-wrapper {
+			flex-direction: column-reverse;
+
+			.full-width {
+				width: 100%;
+				margin-bottom: var(--account_btnDistance);
+			}
+		}
+	}
+`;
+export default ReviewPopupStyle;

package/dist/components/OrderedItems/index.d.ts

@@ -0,0 +1,7 @@
+export default OrderedItems;
+declare function OrderedItems({ data, status, currency }: {
+    data: any;
+    status: any;
+    currency: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/OrderedItems/index.js

@@ -0,0 +1,108 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import { Image, Text, useTranslation, useUi } from '@weareconceptstudio/core';
+// import SwiperCore, { Navigation } from 'swiper';
+// import { Swiper, SwiperSlide } from 'swiper/react';
+// SwiperCore.use([Navigation]);
+//* Utils
+import { handlePriceCheckFunc } from '../../utils/_functions';
+//* Components
+// import OldEditor from '../OldEditor';
+// import ReviewPopup from './ReviewPopup';
+// import ImagesPopup from '../ImagesPopup';
+import AccountButton from '../AccountButton';
+//* Styles
+// import 'swiper/swiper-bundle.css';
+import OrderedItemsStyle from './style';
+const OrderedItems = ({ data, status, currency }) => {
+    const { translate } = useTranslation();
+    const { winWidth, openPopup } = useUi();
+    const createReview = () => { };
+    const updateReview = () => { };
+    //! State
+    const [items, setItems] = useState(data);
+    //! Handle Review update
+    const addOrUpdateReview = useCallback((id, newValues) => {
+        setItems(items.map((item) => (item.id == id ? { ...item, review: newValues } : item)));
+    }, [items]);
+    //! Review popup
+    // const handleReviewPopup = useCallback(
+    // 	({ orderItemId, product, review }) => {
+    // 		return openPopup(
+    // 			<ReviewPopup
+    // 				review={review}
+    // 				product={product}
+    // 				orderItemId={orderItemId}
+    // 				createReview={createReview}
+    // 				updateReview={updateReview}
+    // 				addOrUpdateReview={addOrUpdateReview}
+    // 			/>,
+    // 			{ className: 'is-review-popup' }
+    // 		);
+    // 	},
+    // 	[addOrUpdateReview]
+    // );
+    //! Store order items
+    const storeOrderedItems = useMemo(() => {
+        return items.map((item, index) => winWidth >= 768 ? (React.createElement("div", { key: index, className: `item-wrap` },
+            React.createElement("div", { className: `item-inner-wrapper` },
+                React.createElement("div", { className: `col-item tl-col-1 col-item-1 first-col` },
+                    React.createElement("div", { className: `image-wrapper` },
+                        React.createElement(Image, { src: item.product?.images[0]?.src, alt: item.product?.images[0]?.alt })),
+                    React.createElement("div", { className: `col-1-right-wrap` },
+                        React.createElement(AccountButton, { url: item.product.url, className: `capitalize`, text: item.product.name, btnType: `green-large-text` }),
+                        React.createElement("div", { className: `right-first-item-wrap` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `color` }),
+                            "\u00A0",
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 capitalize`, text: item.color })),
+                        React.createElement("div", { className: `right-second-item-wrap` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `size` }),
+                            "\u00A0",
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.size })))),
+                React.createElement("div", { className: `col-item tl-col-2` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.quantity })),
+                React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right`, text: handlePriceCheckFunc(item.price, currency) })),
+                React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap price-block` },
+                    React.createElement("div", { className: `col-item-inner-wrap` },
+                        React.createElement("div", { className: `flex-end-wrap` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right`, text: handlePriceCheckFunc(item.total, currency) }))))))) : (React.createElement("div", { key: index, className: `mobile-order-item-wrap` },
+            React.createElement("div", { className: `mobile-order-item-inner-wrap` },
+                React.createElement("div", { className: `mobile-image-wrap` },
+                    React.createElement(Image, { src: item.product?.images[0]?.src, alt: item.product?.images[0]?.alt })),
+                React.createElement("div", { className: `mobile-info-wrap` },
+                    React.createElement(AccountButton, { className: `capitalize`, text: item.product.name, btnType: `green-large-text`, url: `/shop/product/${item.product.url}` }),
+                    React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `color` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 capitalize`, text: item.color })),
+                    React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `size` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.size })),
+                    React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `quantityWithSymbol` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.quantity })),
+                    React.createElement("div", { className: `mobile-price-wrap nowrap` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt`, text: `price` }),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: handlePriceCheckFunc(item.price, currency) })),
+                    React.createElement("div", { className: `mobile-total-price-wrap nowrap` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt`, text: `total` }),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: handlePriceCheckFunc(item.total, currency) })))))));
+    }, [items, currency, winWidth, status]);
+    return (React.createElement(OrderedItemsStyle, { className: `ordered-items-wrapper` },
+        React.createElement(Text, { className: 'account-p account-p1 account-font-bold account-primary-color1 ', text: 'orderItems' }),
+        React.createElement("div", { className: 'line' }),
+        React.createElement("div", { className: `order-items-table-wrap` },
+            React.createElement("div", { className: `titles-wrap` },
+                React.createElement("div", { className: `title-wrap tl-col-1` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap`, text: `item` })),
+                React.createElement("div", { className: `title-wrap tl-col-2` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap`, text: `quantity` })),
+                React.createElement("div", { className: `title-wrap tl-col-3 title-item` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap align-right`, text: `price` })),
+                React.createElement("div", { className: `title-wrap tl-col-4 title-item` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap align-right`, text: `total` }))),
+            React.createElement("div", { className: 'items-wrap' }, storeOrderedItems))));
+};
+export default OrderedItems;

package/dist/components/OrderedItems/style.d.ts

@@ -0,0 +1,2 @@
+export default OrderedItemsStyle;
+declare const OrderedItemsStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;