@weareconceptstudio/account 0.0.0 → 0.0.2

package/dist/components/FormInputCode/style.js

@@ -0,0 +1,109 @@
+import styled from 'styled-components';
+const FormInputCodeStyle = styled.section `
+	--account_inputWrapMTop: var(--sp7x);
+	--account_verifyNumberWrapSize: var(--sp11x);
+	--account_itemDistance: var(--sp3x);
+	--account_borderRadiusSize: var(--sp1-5x);
+
+	width: 100%;
+	margin-top: var(--account_inputWrapMTop);
+
+	input[type='tel' i] {
+		padding: 0 0 !important;
+	}
+
+	.react-code-input-container {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+
+		.input-item {
+			width: var(--account_verifyNumberWrapSize);
+			height: var(--account_verifyNumberWrapSize);
+			font-family: var(--account_Font);
+			font-weight: 700;
+			font-size: var(--account_p1) !important;
+			line-height: var(--account_lineHeight);
+			color: var(--account_primaryColor4);
+			text-align: center;
+			border: 2px solid var(--account_primaryColor4);
+			border-radius: var(--account_borderRadiusSize);
+			margin: 0 calc(var(--account_itemDistance) / 2);
+			background-color: var(--account_backgroundColor);
+
+			&:focus {
+				color: var(--account_primaryColor1);
+				caret-color: var(--account_primaryColor1);
+				border: 2px solid var(--account_primaryColor1);
+			}
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			&.completed {
+				color: var(--account_primaryColor1);
+				caret-color: var(--account_primaryColor1);
+				border: 2px solid var(--account_primaryColor1);
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_inputWrapMTop: var(--sp5x);
+		--account_verifyNumberWrapSize: var(--sp8x);
+		--account_itemDistance: var(--sp2x);
+		--account_borderRadiusSize: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_inputWrapMTop: var(--sp4x);
+		--account_verifyNumberWrapSize: var(--sp7x);
+		--account_itemDistance: var(--sp2x);
+		--account_borderRadiusSize: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_inputWrapMTop: var(--sp4x);
+		--account_verifyNumberWrapSize: var(--sp6x);
+		--account_itemDistance: var(--sp2x);
+		--account_borderRadiusSize: var(--sp0-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_verifyNumberWrapSize: var(--sp6x);
+		--account_itemDistance: var(--sp2x);
+		--account_borderRadiusSize: var(--sp0-5x);
+		--account_inputWrapMTop: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_verifyNumberWrapSize: var(--sp6x);
+		--account_itemDistance: var(--sp2x);
+		--account_inputWrapMTop: var(--sp3x);
+		--account_borderRadiusSize: var(--sp0-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_verifyNumberWrapSize: var(--sp6x);
+		--account_inputWrapMTop: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+		--account_borderRadiusSize: var(--sp0-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_verifyNumberWrapSize: var(--sp6x);
+		--account_itemDistance: var(--sp1-5x);
+		--account_inputWrapMTop: var(--sp3x);
+		--account_borderRadiusSize: var(--sp0-5x);
+
+		@media only screen and (max-width: 398px) {
+			--account_verifyNumberWrapSize: var(--sp5x);
+		}
+	}
+`;
+export default FormInputCodeStyle;

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

@@ -0,0 +1,3 @@
+export default OrderDetails;
+declare const OrderDetails: React.NamedExoticComponent<object>;
+import React from 'react';

package/dist/components/OrderDetails/index.js

