-
Favourites
+
+ {
+ Children.map(children, (tab, index) => {
+ let item = tab as ReactElement>
+ return (
+ -
+
+ {item.props.tabName}
+
+
+ )
+ })
+ }
+
+
+
+
+ {
+ Children.map(children, (tab, index) => {
+ let item = tab as ReactElement
>
+ return cloneElement(item, { active: index === active });
+ })
+ }
diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
index 01fc0e1cc..12d3e1f02 100644
--- a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
+++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
@@ -1,7 +1,6 @@
-@import '../../../../../styles/utilities';
+@import '../../../../../../styles/utilities';
.accountNavigationItem {
- @apply bg-gray;
width: 28rem;
padding: 1.2rem 0 1.2rem 1.6rem;
margin-bottom: 1.2rem;
@@ -14,6 +13,5 @@
&.active {
background-color: #FBFBFB;
border-radius: 0 1.6rem 1.6rem 0;
- border-left: 2px solid var(--primary);
}
}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
index 8bb18cb58..9ac8a387f 100644
--- a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
+++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
@@ -4,15 +4,19 @@ import s from './AccountNavigationItem.module.scss'
interface AccountNavigationItemProps {
children?: string;
- active?: string;
- target?: string;
- onClick: () => void;
+ active?: boolean;
+ tabIndex: number
+ onClick: (index: number) => void;
}
-const AccountNavigationItem = ({ children, active="", onClick } : AccountNavigationItemProps) => {
+const AccountNavigationItem = ({ children, active, tabIndex, onClick } : AccountNavigationItemProps) => {
+
+ const handleClick = () => {
+ onClick(tabIndex)
+ }
return (
-
{children}
diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss
new file mode 100644
index 000000000..3f8307750
--- /dev/null
+++ b/src/components/modules/account/AccountPage/AccountPage.module.scss
@@ -0,0 +1,26 @@
+@import '../../../../styles/utilities';
+
+.accountPage {
+ @apply spacing-horizontal;
+ background-color: #F5F4F2;
+ margin-top: -3.2rem;
+ padding-top: 3.2rem;
+ padding-bottom: 3.2rem;
+
+ @screen md {
+ padding-left: 3.2rem;
+ padding-right: 3.2rem;
+ }
+
+ @screen xl {
+ @apply spacing-horizontal
+ }
+
+ .header {
+ margin-bottom: 1.2rem;
+
+ @screen md {
+ margin-bottom: 3.8rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx
new file mode 100644
index 000000000..a5a0ef79d
--- /dev/null
+++ b/src/components/modules/account/AccountPage/AccountPage.tsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react"
+import s from './AccountPage.module.scss'
+
+import AccountNavigation from '../AccountNavigation/AccountNavigation'
+import HeadingCommon from '../../../common/HeadingCommon/HeadingCommon'
+import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
+import OrderInfomation from './components/OrderInformation/OrderInformation'
+import EditInfoModal from './components/EditInfoModal/EditInfoModal'
+import TabPane from "src/components/common/TabCommon/components/TabPane/TabPane"
+
+const waiting = [
+ {
+ id: "NO 123456",
+ products: ["Tomato", "Fish", "Pork", "Onion"],
+ totalPrice : 1000
+ }
+]
+
+const delivering = [
+ {
+ id: "NO 123456",
+ products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
+ totalPrice : 1000
+ }
+]
+
+const delivered = [
+ {
+ id: "NO 123456",
+ products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"],
+ totalPrice : 1000
+ }
+]
+
+let account = {
+ name: "vu duong",
+ email: "vuduong@gmail.com",
+ address: "234 Dien Bien Phu Bis, Dakao ward",
+ state: "District 1",
+ city: "HCMC",
+ postalCode: "700000",
+ phoneNumber: "(+84) 937 937 195"
+}
+
+interface AccountPageProps {
+ defaultActiveContent?: "info" | "orders" | "favorites"
+}
+
+const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
+
+ const [activeTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
+ const [modalVisible, setModalVisible] = useState(false);
+
+ function showModal() {
+ setModalVisible(true);
+ }
+
+ function closeModal() {
+ setModalVisible(false);
+ }
+
+ return (
+ <>
+
+
+ Account
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+ )
+}
+
+export default AccountPage
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/assets/avatar.png b/src/components/modules/account/AccountPage/assets/avatar.png
new file mode 100644
index 000000000..b12cabed4
Binary files /dev/null and b/src/components/modules/account/AccountPage/assets/avatar.png differ
diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
new file mode 100644
index 000000000..442dae2eb
--- /dev/null
+++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
@@ -0,0 +1,67 @@
+@import '../../../../../../styles/utilities';
+
+.accountInfomation {
+ @apply flex justify-center items-center;
+ text-align: center;
+ margin-top: 1.6rem;
+
+ @screen md {
+ @apply block;
+ text-align: left;
+ margin-top: 0;
+ }
+
+ .avatar {
+ height: 22rem;
+ width: 22rem;
+ border-radius: 50%;
+ margin: auto;
+ margin-bottom: 4rem;
+
+
+ @screen md {
+ margin-left: 0
+ }
+ }
+
+ .accountName {
+ @apply heading-3 font-heading;
+ }
+
+ .horizontalSeparator{
+ border: 1px solid var(--disabled);
+ max-width: 39.2rem;
+ min-width: 30rem;
+ margin-top: 2.4rem;
+ margin-bottom: 2.4rem;
+ }
+
+ .shippingInfo {
+ @apply heading-3 font-heading;
+ }
+
+ .accountAddress {
+ max-width: 31rem;
+ min-width: none;
+ }
+
+ .editInfoBtn {
+ @apply text-center font-bold custom-border-radius;
+ margin: auto;
+ margin-top: 2.4rem;
+ margin-bottom: 2.4rem;
+ padding: .8rem 1.6rem;
+ color: #141414;
+ border: 1px solid #141414;
+ max-width: 8.8rem;
+
+ &:hover {
+ @apply cursor-pointer;
+ background-color: #FBFBFB;
+ }
+
+ @screen md {
+ margin-left: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
new file mode 100644
index 000000000..f24b36216
--- /dev/null
+++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
@@ -0,0 +1,56 @@
+import React from "react"
+import s from './AccountInfomation.module.scss'
+
+import Image from "next/image"
+import avatar from '../../assets/avatar.png';
+
+interface AccountProps {
+ name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string
+}
+
+interface AccountInfomationProps {
+ account: AccountProps;
+ onClick: () => void;
+}
+
+const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
+
+ // need to handle call back when edit account information
+
+ const showEditForm = () => onClick()
+
+ return (
+
+ {
+
+
+
+
+
+
+ {account.name}
+
+
+ {account.email}
+
+
+
+
+
Shipping Infomation
+
+
+ {account.address + `, ${account.state}, ${account.city}, ${account.postalCode}`}
+
+
+
+ {account.phoneNumber}
+
+
+
Edit
+
+ )
+}
+
+export default AccountInfomation
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss
new file mode 100644
index 000000000..be1384ab7
--- /dev/null
+++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss
@@ -0,0 +1,81 @@
+@import '../../../../../../styles/utilities';
+
+.editInfoModal {
+ .input {
+ @apply bg-white;
+ margin-bottom: 1.6rem;
+ width: 100%;
+ border: 2px solid #EBEBEB;
+ border-radius: .8rem;
+ padding: 1.6rem;
+ }
+
+ .inputDisable {
+ margin-bottom: 1.6rem;
+ width: 100%;
+ border: 2px solid #EBEBEB;
+ border-radius: .8rem;
+ padding: 1.6rem;
+ background-color: #EBEBEB;
+ color: #CCCCCC;
+ }
+
+ .inputStateWrapper {
+ @apply bg-white;
+ margin-bottom: 1.6rem;
+ margin-right: 1.6rem;
+ border: 2px solid #EBEBEB;
+ border-radius: .8rem;
+ padding: 1.6rem;
+
+ .inputState {
+ @apply bg-white cursor-pointer;
+ border: white;
+ }
+ }
+
+ .inputPostalCode {
+ @apply bg-white;
+ margin-bottom: 1.6rem;
+ border: 2px solid #EBEBEB;
+ border-radius: .8rem;
+ padding: 1.6rem;
+ }
+
+ .inputPhoneNumber {
+ @apply bg-white;
+ margin-bottom: 4rem;
+ width: 100%;
+ border: 2px solid #EBEBEB;
+ border-radius: .8rem;
+ padding: 1.6rem;
+ }
+
+ .buttons {
+ @apply flex;
+
+ .buttonCancel {
+ @apply bg-white text-center font-bold custom-border-radius-lg;
+ color: #141414;
+ border: 1px solid #141414;
+ padding: 1.6rem;
+ margin-right: 1.6rem;
+ width: 100%;
+
+ &:hover {
+ @apply cursor-pointer;
+ }
+ }
+
+ .buttonSave {
+ @apply text-center font-bold custom-border-radius-lg;
+ background-color: var(--primary);
+ color: white;
+ padding: 1.6rem;
+ width: 100%;
+ &:hover {
+ @apply cursor-pointer;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
new file mode 100644
index 000000000..d2be8b1a1
--- /dev/null
+++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
@@ -0,0 +1,83 @@
+import classNames from "classnames"
+import React, { useState } from "react"
+import s from './EditInfoModal.module.scss'
+
+import {ModalCommon, MenuDropdown} from '../../../../../common'
+
+import {ButtonCommon} from '../../../../../common'
+
+interface EditInfoModalProps {
+ accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
+ visible: boolean;
+ closeModal: () => void;
+}
+
+const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoModalProps) => {
+
+ const [name, setName] = useState(accountInfo.name);
+ const [email, setEmail] = useState(accountInfo.email);
+ const [address, setAddress] = useState(accountInfo.address);
+ const [state, setState] = useState(accountInfo.state);
+ const [city, setCity] = useState(accountInfo.city);
+ const [postalCode, setPostalCode] = useState(accountInfo.postalCode);
+ const [phoneNumber, setPhoneNumber] = useState(accountInfo.phoneNumber);
+
+ function saveInfo() {
+ console.log("saved !!!");
+
+ closeModal();
+ }
+
+ const states = [
+ {name: "D1", onClick: () => {setState("D1")}},
+ {name: "D2", onClick: () => {setState("D2")}},
+ {name: "D3", onClick: () => {setState("D3")}}
+ ]
+
+ return (
+
+
+
+ )
+}
+
+export default EditInfoModal
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss
new file mode 100644
index 000000000..0096a67d7
--- /dev/null
+++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss
@@ -0,0 +1,16 @@
+@import '../../../../../../styles/utilities';
+
+.orderInformation {
+ .title {
+ @apply heading-3 font-heading;
+ margin-top: 1.6rem;
+ }
+
+ .tabs {
+ margin-top: 3.2rem;
+
+ .blank {
+ margin-bottom: 2.4rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
new file mode 100644
index 000000000..76985b9fd
--- /dev/null
+++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
@@ -0,0 +1,66 @@
+import React from "react"
+import s from './OrderInformation.module.scss'
+
+import { TabCommon } from '../../../../../common'
+import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
+import DeliveryItem from '../../../DeliveryItem/DeliveryItem'
+
+
+interface OrderInformationProps {
+ waiting: {id: string, products: string[], totalPrice: number}[],
+ delivering: {id: string, products: string[], totalPrice: number}[],
+ delivered: {id: string, products: string[], totalPrice: number}[],
+ // active?: boolean
+}
+
+const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationProps) => {
+
+ return (
+
+ {
+
+
Order Information
+
+
+
+
+
+ {
+ waiting.map((order, i) => {
+ return (
+
+ )
+ })
+ }
+
+
+
+
+ {
+ delivering.map((order, i) => {
+ return (
+
+ )
+ })
+ }
+
+
+
+
+ {
+ delivered.map((order, i) => {
+ return (
+
+ )
+ })
+ }
+
+
+
+
+ )
+}
+
+export default OrderInformation
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss
new file mode 100644
index 000000000..b83b77fd3
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss
@@ -0,0 +1,26 @@
+@import '../../../../styles/utilities';
+
+.deliveryItem {
+ @apply flex bg-white items-center custom-border-radius;
+ margin-bottom: 1.6rem;
+ border: 1px solid var(--primary)
+}
+
+.separator {
+ border-left: 2px dashed #EBEBEB;
+ max-height: 9.2rem;
+ min-height: 8.6rem;
+
+ margin-left: .6rem;
+ margin-right: .6rem;
+
+ @screen md {
+ margin-left: .8rem;
+ margin-right: .8rem;
+ }
+
+ @screen lg {
+ margin-left: 2.4rem;
+ margin-right: 2.4rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
new file mode 100644
index 000000000..fe8f5cdef
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
@@ -0,0 +1,30 @@
+import React from "react"
+import s from './DeliveryItem.module.scss'
+
+import IdAndStatus from './components/IdAndStatus/IdAndStatus'
+import Products from './components/Products/Products'
+import TotalPrice from './components/TotalPrice/TotalPrice'
+import ReOrder from './components/ReOrder/ReOrder'
+
+
+interface DeliveryItemProps {
+ id: string;
+ status: "waiting" | "delivering" | "delivered";
+ products: string[];
+ totalPrice: number;
+ reOrderLink?: string;
+}
+
+const DeliveryItem = ({ id, status, products, totalPrice, reOrderLink } : DeliveryItemProps) => {
+ return (
+
+ )
+}
+
+export default DeliveryItem
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
new file mode 100644
index 000000000..d50ecd115
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
@@ -0,0 +1,75 @@
+@import '../../../../../../styles/utilities';
+
+.idAndStatus {
+ @apply items-center;
+ padding: 2.4rem 0 2.4rem 1rem;
+
+ @screen md {
+ padding: 2.4rem 0 2.4rem 1.2rem;
+ }
+
+ @screen lg {
+ padding: 2.4rem 0 2.4rem 2.4rem;
+ }
+
+ .id {
+ @apply font-bold;
+ margin-bottom: .8rem;
+ }
+
+ .deliveryStatus {
+ @apply font-bold text-white;
+ font-size: 1.2rem;
+ line-height: 2rem;
+ padding: 0 .8rem;
+ border-radius: 0.5rem;
+ width: fit-content;
+
+ &.waiting {
+ background-color: #D9A645;
+ }
+ &.delivering {
+ background-color: var(--info-dark);
+ }
+ &.delivered {
+ background-color: var(--primary);
+ }
+ }
+}@import '../../../../../../styles/utilities';
+
+.idAndStatus {
+ @apply items-center;
+ padding: 2.4rem 0 2.4rem 1rem;
+
+ @screen md {
+ padding: 2.4rem 0 2.4rem 1.2rem;
+ }
+
+ @screen lg {
+ padding: 2.4rem 0 2.4rem 2.4rem;
+ }
+
+ .id {
+ @apply font-bold;
+ margin-bottom: .8rem;
+ }
+
+ .deliveryStatus {
+ @apply font-bold text-white;
+ font-size: 1.2rem;
+ line-height: 2rem;
+ padding: 0 .8rem;
+ border-radius: 0.5rem;
+ width: fit-content;
+
+ &.waiting {
+ background-color: #D9A645;
+ }
+ &.delivering {
+ background-color: var(--info-dark);
+ }
+ &.delivered {
+ background-color: var(--primary);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
new file mode 100644
index 000000000..841dd530f
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
@@ -0,0 +1,25 @@
+import classNames from "classnames"
+import React from "react"
+import s from './IdAndStatus.module.scss'
+
+
+interface IdAndStatusProps {
+ id?: string;
+ status: "waiting" | "delivering" | "delivered";
+}
+
+const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
+ return (
+
+
+ {id}
+
+
{status}
+
+
+ )
+}
+
+export default IdAndStatus
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/Products/Products.module.scss b/src/components/modules/account/DeliveryItem/components/Products/Products.module.scss
new file mode 100644
index 000000000..f05d6395b
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/Products/Products.module.scss
@@ -0,0 +1,12 @@
+@import '../../../../../../styles/utilities';
+
+.products {
+ margin-top: .8rem;
+ max-width: 32%;
+ min-width: none;
+
+ @screen lg {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/Products/Products.tsx b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx
new file mode 100644
index 000000000..fdbba2c73
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import s from './Products.module.scss'
+
+interface ProductsProps {
+ products: string[];
+}
+
+const Products = ({ products } : ProductsProps) => {
+
+ function toString(products:string[]): string {
+ let strProducts = "";
+ products.map((prod, i) => {
+ if (i === 0) {
+ strProducts += prod;
+ } else {
+ strProducts += `, ${prod}`
+ }
+ });
+ return strProducts;
+ }
+
+ return (
+
+ {toString(products)}
+
+ )
+}
+
+export default Products
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
new file mode 100644
index 000000000..b46b528e1
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
@@ -0,0 +1,27 @@
+@import '../../../../../../styles/utilities';
+
+.reOrder {
+ @apply text-white custom-border-radius hidden font-bold;
+ padding: .4rem .6rem;
+ margin-right: 1rem;
+ background-color: var(--primary);
+
+ @screen md {
+ padding: .4rem .6rem;
+ margin-right: 1.2rem;
+ }
+
+ @screen lg {
+ padding: .8rem 1.2rem;
+ margin-right: 2.4rem;
+ }
+
+ &.show {
+ @apply block;
+ }
+
+ &:hover {
+ @apply cursor-pointer;
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx
new file mode 100644
index 000000000..2fbc546f4
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx
@@ -0,0 +1,23 @@
+import classNames from "classnames"
+import React from "react"
+import s from './ReOrder.module.scss'
+import Link from 'next/link'
+
+interface ReOrderProps {
+ show: boolean;
+ href?: string;
+}
+
+const ReOrder = ({ show=false, href="#" } : ReOrderProps) => {
+ return (
+
+ )
+}
+
+export default ReOrder
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss
new file mode 100644
index 000000000..9a4f795b3
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss
@@ -0,0 +1,26 @@
+@import '../../../../../../styles/utilities';
+
+.totalPrice {
+ margin-left: auto;
+ margin-right: 1rem;
+
+ @screen md {
+ margin-right: 1.2rem;
+ }
+
+ @screen lg {
+ margin-right: 2.4rem;
+ }
+
+ .price {
+ @apply font-bold ;
+
+ @screen md {
+ @apply topline
+ }
+
+ @screen lg {
+ @apply sub-headline;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.tsx b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.tsx
new file mode 100644
index 000000000..153149e85
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import s from './TotalPrice.module.scss'
+
+
+interface TotalPriceProps {
+ totalPrice: number;
+}
+
+const TotalPrice = ({ totalPrice } : TotalPriceProps) => {
+ return (
+
+ Total
+ Rp {totalPrice}
+
+ )
+}
+
+export default TotalPrice
\ No newline at end of file
diff --git a/src/components/modules/account/index.ts b/src/components/modules/account/index.ts
new file mode 100644
index 000000000..42753b0b5
--- /dev/null
+++ b/src/components/modules/account/index.ts
@@ -0,0 +1,3 @@
+export { default as AccountNavigation } from './AccountNavigation/AccountNavigation'
+export { default as DeliveryItem } from './DeliveryItem/DeliveryItem'
+export { default as AccountPage } from './AccountPage/AccountPage'
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss
new file mode 100644
index 000000000..d347ad872
--- /dev/null
+++ b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss
@@ -0,0 +1,7 @@
+@import "../../../../styles/utilities";
+.breadCrumbWrapper {
+ @apply py-12 spacing-horizontal;
+ @screen lg {
+ padding-left: 3.2rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogBreadcrumb/BlogBreadcrumb.tsx b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadcrumb.tsx
new file mode 100644
index 000000000..bb2ea19ef
--- /dev/null
+++ b/src/components/modules/blogs/BlogBreadcrumb/BlogBreadcrumb.tsx
@@ -0,0 +1,16 @@
+import { BreadcrumbCommon } from "src/components/common"
+import s from './BlogBreadCrumb.module.scss'
+
+const BLOG_DATA = [
+ {link: "/blogs", name: "Blog"},
+];
+
+const BlogBreadCrumb = () => {
+ return (
+
+ )
+}
+
+export default BlogBreadCrumb
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogHeading/BlogHeading.module.scss b/src/components/modules/blogs/BlogHeading/BlogHeading.module.scss
new file mode 100644
index 000000000..d562ce2ae
--- /dev/null
+++ b/src/components/modules/blogs/BlogHeading/BlogHeading.module.scss
@@ -0,0 +1,9 @@
+@import "../../../../styles/utilities";
+
+.headingWrapper {
+ @apply flex spacing-horizontal-left pb-16 justify-center;
+ .heading{
+ max-width: 121.6rem;
+ flex-grow: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogHeading/BlogHeading.tsx b/src/components/modules/blogs/BlogHeading/BlogHeading.tsx
new file mode 100644
index 000000000..e3f60c980
--- /dev/null
+++ b/src/components/modules/blogs/BlogHeading/BlogHeading.tsx
@@ -0,0 +1,18 @@
+import { HeadingCommon } from "src/components/common"
+import s from './BlogHeading.module.scss'
+
+interface BlogHeadingProps {
+ children?: React.ReactNode,
+ heading?: string,
+}
+
+const BlogHeading = ({heading = "BLOG"}: BlogHeadingProps) => {
+ return (
+
+ )
+}
+export default BlogHeading
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogsList/BlogsList.module.scss b/src/components/modules/blogs/BlogsList/BlogsList.module.scss
new file mode 100644
index 000000000..295cabc5a
--- /dev/null
+++ b/src/components/modules/blogs/BlogsList/BlogsList.module.scss
@@ -0,0 +1,23 @@
+@import "../../../../styles/utilities";
+
+.wrapper {
+ @apply flex flex-col spacing-horizontal items-center;
+ padding-bottom: 16.8rem;
+ .list {
+ @apply grid grid-cols-1 gap-8;
+ max-width: 121.6rem;
+ @screen md {
+ @apply grid-cols-2;
+ }
+ @screen lg {
+ @apply grid-cols-3;
+ }
+ }
+ .card {
+ @apply pb-16;
+ }
+ .pagination {
+ @apply flex justify-center items-center ;
+ padding-top: 0.8rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/blogs/BlogsList/BlogsList.tsx b/src/components/modules/blogs/BlogsList/BlogsList.tsx
new file mode 100644
index 000000000..536aa4afd
--- /dev/null
+++ b/src/components/modules/blogs/BlogsList/BlogsList.tsx
@@ -0,0 +1,157 @@
+import React, { useState } from 'react'
+import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
+import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
+import s from "./BlogsList.module.scss"
+import { DEFAULT_BLOG_PAGE_SIZE } from 'src/utils/constanst.utils'
+import image15 from '../../../../../public/assets/images/image15.png'
+import image16 from '../../../../../public/assets/images/image16.png'
+import image17 from '../../../../../public/assets/images/image17.png'
+import image21 from '../../../../../public/assets/images/image21.png'
+import image22 from '../../../../../public/assets/images/image22.png'
+import image23 from '../../../../../public/assets/images/image23.png'
+
+interface BlogsListProps {
+ data?: BlogCardProps[],
+}
+
+const BLOGSLIST_DATA = [
+ {
+ imageSrc: image15.src,
+ title: "1",
+ description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image16.src,
+ title: "2",
+ description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image17.src,
+ title: "3",
+ description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image21.src,
+ title: "4",
+ description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image22.src,
+ title: "5",
+ description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image23.src,
+ title: "6",
+ description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image15.src,
+ title: "7",
+ description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image16.src,
+ title: "8",
+ description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image17.src,
+ title: "9",
+ description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image23.src,
+ title: "10",
+ description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image21.src,
+ title: "11",
+ description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image22.src,
+ title: "12",
+ description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image15.src,
+ title: "13",
+ description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image16.src,
+ title: "14",
+ description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image17.src,
+ title: "15",
+ description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image21.src,
+ title: "16",
+ description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image23.src,
+ title: "17",
+ description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
+ slug: "happy-diet"
+ },
+ {
+ imageSrc: image22.src,
+ title: "18",
+ description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
+ slug: "happy-diet"
+ },
+
+ ]
+
+const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
+ const [currentPage, setCurrentPage] = useState(0)
+ const onPageChange = (page:number) => {
+ setCurrentPage(page)
+ }
+
+ return (
+
+
+
+ {
+ data.slice(currentPage*DEFAULT_BLOG_PAGE_SIZE,(currentPage+1)*DEFAULT_BLOG_PAGE_SIZE).map((product,index)=> {
+ return(
+
+
+
+ )
+ })
+ }
+
+
+
+ )
+}
+
+export default BlogsList
\ No newline at end of file
diff --git a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
new file mode 100644
index 000000000..6fb16450c
--- /dev/null
+++ b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
@@ -0,0 +1,34 @@
+@import "../../../../styles/utilities";
+
+.featuredCard {
+ @apply flex flex-row justify-center spacing-horizontal pb-16;
+ .featuredCardWrapper {
+ @apply flex flex-col;
+ @screen lg {
+ @apply flex-row justify-between;
+ }
+ max-width: 121.6rem;
+ }
+}
+.left {
+ max-width: 59.8rem;
+ img {
+ border-radius: 2.4rem;
+ }
+}
+.right {
+ flex-shrink: 3;
+ @screen lg {
+ margin-left: 6.4rem;
+ }
+}
+.titleWrapper {
+ @apply flex flex-col items-start font-heading heading-3;
+ margin-bottom: 1.6rem;
+ .title {
+ margin-top: 0.4rem;
+ }
+}
+.content {
+ margin-top: 1.6rem
+}
\ No newline at end of file
diff --git a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
new file mode 100644
index 000000000..2bd158d79
--- /dev/null
+++ b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
@@ -0,0 +1,52 @@
+import s from './FeaturedCardBlog.module.scss'
+import { Author, DateTime } from 'src/components/common'
+import Image from "next/image";
+import image20 from '../../../../../public/assets/images/image20.png'
+import author from '../../../../../public/assets/images/author.png'
+
+interface FeaturedCardBlogProps{
+ title?: string,
+ content?: string,
+ imgSrc?: any,
+ imgAuthor?: any,
+ date?: string,
+ authorName?: string,
+}
+
+const FEATURED_DATA = {
+ title: "Flammekueche with green asparagus",
+ content: "Traditionally, the Flammekueche is made with rapeseed oil, which, contrary to popular belief, is indeed an oil that can be cooked hot and is not limited to seasoning. It is important to vary the oils in the kitchen to take advantage of the benefits of each. Rapeseed oil is an oil rich in omega 3 which participate in the proper functioning of the cardiovascular system as well as in vitamins E which contributes to the protection of cells against oxidative stress. In short, oils are your friends 😉",
+ imgSrc: image20,
+ imgAuthor: author.src,
+ date: "APRIL 30, 2021",
+ author: "Alessandro Del Piero"
+}
+
+const FeaturedCardBlog = ({
+ title = FEATURED_DATA.title,
+ content = FEATURED_DATA.content,
+ imgSrc = FEATURED_DATA.imgSrc,
+ imgAuthor = FEATURED_DATA.imgAuthor,
+ date = FEATURED_DATA.date,
+ authorName = FEATURED_DATA.author
+}: FeaturedCardBlogProps) => {
+ return (
+
+ )
+}
+
+export default FeaturedCardBlog
\ No newline at end of file
diff --git a/src/components/modules/blogs/index.tsx b/src/components/modules/blogs/index.tsx
new file mode 100644
index 000000000..0f8e1b281
--- /dev/null
+++ b/src/components/modules/blogs/index.tsx
@@ -0,0 +1,4 @@
+export { default as FeaturedCardBlog } from './FeaturedCardBlog/FeaturedCardBlog'
+export { default as BlogsList } from './BlogsList/BlogsList'
+export { default as BlogHeading } from './BlogHeading/BlogHeading'
+export { default as BlogBreadCrumb } from './BlogBreadcrumb/BlogBreadcrumb'
\ No newline at end of file
diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss
new file mode 100644
index 000000000..abf7ef84f
--- /dev/null
+++ b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.module.scss
@@ -0,0 +1,8 @@
+@import "../../../../styles/utilities";
+
+.breadCrumb {
+ @apply absolute z-10 pt-12 spacing-horizontal;
+ @screen lg{
+ padding-left: 3.2rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx
new file mode 100644
index 000000000..992370ce5
--- /dev/null
+++ b/src/components/modules/delivery-policy/DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb.tsx
@@ -0,0 +1,17 @@
+import { BreadcrumbCommon } from 'src/components/common'
+import s from './DeliveryAndPolicyBreadCrumb.module.scss'
+
+const CRUMB_DATA = [
+ {
+ link: "/delivery-policy",
+ name: "Delivery And Policy"
+ }
+]
+const DeliveryAndPolicyBreadCrumb = () => {
+ return (
+
+ )
+}
+export default DeliveryAndPolicyBreadCrumb
\ No newline at end of file
diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss
new file mode 100644
index 000000000..be88621b5
--- /dev/null
+++ b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.module.scss
@@ -0,0 +1,26 @@
+@import "../../../../styles/utilities";
+
+.wrapper {
+ @apply flex justify-center pt-20 pb-28 spacing-horizontal;
+ .deliveryAndPolicyContentWrapper {
+ max-width: 80.4rem;
+ min-height: 4rem;
+ .titleWrapper {
+ @apply flex flex-col items-start;
+ .date {
+ @apply inline flex flex-row;
+ margin-bottom: 0.4rem;
+ .update {
+ @apply uppercase leading-8;
+ color:var(--text-label);
+ font-size: 1.2rem;
+ letter-spacing: 0.01em;
+ }
+ }
+ }
+ .content {
+ @apply pb-16 whitespace-pre-line;
+ padding-top: 1.6rem;
+ }
+ }
+}
diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx
new file mode 100644
index 000000000..6045288f6
--- /dev/null
+++ b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx
@@ -0,0 +1,81 @@
+import { CollapseCommon, DateTime, HeadingCommon } from 'src/components/common'
+import s from './DeliveryAndPolicyContent.module.scss'
+
+interface DeliveryAndPolicyContentProps{
+ title?: string,
+ date?: string,
+ content?: string,
+}
+const HEADER_CONTENT =
+`When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+
+This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`;
+
+const DELIVERYANDPOLICY_DATA = [
+ {
+ title: "This is a subtitle",
+ content: `When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+ Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+
+ This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`,
+ },
+ {
+ title: "This is a subtitle",
+ content: `When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+ Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+
+ This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`,
+ },
+ {
+ title: "This is a subtitle",
+ content: `When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+ Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+
+ This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`,
+ },
+ {
+ title: "This is a subtitle",
+ content: `When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+ Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+
+ This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`,
+ },
+ {
+ title: "This is a subtitle",
+ content: `When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.
+
+ Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.
+
+ This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.`,
+ },
+]
+
+const DeliveryAndPolicyContent = ( { title="Delivery & Policy", date="APRIL 30, 2021", content = HEADER_CONTENT } : DeliveryAndPolicyContentProps) => {
+ return (
+
+ )
+}
+
+export default DeliveryAndPolicyContent
\ No newline at end of file
diff --git a/src/components/modules/delivery-policy/index.tsx b/src/components/modules/delivery-policy/index.tsx
new file mode 100644
index 000000000..bb23bd6c8
--- /dev/null
+++ b/src/components/modules/delivery-policy/index.tsx
@@ -0,0 +1,2 @@
+export { default as DeliveryAndPolicyContent } from './DeliveryAndPolicyContent/DeliveryAndPolicyContent'
+export { default as DeliveryAndPolicyBreadCrumb } from './DeliveryAndPolicyBreadCrumb/DeliveryAndPolicyBreadCrumb'
\ No newline at end of file
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 95493aadb..3757feb1e 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -116,3 +116,4 @@ export const FEATURED = [
},
]
+export const DEFAULT_BLOG_PAGE_SIZE=6;
diff --git a/tsconfig.json b/tsconfig.json
index 6a08e59f8..316d817b7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,6 @@
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
- "isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"noUnusedLocals": true,
@@ -26,7 +25,8 @@
"@commerce/*": ["framework/commerce/*"],
"@framework": ["framework/vendure"],
"@framework/*": ["framework/vendure/*"]
- }
+ },
+ "isolatedModules": true
},
"include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
"exclude": [