+
= ({ dynamicPageItem }) => {
+const ProductDetails:ModuleWithInit = ({ dynamicPageItem, customData }) => {
const product:any = dynamicPageItem
+
+ const relatedProducts:[] = customData.products
+
+
return (
- = ({ customData }) =>
const categories:[any] = customData.categories
const brands:[any] = customData.brands
- const [activeFilter, setActiveFilter] = useState('')
- const [toggleFilter, setToggleFilter] = useState(false)
+ return
-
- )
}
diff --git a/components/agility-modules/Profile.tsx b/components/agility-modules/Profile.tsx
index 33c0b09ce..1e83725ec 100644
--- a/components/agility-modules/Profile.tsx
+++ b/components/agility-modules/Profile.tsx
@@ -1,6 +1,6 @@
import React, { FC } from 'react'
-import useCustomer from '@framework/use-customer'
+import useCustomer from '@framework/customer/use-customer'
import { Container, Text } from '@components/ui'
import { Module } from '@agility/nextjs'
@@ -12,34 +12,30 @@ interface Fields {
}
-const ProfileModule:Module = ({ module: {fields}}) => {
+const ProfileModule: Module = ({ module: { fields } }) => {
const { data } = useCustomer()
- return (
-
- {fields.heading}
- {data && (
- {fields.notLoggedInMessage}
- }
-
- )
+ return (
+
+ My Profile
+ {data && (
+
+ )
}
export default ProfileModule
diff --git a/components/agility-modules/Wishlist.tsx b/components/agility-modules/Wishlist.tsx
index 9db39a184..09bdab911 100644
--- a/components/agility-modules/Wishlist.tsx
+++ b/components/agility-modules/Wishlist.tsx
@@ -1,11 +1,12 @@
import React, { FC } from 'react'
-import useWishlist from '@framework/wishlist/use-wishlist'
-
-import { Heart } from '@components/icons'
-import { Text, Container } from '@components/ui'
-import { WishlistCard } from '@components/wishlist'
import { Module } from '@agility/nextjs'
+import { Heart } from '@components/icons'
+import { Layout } from '@components/common'
+import { Text, Container } from '@components/ui'
+import { useCustomer } from '@framework/customer'
+import { WishlistCard } from '@components/wishlist'
+import useWishlist from '@framework/wishlist/use-wishlist'
interface Fields {
@@ -15,35 +16,41 @@ interface Fields {
}
const Wishlist: Module = ({ module: { fields } }) => {
- const { data, isEmpty } = useWishlist({ includeProducts: true })
- return (
-
-
- )
+ const { data: customer } = useCustomer()
+ // @ts-ignore Shopify - Fix this types
+ const { data, isLoading, isEmpty } = useWishlist({ includeProducts: true })
+
+ return (
+
+
+ )
+
+
}
export default Wishlist
\ No newline at end of file
diff --git a/components/agility-modules/index.ts b/components/agility-modules/index.ts
index b3ade8431..112b9ebff 100644
--- a/components/agility-modules/index.ts
+++ b/components/agility-modules/index.ts
@@ -1,5 +1,3 @@
-import { FC } from "react"
-import * as AgilityTypes from "@agility/types"
import RichTextArea from "./RichTextArea"
import BestsellingProducts from "./BestsellingProducts"
import ProductDetails from "./ProductDetails"
diff --git a/components/auth/ForgotPassword.tsx b/components/auth/ForgotPassword.tsx
index 597ee328e..dbac371c7 100644
--- a/components/auth/ForgotPassword.tsx
+++ b/components/auth/ForgotPassword.tsx
@@ -61,7 +61,7 @@ const ForgotPassword: FC = () => {
- Do you have an account?
+ Do you have an account?
{` `}
= () => {
Log In
(item.quantity)
+ const removeItem = useRemoveItem()
+ const updateItem = useUpdateItem({ item })
+
const { price } = usePrice({
- amount: item.extended_sale_price,
- baseAmount: item.extended_list_price,
+ amount: item.variant.price * item.quantity,
+ baseAmount: item.variant.listPrice * item.quantity,
currencyCode,
})
- const updateItem = useUpdateItem(item)
- const removeItem = useRemoveItem()
- const [quantity, setQuantity] = useState(item.quantity)
- const [removing, setRemoving] = useState(false)
- const updateQuantity = async (val: number) => {
+
+ const handleChange = async ({
+ target: { value },
+ }: ChangeEvent) => {
+ setQuantity(Number(value))
+ await updateItem({ quantity: Number(value) })
+ }
+
+ const increaseQuantity = async (n = 1) => {
+ const val = Number(quantity) + n
+ setQuantity(val)
await updateItem({ quantity: val })
}
- const handleQuantity = (e: ChangeEvent) => {
- const val = Number(e.target.value)
- if (Number.isInteger(val) && val >= 0) {
- setQuantity(e.target.value)
- }
- }
- const handleBlur = () => {
- const val = Number(quantity)
-
- if (val !== item.quantity) {
- updateQuantity(val)
- }
- }
- const increaseQuantity = (n = 1) => {
- const val = Number(quantity) + n
-
- if (Number.isInteger(val) && val >= 0) {
- setQuantity(val)
- updateQuantity(val)
- }
- }
const handleRemove = async () => {
setRemoving(true)
-
try {
- // If this action succeeds then there's no need to do `setRemoving(true)`
- // because the component will be removed from the view
- await removeItem({ id: item.id })
+ await removeItem(item)
} catch (error) {
setRemoving(false)
}
}
+ // TODO: Add a type for this
+ const options = (item as any).options
+
useEffect(() => {
// Reset the quantity state if the item quantity changes
if (item.quantity !== Number(quantity)) {
@@ -70,55 +74,76 @@ const CartItem = ({
return (
-
- {isEmpty ? (
+ {isLoading || isEmpty ? (
My Cart
Review your Order
-
@@ -100,7 +100,36 @@ const Cart: FC = ({ fields, customData }) => {
Your cart is empty -
-+ +
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. -
+
@@ -60,7 +57,7 @@ const Cart: FC = ({ fields, customData }) => {
) : success ? (
We couldn’t process the purchase. Please check your card information and try again. -
+
@@ -69,14 +66,14 @@ const Cart: FC = ({ fields, customData }) => {
) : (
Thank you for your order. -
+-
- {items.map((item) => (
+
-
+ {data!.lineItems.map((item: any) => (
{[1, 2, 3, 4, 5, 6].map((x) => (
-
+
))}
- = ({ customData })
return
- {featured.map(({ node }:any, i:number) => (
+
+ {products.slice(0, 3).map((product: any, i: number) => (
diff --git a/components/agility-modules/Hero.tsx b/components/agility-modules/Hero.tsx
index 1d7b88f29..2c2ef8449 100644
--- a/components/agility-modules/Hero.tsx
+++ b/components/agility-modules/Hero.tsx
@@ -1,13 +1,13 @@
import React, { FC } from 'react'
import { Hero } from '@components/ui'
-import * as AgilityTypes from "@agility/types"
+import { URLField } from "@agility/nextjs"
import { Module } from '@agility/nextjs'
interface Fields {
title:string,
description:string
- cTA?:AgilityTypes.URLField
+ cTA?:URLField
}
const HeroModule:Module = ({ module: {fields }}) => {
@@ -16,8 +16,8 @@ const HeroModule:Module = ({ module: {fields }}) => {
= ({ customData }) => {
- const categories = customData.categories
- const newestProducts = customData.newestProducts
- const brands = customData.brands
- if (!categories) return
+ {products.slice(0, 3).map((product: any, i: number) => (
+
)
+
+
}
export default HomeAllProductsGridModule
diff --git a/components/agility-modules/Orders.tsx b/components/agility-modules/Orders.tsx
index e10680aac..d47ab97db 100644
--- a/components/agility-modules/Orders.tsx
+++ b/components/agility-modules/Orders.tsx
@@ -8,7 +8,7 @@ import { Module } from '@agility/nextjs'
interface Fields {
}
-const Orders: Module = ({ }) => {
+const Orders: Module = ({ }) => {
return (
My Orders
@@ -19,8 +19,8 @@ const Orders: Module = ({ }) => {
diff --git a/components/agility-modules/ProductDetails.tsx b/components/agility-modules/ProductDetails.tsx
index 6c2157e0c..320df7624 100644
--- a/components/agility-modules/ProductDetails.tsx
+++ b/components/agility-modules/ProductDetails.tsx
@@ -1,20 +1,25 @@
import React, { FC } from 'react'
-import { Hero } from '@components/ui'
-import * as AgilityTypes from "@agility/types"
-import { GetProductResult } from '@framework/api/operations/get-product'
-import { ProductView } from '@components/product'
-import { Module } from '@agility/nextjs'
-interface Fields {
+import { ProductView } from '@components/product'
+import { Module, ModuleWithInit } from '@agility/nextjs'
+
+interface IFields {
+}
+interface ICustomData {
+ products: any
}
-const HeroModule:Module
+ {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED && (
+ <>
+ {/* Shipping Address */}
+ {/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
+
diff --git a/components/agility-modules/FeaturedProducts.tsx b/components/agility-modules/FeaturedProducts.tsx
index 2c806942f..c3b14f6af 100644
--- a/components/agility-modules/FeaturedProducts.tsx
+++ b/components/agility-modules/FeaturedProducts.tsx
@@ -4,7 +4,7 @@ import { ProductCard } from '@components/product'
import { ModuleWithInit } from "@agility/nextjs"
interface ICustomData {
- featured: any
+ products: any
}
interface IModule {
@@ -17,16 +17,18 @@ const FeaturedProducts: ModuleWithInit
+
+ {/* Payment Method */}
+ {/* Only available with customCheckout set to true - Meaning that the provider does offer checkout functionality. */}
+
+
+
+ + Add Shipping Address
+ {/*
+ 1046 Kearny Street.
+ San Franssisco, California + */} +
+ + San Franssisco, California + */} +
+
+
+ )}
+
+
+
+ + Add Payment Method
+ {/* VISA #### #### #### 2345 */}
+
+ -
Subtotal
@@ -115,7 +144,7 @@ const Cart: FC
= ({ fields, customData }) => { FREE
+ = ({ fields, customData }) => {
Continue Shopping
) : (
-
- )}
+
+ )}
Total
{total}
@@ -127,10 +156,10 @@ const Cart: FCNo featured products returned.
}
- const featured:any = customData.featured
+ const products:any = customData.products
return (
- No data
+ const products = customData.products
return (
- No orders found
-- Orders coming soon! +
+ Orders coming soon.
-
-
- {/* Categories */}
-
- {/* Products */}
-
-
-
- {/* Designs */}
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - - handleClick(e, 'categories')} - className={ - 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4' - } - > - All Categories - - - - {categories.map((cat) => ( -
- - - handleClick(e, 'categories')} - className={ - 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4' - } - > - {cat.name} - - - - ))} -
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - - handleClick(e, 'brands')} - className={ - 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4' - } - > - All Designers - - - - {brands.flatMap(({ node }) => ( -
- - - handleClick(e, 'brands')} - className={ - 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4' - } - > - {node.name} - - - - ))} -
- {(q || activeCategory || activeBrand) && (
-
- {data.products.map(({ node }) => (
-
- ) : (
-
- {rangeMap(12, (i) => (
-
- )}
-
-
- {/* Sort */}
-
- {data ? (
- <>
-
- Showing {data.products.length} results{' '}
- {q && (
- <>
- for "{q}"
-
- )}
-
-
- {q ? (
- <>
- There are no products that match "{q}"
-
- ) : (
- <>
- There are no products that match the selected category &
- designer
-
- )}
-
-
- ) : q ? (
- <>
- Searching for: "{q}"
-
- ) : (
- <>Searching...
- )}
-
- )}
-
- {data ? (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - - handleClick(e, 'sort')} - className={ - 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4' - } - > - Relevance - - - - {SORT.map(([key, text]) => ( -
- - - handleClick(e, 'sort')} - className={ - 'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4' - } - > - {text} - - - - ))} -
-
- )}
-
- { !data &&
-
-
-
- {fields.fullNameLabel}
-
- {data.firstName} {data.lastName}
-
-
-
- {fields.emailLabel}
- {data.email}
-
-
+
+ )}
+
+
+
+ Full Name
+
+ {data.firstName} {data.lastName}
+
+
+
+ Email
+ {data.email}
+
+
- {fields.heading}
-
-
- {isEmpty ? (
-
-
-
-
- ) : (
- data &&
- data.items?.map((item) => (
- - {fields.emptyMessage} -
-- {fields.addItemsMessage} -
-
+ My Wishlist
+
+
+ {isLoading || isEmpty ? (
+
+
+
+
+ ) : (
+ data &&
+ // @ts-ignore Shopify - Fix this types
+ data.items?.map((item) => (
+ + Your wishlist is empty +
++ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +
+
- Don't have an account?
+ Don't have an account?
{` `}
= () => {
-
+
= () => {
- Do you have an account?
+ Do you have an account?
{` `}
{
+ const { closeSidebarIfPresent } = useUI()
+ const [removing, setRemoving] = useState(false)
+ const [quantity, setQuantity] = useState
-
-
- {/** TODO: Replace this. No `path` found at Cart */}
-
-
- {item.name}
-
-
-
- increaseQuantity(1)}
+ decrease={() => increaseQuantity(-1)}
+ />
+ )}
)
}
diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css
index 9b94021ad..c9ffbed50 100644
--- a/components/cart/CartSidebarView/CartSidebarView.module.css
+++ b/components/cart/CartSidebarView/CartSidebarView.module.css
@@ -1,15 +1,11 @@
.root {
- @apply h-full flex flex-col;
+ min-height: 100vh;
}
.root.empty {
@apply bg-secondary text-secondary;
}
-.root.success {
- @apply bg-green text-white;
-}
-
-.root.error {
- @apply bg-red text-white;
+.lineItemsList {
+ @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2;
}
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index eb76c5da5..128b928a8 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -1,62 +1,45 @@
-import { FC } from 'react'
import cn from 'classnames'
-import { UserNav } from '@components/common'
-import { Button } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import useCart from '@framework/cart/use-cart'
-import usePrice from '@framework/use-price'
-import CartItem from '../CartItem'
+import Link from 'next/link'
+import { FC } from 'react'
import s from './CartSidebarView.module.css'
+import CartItem from '../CartItem'
+import { Button, Text } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import { Bag, Cross, Check } from '@components/icons'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/product/use-price'
+import SidebarLayout from '@components/common/SidebarLayout'
const CartSidebarView: FC = () => {
- const { closeSidebar } = useUI()
- const { data, isEmpty } = useCart()
+ const { closeSidebar, setSidebarView } = useUI()
+ const { data, isLoading, isEmpty } = useCart()
+
const { price: subTotal } = usePrice(
data && {
- amount: data.base_amount,
+ amount: Number(data.subtotalPrice),
currencyCode: data.currency.code,
}
)
const { price: total } = usePrice(
data && {
- amount: data.cart_amount,
+ amount: Number(data.totalPrice),
currencyCode: data.currency.code,
}
)
const handleClose = () => closeSidebar()
-
- const items = data?.line_items.physical_items ?? []
+ const goToCheckout = () => setSidebarView('CHECKOUT_VIEW')
const error = null
const success = null
return (
-
-
-
-
- {price}
-
-
+ {variant === 'default' && (
+
-
-
-
- {isEmpty ? (
+ {isLoading || isEmpty ? (
-
-
-
-
-
-
- Your cart is empty
-+
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
-
- - My Cart -
--
- {items.map((item: any) => (
+
+
-
+ {data!.lineItems.map((item: any) => (
- setSidebarView('CART_VIEW')}
+ >
+
+ )
+}
+
+export default CheckoutSidebarView
diff --git a/components/checkout/CheckoutSidebarView/index.ts b/components/checkout/CheckoutSidebarView/index.ts
new file mode 100644
index 000000000..168bc58f4
--- /dev/null
+++ b/components/checkout/CheckoutSidebarView/index.ts
@@ -0,0 +1 @@
+export { default } from './CheckoutSidebarView'
diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.module.css b/components/checkout/PaymentMethodView/PaymentMethodView.module.css
new file mode 100644
index 000000000..f3880c72c
--- /dev/null
+++ b/components/checkout/PaymentMethodView/PaymentMethodView.module.css
@@ -0,0 +1,17 @@
+.fieldset {
+ @apply flex flex-col my-3;
+}
+
+.fieldset .label {
+ @apply text-accent-7 uppercase text-xs font-medium mb-2;
+}
+
+.fieldset .input,
+.fieldset .select {
+ @apply p-2 border border-accent-2 w-full text-sm font-normal;
+}
+
+.fieldset .input:focus,
+.fieldset .select:focus {
+ @apply outline-none shadow-outline-normal;
+}
diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
new file mode 100644
index 000000000..a5f6f4b51
--- /dev/null
+++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
@@ -0,0 +1,84 @@
+import { FC } from 'react'
+import cn from 'classnames'
+import { Button, Text } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import s from './PaymentMethodView.module.css'
+import SidebarLayout from '@components/common/SidebarLayout'
+
+const PaymentMethodView: FC = () => {
+ const { setSidebarView } = useUI()
+
+ return (
+ setSidebarView('CHECKOUT_VIEW')}>
+
+ )
+}
+
+export default PaymentMethodView
diff --git a/components/checkout/PaymentMethodView/index.ts b/components/checkout/PaymentMethodView/index.ts
new file mode 100644
index 000000000..951b3c318
--- /dev/null
+++ b/components/checkout/PaymentMethodView/index.ts
@@ -0,0 +1 @@
+export { default } from './PaymentMethodView'
diff --git a/components/checkout/PaymentWidget/PaymentWidget.module.css b/components/checkout/PaymentWidget/PaymentWidget.module.css
new file mode 100644
index 000000000..38dcab0c0
--- /dev/null
+++ b/components/checkout/PaymentWidget/PaymentWidget.module.css
@@ -0,0 +1,4 @@
+.root {
+ @apply border border-accent-2 px-6 py-5 mb-4 text-center
+ flex items-center cursor-pointer hover:border-accent-4;
+}
diff --git a/components/checkout/PaymentWidget/PaymentWidget.tsx b/components/checkout/PaymentWidget/PaymentWidget.tsx
new file mode 100644
index 000000000..e1892934e
--- /dev/null
+++ b/components/checkout/PaymentWidget/PaymentWidget.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react'
+import s from './PaymentWidget.module.css'
+import { ChevronRight, CreditCard } from '@components/icons'
+
+interface ComponentProps {
+ onClick?: () => any
+}
+
+const PaymentWidget: FC = ({ onClick }) => {
+ /* Shipping Address
+ Only available with checkout set to true -
+ This means that the provider does offer checkout functionality. */
+ return (
+ setSidebarView('CHECKOUT_VIEW')}>
+
+ )
+}
+
+export default PaymentMethodView
diff --git a/components/checkout/ShippingView/index.ts b/components/checkout/ShippingView/index.ts
new file mode 100644
index 000000000..428e7e4fe
--- /dev/null
+++ b/components/checkout/ShippingView/index.ts
@@ -0,0 +1 @@
+export { default } from './ShippingView'
diff --git a/components/checkout/ShippingWidget/ShippingWidget.module.css b/components/checkout/ShippingWidget/ShippingWidget.module.css
new file mode 100644
index 000000000..38dcab0c0
--- /dev/null
+++ b/components/checkout/ShippingWidget/ShippingWidget.module.css
@@ -0,0 +1,4 @@
+.root {
+ @apply border border-accent-2 px-6 py-5 mb-4 text-center
+ flex items-center cursor-pointer hover:border-accent-4;
+}
diff --git a/components/checkout/ShippingWidget/ShippingWidget.tsx b/components/checkout/ShippingWidget/ShippingWidget.tsx
new file mode 100644
index 000000000..b072178b0
--- /dev/null
+++ b/components/checkout/ShippingWidget/ShippingWidget.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react'
+import s from './ShippingWidget.module.css'
+import { ChevronRight, MapPin } from '@components/icons'
+import cn from 'classnames'
+
+interface ComponentProps {
+ onClick?: () => any
+}
+
+const ShippingWidget: FC = ({ onClick }) => {
+ /* Shipping Address
+ Only available with checkout set to true -
+ This means that the provider does offer checkout functionality. */
+ return (
+ = ({}) => {
- const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
let ref = useRef() as React.MutableRefObject
-
- useEffect(() => {
- if (ref && ref.current) {
- ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
- }
- }, [bg])
+ let { userAvatar } = useUserAvatar()
return (
= ({ className, pages }) => {
- const { sitePages, legalPages } = usePages(pages)
- const rootClassName = cn(className)
+ const { sitePages } = usePages(pages)
+ const rootClassName = cn(s.root, className)
return (
-
+
)
}
diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
new file mode 100644
index 000000000..34c1b487c
--- /dev/null
+++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
@@ -0,0 +1,7 @@
+.root {
+ min-height: calc(100vh - 322px);
+}
+
+.lineItemsList {
+ @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2;
+}
diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
new file mode 100644
index 000000000..fb562e7af
--- /dev/null
+++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
@@ -0,0 +1,89 @@
+import cn from 'classnames'
+import Link from 'next/link'
+import { FC } from 'react'
+import CartItem from '@components/cart/CartItem'
+import { Button, Text } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/product/use-price'
+import ShippingWidget from '../ShippingWidget'
+import PaymentWidget from '../PaymentWidget'
+import SidebarLayout from '@components/common/SidebarLayout'
+import s from './CheckoutSidebarView.module.css'
+
+const CheckoutSidebarView: FC = () => {
+ const { setSidebarView } = useUI()
+ const { data } = useCart()
+
+ const { price: subTotal } = usePrice(
+ data && {
+ amount: Number(data.subtotalPrice),
+ currencyCode: data.currency.code,
+ }
+ )
+ const { price: total } = usePrice(
+ data && {
+ amount: Number(data.totalPrice),
+ currencyCode: data.currency.code,
+ }
+ )
+
+ return (
+ -
-
- - Subtotal - {subTotal} - -
- - Taxes - Calculated at checkout - -
- - Estimated Shipping - FREE - -
- Total
- {total}
-
+
+
)}
- -
+
- + Subtotal + {subTotal} + +
- + Taxes + Calculated at checkout + +
- + Shipping + FREE + +
+ Total
+ {total}
+
+
+ {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED ? (
+
+ ) : (
+
+ )}
-
+
+ Checkout
+
+
+ setSidebarView('PAYMENT_VIEW')} />
+ setSidebarView('SHIPPING_VIEW')} />
+
+
+
+ -
+ {data!.lineItems.map((item: any) => (
+
+
+ -
+
- + Subtotal + {subTotal} + +
- + Taxes + Calculated at checkout + +
- + Shipping + FREE + +
+ Total
+ {total}
+
+
+ {/* Once data is correcly filled */}
+ {/* */}
+
+
+
+ Payment Method
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default PaymentWidget
diff --git a/components/checkout/PaymentWidget/index.ts b/components/checkout/PaymentWidget/index.ts
new file mode 100644
index 000000000..18cadea57
--- /dev/null
+++ b/components/checkout/PaymentWidget/index.ts
@@ -0,0 +1 @@
+export { default } from './PaymentWidget'
diff --git a/components/checkout/ShippingView/ShippingView.module.css b/components/checkout/ShippingView/ShippingView.module.css
new file mode 100644
index 000000000..157d3174e
--- /dev/null
+++ b/components/checkout/ShippingView/ShippingView.module.css
@@ -0,0 +1,21 @@
+.fieldset {
+ @apply flex flex-col my-3;
+}
+
+.fieldset .label {
+ @apply text-accent-7 uppercase text-xs font-medium mb-2;
+}
+
+.fieldset .input,
+.fieldset .select {
+ @apply p-2 border border-accent-2 w-full text-sm font-normal;
+}
+
+.fieldset .input:focus,
+.fieldset .select:focus {
+ @apply outline-none shadow-outline-normal;
+}
+
+.radio {
+ @apply bg-black;
+}
diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx
new file mode 100644
index 000000000..1d03a2aac
--- /dev/null
+++ b/components/checkout/ShippingView/ShippingView.tsx
@@ -0,0 +1,78 @@
+import { FC } from 'react'
+import cn from 'classnames'
+import s from './ShippingView.module.css'
+import Button from '@components/ui/Button'
+import { useUI } from '@components/ui/context'
+import SidebarLayout from '@components/common/SidebarLayout'
+
+const PaymentMethodView: FC = () => {
+ const { setSidebarView } = useUI()
+
+ return (
+
+
+
+
+
+
+ + Shipping +
+
+
+
+
+
+ Same as billing address
+
+
+
+
+ Use a different shipping address
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ShippingWidget
diff --git a/components/checkout/ShippingWidget/index.ts b/components/checkout/ShippingWidget/index.ts
new file mode 100644
index 000000000..88e6dca4b
--- /dev/null
+++ b/components/checkout/ShippingWidget/index.ts
@@ -0,0 +1 @@
+export { default } from './ShippingWidget'
diff --git a/components/common/Avatar/Avatar.tsx b/components/common/Avatar/Avatar.tsx
index 6ea72abb2..663538450 100644
--- a/components/common/Avatar/Avatar.tsx
+++ b/components/common/Avatar/Avatar.tsx
@@ -1,6 +1,5 @@
-import cn from 'classnames'
-import { FC, useState, useMemo, useRef, useEffect } from 'react'
-import { getRandomPairOfColors } from '@lib/colors'
+import { FC, useRef, useEffect } from 'react'
+import { useUserAvatar } from '@lib/hooks/useUserAvatar'
interface Props {
className?: string
@@ -8,19 +7,14 @@ interface Props {
}
const Avatar: FC
+
+ San Franssisco, California + */} +
+ + San Franssisco, California + */} +
+
+
{/* Add an image - We're generating a gradient as placeholder ![]()
*/}
diff --git a/components/common/Footer/Footer.module.css b/components/common/Footer/Footer.module.css
index 259318ecf..2ba492086 100644
--- a/components/common/Footer/Footer.module.css
+++ b/components/common/Footer/Footer.module.css
@@ -1,3 +1,7 @@
+.root {
+ @apply border-t border-accent-2;
+}
+
.link {
& > svg {
@apply transform duration-75 ease-linear;
diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
index 627530121..04b80404e 100644
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
import cn from 'classnames'
import Link from 'next/link'
import { useRouter } from 'next/router'
-import type { Page } from '@framework/api/operations/get-all-pages'
+import type { Page } from '@commerce/types/page'
import getSlug from '@lib/get-slug'
import { Github, Vercel } from '@components/icons'
import { Logo, Container } from '@components/ui'
@@ -15,79 +15,50 @@ interface Props {
pages?: Page[]
}
-const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
+const links = [
+ {
+ name: 'Home',
+ url: '/',
+ },
+]
const Footer: FC