@weareconceptstudio/account 0.0.0 → 0.0.1

package/dist/components/OrdersList/OrderItem/index.d.ts

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

package/dist/components/OrdersList/OrderItem/index.js

@@ -0,0 +1,21 @@
+import React, { memo as Memo } from 'react';
+import { Text } from '@weareconceptstudio/core';
+//* Utils
+import { handlePriceCheckFunc } from '../../../utils/_functions';
+//* Components
+import AccountButton from '../../AccountButton';
+const OrderItem = Memo(({ data }) => {
+    return (React.createElement("div", { className: `order-table-item-wrap` },
+        React.createElement("div", { className: `col-item od-col-1 nowrap` },
+            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: data.order_date })),
+        React.createElement("div", { className: `col-item od-col-2` },
+            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: data.total_items })),
+        React.createElement("div", { className: `col-item od-col-3 nowrap` },
+            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: `ID ${data.order_number}` })),
+        React.createElement("div", { className: `col-item od-col-4 nowrap` }, data.status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item`, text: 'delivered' })) : data.status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item`, text: 'inProgress' }))),
+        React.createElement("div", { className: `col-item od-col-5 nowrap` },
+            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: handlePriceCheckFunc(data.total_price, data.currency) })),
+        React.createElement("div", { className: `col-item od-col-6 nowrap` },
+            React.createElement(AccountButton, { text: 'viewOrder', btnType: `green-small-text`, url: `/account/order-history/${data.id}` }))));
+});
+export default OrderItem;

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