@@ -0,0 +1,48 @@
+import React, { memo } from 'react';
+import { Text, useTranslation } from '@weareconceptstudio/core';
+//* Utils
+import { handlePriceCheckFunc, numToLocalString } from '../../utils/_functions';
+//* Style
+import OrderDetailsStyle from './style';
+const OrderDetails = memo(({ className, status, order_date, delivery_date, order_number, total_items, total_price, currency, shippingCost }) => {
+    const { translate } = useTranslation();
+    return (React.createElement(OrderDetailsStyle, { className: `${className || ''}` },
+        React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: 'orderDetails' }),
+        React.createElement("div", { className: `info-space-line` }),
+        React.createElement("div", { className: `order-detail-item-wrap` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+                translate('orderStatus'),
+                ":"),
+            status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item value`, text: 'delivered' })) : status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item value`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item value`, text: 'inProgress' }))),
+        React.createElement("div", { className: `order-detail-item-wrap` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+                translate('orderDate'),
+                ":"),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: order_date })),
+        React.createElement("div", { className: `order-detail-item-wrap` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+                translate('deliverDate'),
+                ":"),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: delivery_date })),
+        React.createElement("div", { className: `order-detail-item-wrap` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+                translate('orderNumber'),
+                ":"),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: order_number })),
+        React.createElement("div", { className: `order-detail-item-wrap` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+                translate('totalItems'),
+                ":"),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: total_items })),
+        React.createElement("div", { className: `order-detail-item-wrap` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+                translate('shippingCost'),
+                ":"),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: `${String(shippingCost).toLowerCase() === 'free' || shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
+        React.createElement("div", { className: `order-detail-item-wrap` },
+            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
+                translate('totalPrice'),
+                ":"),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value` }, handlePriceCheckFunc(total_price, currency)))));
+});
+export default OrderDetails;

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

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

package/dist/components/OrderDetails/style.js

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+const OrderDetailsStyle = styled.section `
+	--account_spaceLineMTop: var(--sp3x);
+	--account_spaceLineMBot: var(--sp5x);
+	--account_statusItemPadTB: var(--sp1x);
+	--account_statusItemPadLR: var(--sp2-5x);
+	--account_orderDetailItemWrapMTop: var(--sp2x);
+
+	.info-space-line {
+		width: 100%;
+		border-bottom: 2px solid var(--account_primaryColor1);
+		margin-top: var(--account_spaceLineMTop);
+		margin-bottom: var(--account_spaceLineMBot);
+	}
+
+	.order-detail-item-wrap {
+		display: flex;
+		align-items: center;
+
+		.status-item {
+			padding: var(--account_statusItemPadTB) var(--account_statusItemPadLR);
+			border-radius: var(--sp5x);
+		}
+
+		.value {
+			margin-left: var(--sp1x);
+		}
+
+		&:not(:first-child) {
+			margin-top: var(--account_orderDetailItemWrapMTop);
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp4x);
+		--account_statusItemPadTB: var(--sp1x);
+		--account_statusItemPadLR: var(--sp2x);
+		--account_orderDetailItemWrapMTop: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp4x);
+		--account_statusItemPadTB: var(--sp1x);
+		--account_statusItemPadLR: var(--sp2x);
+		--account_orderDetailItemWrapMTop: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp3x);
+		--account_statusItemPadTB: var(--sp1x);
+		--account_statusItemPadLR: var(--sp2x);
+		--account_orderDetailItemWrapMTop: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp3x);
+		--account_statusItemPadTB: var(--sp0-5x);
+		--account_statusItemPadLR: var(--sp1x);
+		--account_orderDetailItemWrapMTop: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp3x);
+		--account_statusItemPadTB: var(--sp0-5x);
+		--account_statusItemPadLR: var(--sp1x);
+		--account_orderDetailItemWrapMTop: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp2x);
+		--account_statusItemPadTB: var(--sp0-5x);
+		--account_statusItemPadLR: var(--sp1x);
+		--account_orderDetailItemWrapMTop: var(--sp1x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_spaceLineMTop: var(--sp2x);
+		--account_spaceLineMBot: var(--sp2x);
+		--account_statusItemPadTB: var(--sp0-5x);
+		--account_statusItemPadLR: var(--sp1x);
+		--account_orderDetailItemWrapMTop: var(--sp1x);
+	}
+`;
+export default OrderDetailsStyle;

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

@@ -0,0 +1,202 @@
+// import { memo, useCallback, useMemo, useRef } from 'react';
+// import { Form, Input, Radio } from '@weareconceptstudio/form';
+// //* Contexts
+// import withUIContext from '@/account-authentication/contexts/consumers/UIConsumer';
+// import withLanguageContext from '@/account-authentication/contexts/consumers/LanguageConsumer';
+// //* Helpers
+// import _config from '@/account-authentication/helpers/_config';
+// import { fileToUploadObj } from '@/account-authentication/helpers/_functions';
+// //* Components
+// import Text from '../../Text';
+// import Rate from '../../Rate';
+// import Icon from '../../Icon';
+// import Image from '../../Image';
+// import FormUpload from '../../FormUpload';
+// import CustomLink from '../../CustomLink';
+// import AccountButton from '../../AccountButton';
+// import WarningMessageForPopup from '../../WarningMessageForPopup';
+// //* Style
+// import ReviewPopupStyle from './style';
+// //TODO: Form (ref -> logic), Upload, Radio
+// const ReviewPopup = memo(({ className, orderItemId, product, review, createReview, updateReview, addOrUpdateReview, translate, closePopup, winWidth, openPopup }) => {
+// 	//! Ref
+// 	const form = useRef();
+// 	//! Handle Finish Function
+// 	const onFinish = useCallback(
+// 		(values) => {
+// 			let newValues = {
+// 				...values,
+// 				order_item_id: orderItemId,
+// 				product_id: product.id,
+// 			};
+// 			return (review ? updateReview(review.id, newValues) : createReview(newValues)).then(({ data }) => {
+// 				addOrUpdateReview(orderItemId, data);
+// 				closePopup();
+// 				!review &&
+// 					openPopup(
+// 						<WarningMessageForPopup
+// 							isThankYou
+// 							title={'thankYouPopupTitle'}
+// 							description={'thankYouPopupDesc'}
+// 						/>,
+// 						{ className: 'messagePopup' }
+// 					);
+// 			});
+// 		},
+// 		[orderItemId, product, review]
+// 	);
+// 	const initialValues = useMemo(() => {
+// 		return review
+// 			? {
+// 					...review,
+// 					is_recommended: review.is_recommended || '0',
+// 					images: review.images.map((item) => fileToUploadObj(item)),
+// 			  }
+// 			: {
+// 					is_recommended: 1,
+// 			  };
+// 	}, [review]);
+// 	return (
+// 		<ReviewPopupStyle className={`review-popup-wrapper ${className || ''}`}>
+// 			<Text
+// 				tag={`h6`}
+// 				className={`account-h6 account-font-bold account-primary-color1`}
+// 				text={`writeYourReview`}
+// 			/>
+// 			<div className={`info-wrap`}>
+// 				{!(winWidth <= 768) ? (
+// 					<>
+// 						<Text className={`account-p account-p3 account-font-regular account-primary-color1`}>
+// 							{translate('writeYourReviewDesc1')}&nbsp;
+// 							<CustomLink
+// 								className={`info-link`}
+// 								onClick={() => closePopup()}
+// 								url={_config.routes.productReviewGuidelines.path}
+// 								content={translate('reviewGuidelinesWithSymbol')}
+// 							/>
+// 						</Text>
+// 						<Text className={`account-p account-p3 account-font-regular account-primary-color1`}>
+// 							{translate('writeYourReviewDesc2')}&nbsp;
+// 							<CustomLink
+// 								className={`info-link`}
+// 								onClick={() => closePopup()}
+// 								url={_config.routes.contactUs.path}
+// 								content={translate('contactUsWithSymbol')}
+// 							/>
+// 						</Text>
+// 					</>
+// 				) : (
+// 					<Text className={`account-p account-p3 account-font-regular account-primary-color1`}>
+// 						{translate('writeYourReviewDesc1')}&nbsp;
+// 						<CustomLink
+// 							className={`info-link`}
+// 							onClick={() => closePopup()}
+// 							url={_config.routes.productReviewGuidelines.path}
+// 							content={translate('reviewGuidelinesWithSymbol')}
+// 						/>
+// 						&nbsp;{translate('writeYourReviewDesc2')}&nbsp;
+// 						<CustomLink
+// 							className={`info-link`}
+// 							onClick={() => closePopup()}
+// 							url={_config.routes.contactUs.path}
+// 							content={translate('contactUsWithSymbol')}
+// 						/>
+// 					</Text>
+// 				)}
+// 			</div>
+// 			<Image
+// 				src={product.images?.[0]?.src}
+// 				alt={product.images?.[0]?.alt}
+// 				className={`banner-image`}
+// 			/>
+// 			<div className={`name-text`}>
+// 				<AccountButton
+// 					url={product.url}
+// 					target={`_blank`}
+// 					text={product.name}
+// 					btnType={`green-small-text`}
+// 					customLinkProps={{
+// 						rel: 'noopener noreferrer',
+// 					}}
+// 				/>
+// 			</div>
+// 			<div className='review-popup-form-container'>
+// 				<Form
+// 					ref={form}
+// 					onSubmit={onFinish}
+// 					initialValues={initialValues}>
+// 					<Form.Item
+// 						name={'rating'}
+// 						className={`rate-field-wrap`}
+// 						label={'yourOverallRating'}
+// 						>
+// 						<Rate />
+// 					</Form.Item>
+// 					<Form.Item
+// 						name={'is_recommended'}
+// 						className={`radio-field-wrap`}
+// 						label={'wouldYouRecommend'}
+// 						>
+// 						<Radio.Group>
+// 							<Radio value={1}>
+// 								<div className={`icon-circle-wrapper distance`}>
+// 									<Icon name={`checkbox`} />
+// 								</div>
+// 								<Text
+// 									className={`account-p account-p3 account-font-medium account-primary-color1`}
+// 									text={`yes`}
+// 								/>
+// 							</Radio>
+// 							<Radio value={`${0}`}>
+// 								<div className={`icon-circle-wrapper distance`}>
+// 									<Icon name={`checkbox`} />
+// 								</div>
+// 								<Text
+// 									className={`account-p account-p3 account-font-medium account-primary-color1`}
+// 									text={`no`}
+// 								/>
+// 							</Radio>
+// 						</Radio.Group>
+// 					</Form.Item>
+// 					<Form.Item
+// 						name={'title'}
+// 						className={`text-field-wrap`}
+// 						label={'reviewTitle'}
+// 						>
+// 						<Input placeholder={'type'} />
+// 					</Form.Item>
+// 					<Form.Item
+// 						name={'content'}
+// 						className={`text-field-wrap`}
+// 						label={'yourReview'}
+// 						>
+// 						<Input.TextArea placeholder={'type'} />
+// 					</Form.Item>
+// 					<div className={`uploader-wrapper`}>
+// 						<FormUpload
+// 							multiple
+// 							form={form}
+// 							maxCount={6}
+// 							name={'images'}
+// 							translate={translate}
+// 							defaultFiles={review ? review.images : []}
+// 						/>
+// 					</div>
+// 					<div className={`popup-buttons-wrapper`}>
+// 						<AccountButton
+// 							text={`cancel`}
+// 							btnType={`green-large-text`}
+// 							onClick={() => closePopup()}
+// 						/>
+// 						<AccountButton
+// 							type={'submit'}
+// 							text={`submitReview`}
+// 							btnType={`full-width`}
+// 						/>
+// 					</div>
+// 				</Form>
+// 			</div>
+// 		</ReviewPopupStyle>
+// 	);
+// });
+// export default withLanguageContext(withUIContext(ReviewPopup, ['closePopup', 'winWidth', 'openPopup']), ['translate']);

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

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