@@ -0,0 +1,10 @@
+export default OrdersList;
+declare function OrdersList({ data, total, pageSize, router, pathname, searchParams }: {
+    data: any;
+    total: any;
+    pageSize: any;
+    router: any;
+    pathname: any;
+    searchParams: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/OrdersList/index.js

@@ -0,0 +1,68 @@
+import React, { useMemo, useCallback } from 'react';
+import { createQueryString, Text, useTranslation, useUi } from '@weareconceptstudio/core';
+//* Utils
+import { handlePriceCheckFunc } from '../../utils/_functions';
+//* Components
+import OrderItem from './OrderItem';
+import Pagination from '../Pagination';
+import AccountButton from '../AccountButton';
+//* Style
+import OrdersListStyle from './style';
+const OrdersList = ({ data, total, pageSize, router, pathname, searchParams }) => {
+    const { translate } = useTranslation();
+    const { winWidth } = useUi();
+    const onFilterChange = useCallback((type, typeId, multiple = false) => {
+        const params = createQueryString({ searchParams, type, typeId, multiple });
+        if (type === 'page') {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        router.push(pathname + '?' + params, { scroll: false });
+    }, [searchParams]);
+    //! List Store
+    const listStore = useMemo(() => {
+        return winWidth >= 768 ? (React.createElement("div", { className: `order-table-wrap` },
+            React.createElement("div", { className: `order-table-titles-wrap` },
+                React.createElement("div", { className: `order-table-title-wrap od-col-1` },
+                    React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 nowrap`, text: `orderDate` })),
+                React.createElement("div", { className: `order-table-title-wrap od-col-2` },
+                    React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 nowrap`, text: `totalItems` })),
+                React.createElement("div", { className: `order-table-title-wrap od-col-3` },
+                    React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 nowrap`, text: `orderNumber` })),
+                React.createElement("div", { className: `order-table-title-wrap od-col-4` },
+                    React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 nowrap`, text: `orderStatus` })),
+                React.createElement("div", { className: `order-table-title-wrap od-col-5` },
+                    React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 nowrap align-right`, text: `totalPrice` })),
+                React.createElement("div", { className: `order-table-title-wrap od-col-6` })),
+            React.createElement("div", { className: `order-table-items-wrap` }, data.map((item, index) => {
+                return (React.createElement(OrderItem, { key: index, data: item }));
+            })))) : (React.createElement("div", { className: `mobile-orders-wrap` }, data.map((item, index) => {
+            return (React.createElement("div", { key: index, className: `mobile-order-item-wrap` },
+                React.createElement("div", { className: `first-col-wrap` },
+                    React.createElement("div", { className: `left-wrap` },
+                        React.createElement("div", { className: `left-item-wrap` },
+                            React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('orderDate')}:` }),
+                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: item.order_date })),
+                        React.createElement("div", { className: `left-item-wrap last` },
+                            React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('orderNumber')}:` }),
+                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: `ID ${item.order_number}` }))),
+                    React.createElement("div", { className: `right-wrap` }, item.status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item`, text: 'delivered' })) : item.status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item`, text: 'inProgress' })))),
+                React.createElement("div", { className: `last-col-wrap` },
+                    React.createElement("div", { className: `left-wrap` },
+                        React.createElement("div", { className: `left-item-wrap` },
+                            React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('totalItems')}:` }),
+                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: item.total_items })),
+                        React.createElement("div", { className: `left-item-wrap last` },
+                            React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('totalPrice')}:` }),
+                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: handlePriceCheckFunc(item.total_price, item.currency) }))),
+                    React.createElement("div", { className: `right-wrap` },
+                        React.createElement(AccountButton, { text: 'viewOrder', btnType: `green-small-text`, url: `/account/order-history${item.id}` })))));
+        })));
+    }, [winWidth, data]);
+    return (React.createElement(OrdersListStyle, null,
+        React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: 'orderHistory' }),
+        React.createElement("div", { className: `order-history-line` }),
+        listStore,
+        React.createElement("div", { className: `pagination-wrap` },
+            React.createElement(Pagination, { total: total, pageSize: pageSize, onChange: (page) => onFilterChange('page', page) }))));
+};
+export default OrdersList;

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

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

package/dist/components/OrdersList/style.js

@@ -0,0 +1,373 @@
+import styled from 'styled-components';
+const OrdersListStyle = styled.section `
+	--account_lineMTop: var(--sp3x);
+	--account_lineMBot: var(--sp5x);
+
+	--account_tableTitlesPBot: var(--sp4x);
+
+	//! Order item styles
+	--account_orderItemPadTB: var(--sp5x);
+
+	//! Coll distance
+	--account_collDistance_1: var(--sp14x);
+	--account_collDistance_2: var(--sp14x);
+	--account_collDistance_3: var(--sp14x);
+	--account_collDistance_4: var(--sp18x);
+	--account_collDistance_5: var(--sp29x);
+
+	//! Coll width
+	--account_orderDateWidth: 15.7%;
+	--account_totalItemsWidth: 12.5%;
+	--account_orderNumberWidth: 14.4%;
+	--account_orderStatusWidth: 15.4%;
+	--account_totalPriceWidth: 22.5%;
+	--account_emptyWidth: calc(100% - var(--account_orderDateWidth) - var(--account_totalItemsWidth) - var(--account_orderNumberWidth) - var(--account_orderStatusWidth) - var(--account_totalPriceWidth));
+
+	//! Status sizes
+	--account_statusBorderRad: var(--sp5x);
+	--account_statusPadTB: var(--sp1x);
+	--account_statusPadLR: var(--sp2-5x);
+
+	--account_paginationWrapMTop: var(--sp11x);
+
+	.order-history-line {
+		width: 100%;
+		border-bottom: 2px solid var(--account_primaryColor1);
+		margin-top: var(--account_lineMTop);
+		margin-bottom: var(--account_lineMBot);
+	}
+
+	.order-table-wrap {
+		overflow: hidden;
+
+		.order-table-titles-wrap {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			padding-bottom: var(--account_tableTitlesPBot);
+			border-bottom: 2px solid var(--account_primaryColor5);
+			margin-left: calc(-1 * calc(var(--account_collDistance_1) / 2));
+			margin-right: calc(-1 * calc(var(--account_collDistance_5) / 2));
+		}
+	}
+
+	.order-table-items-wrap {
+		.order-table-item-wrap {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			margin-left: calc(-1 * calc(var(--account_collDistance_1) / 2));
+			margin-right: calc(-1 * calc(var(--account_collDistance_5) / 2));
+			padding: var(--account_orderItemPadTB) 0;
+			border-bottom: 2px solid var(--account_primaryColor5);
+		}
+	}
+
+	.od-col-1 {
+		width: var(--account_orderDateWidth);
+		padding-left: calc(var(--account_collDistance_1) / 2);
+		padding-right: calc(var(--account_collDistance_1) / 2);
+	}
+
+	.od-col-2 {
+		width: var(--account_totalItemsWidth);
+		padding-left: calc(var(--account_collDistance_1) / 2);
+		padding-right: calc(var(--account_collDistance_2) / 2);
+	}
+
+	.od-col-3 {
+		width: var(--account_orderNumberWidth);
+		padding-left: calc(var(--account_collDistance_2) / 2);
+		padding-right: calc(var(--account_collDistance_3) / 2);
+	}
+
+	.od-col-4 {
+		width: var(--account_orderStatusWidth);
+		padding-left: calc(var(--account_collDistance_3) / 2);
+		padding-right: calc(var(--account_collDistance_4) / 2);
+
+		.status-item {
+			width: fit-content;
+			padding: var(--account_statusPadTB) var(--account_statusPadLR);
+			border-radius: var(--account_statusBorderRad);
+		}
+	}
+
+	.od-col-5 {
+		width: var(--account_totalPriceWidth);
+		padding-left: calc(var(--account_collDistance_4) / 2);
+		padding-right: calc(var(--account_collDistance_5) / 2);
+		text-align: right;
+	}
+
+	.od-col-6 {
+		width: var(--account_emptyWidth);
+		padding-left: calc(var(--account_collDistance_5) / 2);
+		padding-right: calc(var(--account_collDistance_5) / 2);
+
+		.btn-wrap {
+			display: flex;
+			justify-content: flex-end;
+
+			a {
+				font-size: var(--account_p4);
+			}
+		}
+	}
+
+	//! Pagination Wrap
+	.pagination-wrap {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		margin-top: var(--account_paginationWrapMTop);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBot: var(--sp4x);
+
+		--account_tableTitlesPBot: var(--sp3x);
+
+		//! Coll distance
+		--account_collDistance_1: var(--sp9x);
+		--account_collDistance_2: var(--sp10x);
+		--account_collDistance_3: var(--sp13x);
+		--account_collDistance_4: var(--sp13x);
+		--account_collDistance_5: var(--sp16x);
+
+		//! Coll width
+		--account_orderDateWidth: 16%;
+		--account_totalItemsWidth: 12.7%;
+		--account_orderNumberWidth: 16%;
+		--account_orderStatusWidth: 16.7%;
+		--account_totalPriceWidth: 22%;
+
+		//! Order item styles
+		--account_orderItemPadTB: var(--sp4x);
+
+		//! Status sizes
+		--account_statusBorderRad: var(--sp5x);
+		--account_statusPadTB: var(--sp1x);
+		--account_statusPadLR: var(--sp2x);
+
+		--account_paginationWrapMTop: var(--sp6x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBot: var(--sp4x);
+
+		--account_tableTitlesPBot: var(--sp3x);
+
+		//! Coll distance
+		--account_collDistance_1: var(--sp4x);
+		--account_collDistance_2: var(--sp6x);
+		--account_collDistance_3: var(--sp8x);
+		--account_collDistance_4: var(--sp7x);
+		--account_collDistance_5: var(--sp11x);
+
+		//! Coll width
+		--account_orderDateWidth: 16.3%;
+		--account_totalItemsWidth: 12.5%;
+		--account_orderNumberWidth: 16.8%;
+		--account_orderStatusWidth: 16.7%;
+		--account_totalPriceWidth: 20.4%;
+
+		//! Order item styles
+		--account_orderItemPadTB: var(--sp4x);
+
+		//! Status sizes
+		--account_statusBorderRad: var(--sp5x);
+		--account_statusPadTB: var(--sp1x);
+		--account_statusPadLR: var(--sp2x);
+
+		--account_paginationWrapMTop: var(--sp6x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBot: var(--sp4x);
+
+		--account_tableTitlesPBot: var(--sp3x);
+
+		//! Coll distance
+		--account_collDistance_1: var(--sp7x);
+		--account_collDistance_2: var(--sp5x);
+		--account_collDistance_3: var(--sp5x);
+		--account_collDistance_4: var(--sp7x);
+		--account_collDistance_5: var(--sp7x);
+
+		//! Coll width
+		--account_orderDateWidth: 19.7%;
+		--account_totalItemsWidth: 14.1%;
+		--account_orderNumberWidth: 15.8%;
+		--account_orderStatusWidth: 16%;
+		--account_totalPriceWidth: 19.7%;
+
+		//! Order item styles
+		--account_orderItemPadTB: var(--sp4x);
+
+		//! Status sizes
+		--account_statusBorderRad: var(--sp5x);
+		--account_statusPadTB: var(--sp1x);
+		--account_statusPadLR: var(--sp2x);
+
+		--account_paginationWrapMTop: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBot: var(--sp3x);
+
+		--account_tableTitlesPBot: var(--sp2x);
+
+		//! Order item styles
+		--account_orderItemPadTB: var(--sp3x);
+
+		//! Coll distance
+		--account_collDistance_1: var(--sp5x);
+		--account_collDistance_2: var(--sp5x);
+		--account_collDistance_3: var(--sp8x);
+		--account_collDistance_4: var(--sp6x);
+		--account_collDistance_5: var(--sp7x);
+
+		//! Coll width
+		--account_orderDateWidth: 17.9%;
+		--account_totalItemsWidth: 13.5%;
+		--account_orderNumberWidth: 17.3%;
+		--account_orderStatusWidth: 16.3%;
+		--account_totalPriceWidth: 19.5%;
+
+		//! Status sizes
+		--account_statusBorderRad: var(--sp5x);
+		--account_statusPadTB: var(--sp0-5x);
+		--account_statusPadLR: var(--sp1x);
+
+		--account_paginationWrapMTop: 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_lineMTop: var(--sp2x);
+		--account_lineMBot: var(--sp2-5x);
+
+		--account_tableTitlesPBot: var(--sp2x);
+
+		//! Order item styles
+		--account_orderItemPadTB: var(--sp3x);
+
+		//! Coll distance
+		--account_collDistance_1: var(--sp5x);
+		--account_collDistance_2: var(--sp3x);
+		--account_collDistance_3: var(--sp5x);
+		--account_collDistance_4: var(--sp5x);
+		--account_collDistance_5: var(--sp4x);
+
+		//! Coll width
+		--account_orderDateWidth: 20.1%;
+		--account_totalItemsWidth: 13.8%;
+		--account_orderNumberWidth: 16.6%;
+		--account_orderStatusWidth: 16.3%;
+		--account_totalPriceWidth: 19.7%;
+
+		//! Status sizes
+		--account_statusBorderRad: var(--sp5x);
+		--account_statusPadTB: var(--sp0-5x);
+		--account_statusPadLR: var(--sp1x);
+
+		--account_paginationWrapMTop: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBot: var(--sp2-5x);
+
+		--account_tableTitlesPBot: var(--sp2x);
+
+		//! Order item styles
+		--account_orderItemPadTB: var(--sp3x);
+
+		//! Coll distance
+		--account_collDistance_1: var(--sp4x);
+		--account_collDistance_2: var(--sp3x);
+		--account_collDistance_3: var(--sp5x);
+		--account_collDistance_4: var(--sp5x);
+		--account_collDistance_5: var(--sp4x);
+
+		//! Coll width
+		--account_orderDateWidth: 19.6%;
+		--account_totalItemsWidth: 13.6%;
+		--account_orderNumberWidth: 16.9%;
+		--account_orderStatusWidth: 16.6%;
+		--account_totalPriceWidth: 19.7%;
+
+		//! Status sizes
+		--account_statusBorderRad: var(--sp5x);
+		--account_statusPadTB: var(--sp0-5x);
+		--account_statusPadLR: var(--sp1x);
+
+		--account_paginationWrapMTop: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_lineMTop: var(--sp2x);
+		--account_lineMBot: var(--sp3x);
+
+		--account_paginationWrapMTop: var(--sp3x);
+
+		.mobile-orders-wrap {
+			.mobile-order-item-wrap {
+				padding-bottom: var(--sp3x);
+				border-bottom: 2px solid var(--account_primaryColor5);
+
+				.first-col-wrap,
+				.last-col-wrap {
+					display: flex;
+					justify-content: space-between;
+				}
+
+				.last-col-wrap {
+					margin-top: var(--sp6x);
+					align-items: end;
+				}
+
+				.left-wrap {
+					display: flex;
+					flex-direction: column;
+				}
+
+				.right-wrap {
+					height: 100%;
+
+					.btn-wrap {
+						a {
+							font-size: var(--account_p4);
+						}
+					}
+				}
+
+				.left-item-wrap {
+					display: flex;
+				}
+
+				&:not(:first-child) {
+					padding-top: var(--sp3x);
+				}
+
+				.status-item {
+					padding: var(--sp0-5x) var(--sp1x);
+					border-radius: var(--sp5x);
+				}
+
+				.last {
+					margin-top: var(--sp0-5x);
+				}
+
+				.value {
+					margin-left: var(--sp1x);
+				}
+			}
+		}
+	}
+`;
+export default OrdersListStyle;

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

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

package/dist/components/Pagination/index.js

@@ -0,0 +1,18 @@
+import React, { memo, useMemo } from 'react';
+//* Icons
+const left_arrow = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', version: '1.1', viewBox: '0 0 32 32' },
+    React.createElement("path", { d: 'M24.015 31.254c0.261 0.001 0.519-0.057 0.756-0.167s0.446-0.272 0.613-0.473c0.15-0.18 0.262-0.387 0.332-0.61s0.094-0.458 0.073-0.691c-0.021-0.233-0.089-0.459-0.198-0.666s-0.258-0.39-0.438-0.539l-14.382-11.876 14.222-12.284c0.185-0.15 0.337-0.336 0.448-0.547s0.179-0.441 0.2-0.678c0.021-0.237-0.007-0.476-0.080-0.703s-0.192-0.436-0.348-0.616c-0.156-0.18-0.346-0.327-0.56-0.431s-0.446-0.166-0.684-0.179-0.476 0.022-0.7 0.102c-0.224 0.081-0.43 0.205-0.605 0.367l-15.84 13.653c-0.197 0.169-0.355 0.379-0.463 0.615s-0.162 0.494-0.159 0.753c0.004 0.26 0.065 0.515 0.179 0.748s0.277 0.439 0.479 0.603l16 13.209c0.32 0.278 0.733 0.424 1.156 0.409z' })));
+const right_arrow = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', version: '1.1', viewBox: '0 0 32 32' },
+    React.createElement("path", { d: 'M7.982 31.254c-0.261 0.001-0.519-0.057-0.756-0.167s-0.446-0.272-0.613-0.473c-0.15-0.18-0.262-0.387-0.332-0.61s-0.094-0.458-0.073-0.691c0.021-0.233 0.089-0.459 0.198-0.666s0.258-0.39 0.438-0.539l14.382-11.876-14.222-12.284c-0.185-0.15-0.337-0.336-0.448-0.547s-0.179-0.441-0.2-0.678c-0.021-0.237 0.007-0.476 0.080-0.703s0.192-0.436 0.348-0.616c0.156-0.18 0.347-0.327 0.56-0.431s0.446-0.166 0.684-0.179c0.238-0.013 0.476 0.022 0.7 0.102s0.43 0.205 0.605 0.367l15.84 13.653c0.198 0.169 0.356 0.379 0.463 0.615s0.162 0.494 0.159 0.753c-0.004 0.26-0.065 0.515-0.179 0.748s-0.277 0.439-0.479 0.603l-16 13.209c-0.319 0.278-0.732 0.424-1.156 0.409z' })));
+//* Style
+import PaginationStyle from './style';
+import { getParamsByKey } from '@weareconceptstudio/core';
+const Pagination = memo(({ total, pageSize, onChange, activePageState, left_icon = false, right_icon = false }) => {
+    const maxPage = useMemo(() => Math.ceil(total / pageSize), [total, pageSize]);
+    const activePage = useMemo(() => Number(getParamsByKey(new URLSearchParams(window.location.search), 'page')) || activePageState || 1, [window.location.search, activePageState]);
+    return (total > pageSize && (React.createElement(PaginationStyle, { className: `pg-container account-primary-color1` },
+        React.createElement("div", { className: `pg-icon ${activePage === 1 ? 'disabled-icon' : ''}`, onClick: () => activePage > 1 && onChange(activePage - 1 >= 1 ? activePage - 1 : activePage) }, left_icon || left_arrow),
+        React.createElement("span", { className: `pg-numbers account-p account-p4 account-font-bold` }, `${activePage} / ${maxPage}`),
+        React.createElement("div", { onClick: () => activePage < maxPage && onChange(activePage + 1), className: `pg-icon ${activePage === maxPage ? 'disabled-icon' : ''}` }, right_icon || right_arrow))));
+});
+export default Pagination;

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

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

package/dist/components/Pagination/style.js

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+const PaginationStyle = styled.div `
+	--account_pgNumbersMarginH: var(--sp4x);
+	--account_iconSize: var(--sp2-5x);
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.pg-icon {
+		cursor: pointer;
+
+		&.disabled-icon {
+			color: var(--account_primaryColor6);
+			pointer-events: none;
+			cursor: none;
+
+			svg {
+				fill: var(--account_primaryColor6);
+				pointer-events: none;
+				cursor: none;
+			}
+		}
+	}
+
+	.pg-numbers {
+		margin: 0 var(--account_pgNumbersMarginH);
+	}
+
+	svg {
+		width: var(--account_iconSize);
+		height: var(--account_iconSize);
+		fill: var(--account_primaryColor1);
+		line-height: 1;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_pgNumbersMarginH: var(--sp3x);
+		--account_iconSize: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_pgNumbersMarginH: var(--sp3x);
+		--account_iconSize: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_pgNumbersMarginH: var(--sp3x);
+		--account_iconSize: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_pgNumbersMarginH: var(--sp3x);
+		--account_iconSize: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_pgNumbersMarginH: var(--sp3x);
+		--account_iconSize: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_pgNumbersMarginH: var(--sp3x);
+		--account_iconSize: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_pgNumbersMarginH: var(--sp3x);
+		--account_iconSize: var(--sp1-5x);
+	}
+`;
+export default PaginationStyle;

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

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

package/dist/components/SelectShippingBilling/index.js

@@ -0,0 +1,31 @@
+import React, { memo as Memo, useState, useCallback } from 'react';
+import { Text, useUi } from '@weareconceptstudio/core';
+//* Components
+import AddressItem from '../AddressItem';
+import AccountButton from '../AccountButton';
+//* Style
+import SelectShippingBillingStyle from './style';
+//TODO: getCart
+const getCart = () => { };
+const SelectShippingBilling = Memo(({ data, title, handleClick, type, setSelectedAddresses, selectedAddresses }) => {
+    const { closePopup } = useUi();
+    //! State
+    const [checkedId, setCheckedId] = useState(selectedAddresses?.[type]?.id);
+    const handleAddressChangeSubmit = useCallback(() => {
+        let findItem = data.find((item) => item.id === checkedId);
+        setSelectedAddresses({ ...selectedAddresses, [findItem?.type]: { ...findItem } });
+        getCart({ addressId: checkedId });
+        closePopup();
+    }, [data, selectedAddresses, checkedId]);
+    return (React.createElement(SelectShippingBillingStyle, null,
+        React.createElement("div", { className: `select-address-wrap` },
+            React.createElement(Text, { tag: `h6`, className: `account-h6 account-font-bold account-primary-color1`, text: title }),
+            React.createElement(AccountButton, { onClick: handleClick, text: `addNewAdd`, btnType: `purple-text` })),
+        data?.length > 0 ? (React.createElement("div", { className: `flex-wrapper` }, data.map((item, index) => {
+            return (React.createElement(AddressItem, { id: item.id, type: type, data: item, key: index, select_address: true, checkedId: checkedId, checkout_review: false, setCheckedId: setCheckedId }));
+        }))) : null,
+        React.createElement("div", { className: `cancel-and-save-wrap` },
+            React.createElement(AccountButton, { btnType: `green-large-text`, text: `cancel`, onClick: closePopup }),
+            React.createElement(AccountButton, { btnType: `full-width`, text: `saveAndApply`, onClick: handleAddressChangeSubmit }))));
+});
+export default SelectShippingBilling;

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

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