{options.map((option: ItemOption, i: number) => (
@@ -148,8 +154,8 @@ const CartItem = ({
value={quantity}
handleRemove={handleRemove}
handleChange={handleChange}
- increase={() => increaseQuantity(1)}
- decrease={() => increaseQuantity(-1)}
+ increase={() => updateQuantity(1)}
+ decrease={() => updateQuantity(-1)}
/>
)}
diff --git a/services/frontend/site/components/cart/CartItem/index.ts b/services/frontend/components/cart/CartItem/index.ts
similarity index 100%
rename from services/frontend/site/components/cart/CartItem/index.ts
rename to services/frontend/components/cart/CartItem/index.ts
diff --git a/services/frontend/site/components/cart/CartSidebarView/CartSidebarView.module.css b/services/frontend/components/cart/CartSidebarView/CartSidebarView.module.css
similarity index 100%
rename from services/frontend/site/components/cart/CartSidebarView/CartSidebarView.module.css
rename to services/frontend/components/cart/CartSidebarView/CartSidebarView.module.css
diff --git a/services/frontend/components/cart/CartSidebarView/CartSidebarView.tsx b/services/frontend/components/cart/CartSidebarView/CartSidebarView.tsx
new file mode 100644
index 00000000..557e8dd0
--- /dev/null
+++ b/services/frontend/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -0,0 +1,133 @@
+import cn from 'clsx'
+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 '@lib/CartContext'
+import usePrice from '@lib/hooks/usePrice'
+import SidebarLayout from '@components/common/SidebarLayout'
+
+const CartSidebarView: FC = () => {
+ const { closeSidebar, setSidebarView } = useUI()
+ const { cart } = useCart()
+
+ const { price: subTotal } = usePrice(
+ cart && {
+ amount: Number(cart.subtotalPrice),
+ currencyCode: cart.currency.code,
+ }
+ )
+ const { price: total } = usePrice(
+ cart && {
+ amount: Number(cart.totalPrice),
+ currencyCode: cart.currency.code,
+ }
+ )
+ const handleClose = () => closeSidebar()
+ const goToCheckout = () => setSidebarView('CHECKOUT_VIEW')
+
+ const error = null
+ const success = null
+
+ return (
+
+ {!cart || !cart.lineItems.length ? (
+
+ )
+}
+
+export default CartSidebarView
diff --git a/services/frontend/site/components/cart/CartSidebarView/index.ts b/services/frontend/components/cart/CartSidebarView/index.ts
similarity index 100%
rename from services/frontend/site/components/cart/CartSidebarView/index.ts
rename to services/frontend/components/cart/CartSidebarView/index.ts
diff --git a/services/frontend/site/components/cart/index.ts b/services/frontend/components/cart/index.ts
similarity index 100%
rename from services/frontend/site/components/cart/index.ts
rename to services/frontend/components/cart/index.ts
diff --git a/services/frontend/site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/services/frontend/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
similarity index 100%
rename from services/frontend/site/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
rename to services/frontend/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
diff --git a/services/frontend/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/services/frontend/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
new file mode 100644
index 00000000..28d14ce8
--- /dev/null
+++ b/services/frontend/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
@@ -0,0 +1,208 @@
+import Link from 'next/link'
+import { FC, useState } from 'react'
+import cn from 'clsx'
+import { datadogRum } from '@datadog/browser-rum'
+
+import CartItem from '@components/cart/CartItem'
+import { Button, Text } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import SidebarLayout from '@components/common/SidebarLayout'
+import { useCart } from '@lib/CartContext'
+import usePrice from '@lib/hooks/usePrice'
+import ShippingWidget from '../ShippingWidget'
+import PaymentWidget from '../PaymentWidget'
+import { useCheckoutContext } from '../context'
+
+import s from './CheckoutSidebarView.module.css'
+
+const CheckoutSidebarView: FC = () => {
+ const [loadingSubmit, setLoadingSubmit] = useState(false)
+ const [discountInput, setDiscountInput] = useState('')
+ const [checkoutError, setCheckoutError] = useState(null)
+ const { setSidebarView, closeSidebar } = useUI()
+ const { cart: cartData, cartEmpty, cartInit } = useCart()
+ const {
+ shippingRate,
+ addressStatus,
+ paymentStatus,
+ clearCheckoutFields,
+ handleCompleteCheckout,
+ } = useCheckoutContext()
+
+ const { price: subTotal } = usePrice(
+ cartData && {
+ amount: Number(cartData.subtotalPrice),
+ currencyCode: cartData.currency.code,
+ }
+ )
+ const { price: total } = usePrice(
+ cartData && {
+ amount: Number(cartData.totalPrice),
+ currencyCode: cartData.currency.code,
+ }
+ )
+
+ async function handleSubmit(event: React.ChangeEvent) {
+ try {
+ setLoadingSubmit(true)
+ event.preventDefault()
+
+ const res = await handleCompleteCheckout()
+ if (res.error) {
+ throw res.error
+ }
+
+ datadogRum.addAction('Successful Checkout', {
+ id: cartData.id,
+ cartTotal: cartData.totalPrice,
+ createdAt: cartData.createdAt,
+ discounts: cartData.discounts,
+ lineItems: cartData.lineItems,
+ })
+
+ clearCheckoutFields()
+ setLoadingSubmit(false)
+ await cartEmpty()
+ await cartInit()
+ setSidebarView('ORDER_CONFIRM_VIEW')
+ } catch (e) {
+ console.log(e)
+ setCheckoutError(e)
+ setLoadingSubmit(false)
+ }
+ }
+
+ async function handleDiscount(event: React.ChangeEvent) {
+ event.preventDefault()
+
+ if (!discountInput) {
+ console.error('No discount input!')
+ return
+ }
+
+ try {
+ const discountPath = `${process.env.NEXT_PUBLIC_DISCOUNTS_ROUTE}:${process.env.NEXT_PUBLIC_DISCOUNTS_PORT}`
+ const discountCode = discountInput.toUpperCase()
+ // call discounts service
+ const res = await fetch(
+ `${discountPath}/discount-code?discount_code=${discountCode}`
+ )
+ const discount = await res.json()
+
+ if (discount?.error) {
+ throw 'No discount found!'
+ }
+
+ console.log('discount accepted', discount)
+ setDiscountInput('')
+ } catch (err) {
+ console.error(err)
+ }
+ }
+
+ return (
+ setSidebarView('CART_VIEW')}
+ >
+
+ )
+}
+
+export default CheckoutSidebarView
diff --git a/services/frontend/site/components/checkout/CheckoutSidebarView/index.ts b/services/frontend/components/checkout/CheckoutSidebarView/index.ts
similarity index 100%
rename from services/frontend/site/components/checkout/CheckoutSidebarView/index.ts
rename to services/frontend/components/checkout/CheckoutSidebarView/index.ts
diff --git a/services/frontend/site/components/checkout/OrderConfirmView/OrderConfirmView.module.css b/services/frontend/components/checkout/OrderConfirmView/OrderConfirmView.module.css
similarity index 100%
rename from services/frontend/site/components/checkout/OrderConfirmView/OrderConfirmView.module.css
rename to services/frontend/components/checkout/OrderConfirmView/OrderConfirmView.module.css
diff --git a/services/frontend/site/components/checkout/OrderConfirmView/OrderConfirmView.tsx b/services/frontend/components/checkout/OrderConfirmView/OrderConfirmView.tsx
similarity index 100%
rename from services/frontend/site/components/checkout/OrderConfirmView/OrderConfirmView.tsx
rename to services/frontend/components/checkout/OrderConfirmView/OrderConfirmView.tsx
diff --git a/services/frontend/site/components/checkout/OrderConfirmView/index.ts b/services/frontend/components/checkout/OrderConfirmView/index.ts
similarity index 100%
rename from services/frontend/site/components/checkout/OrderConfirmView/index.ts
rename to services/frontend/components/checkout/OrderConfirmView/index.ts
diff --git a/services/frontend/site/components/checkout/PaymentMethodView/PaymentMethodView.module.css b/services/frontend/components/checkout/PaymentMethodView/PaymentMethodView.module.css
similarity index 100%
rename from services/frontend/site/components/checkout/PaymentMethodView/PaymentMethodView.module.css
rename to services/frontend/components/checkout/PaymentMethodView/PaymentMethodView.module.css
diff --git a/services/frontend/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/services/frontend/components/checkout/PaymentMethodView/PaymentMethodView.tsx
new file mode 100644
index 00000000..7f2eda58
--- /dev/null
+++ b/services/frontend/components/checkout/PaymentMethodView/PaymentMethodView.tsx
@@ -0,0 +1,123 @@
+import { FC, useState, useEffect } from 'react'
+import cn from 'clsx'
+import { Button, Text } from '@components/ui'
+import { useUI } from '@components/ui/context'
+import SidebarLayout from '@components/common/SidebarLayout'
+import { useCheckoutContext } from '@components/checkout/context'
+
+import s from './PaymentMethodView.module.css'
+
+const PaymentMethodView: FC = () => {
+ const { setSidebarView } = useUI()
+ const { cardFields, setCardFields, paymentStatus } = useCheckoutContext()
+
+ const [formData, setFormData] = useState({
+ name: cardFields.source_attributes.name || '',
+ number: cardFields.source_attributes.number || '',
+ month: cardFields.source_attributes.month || '',
+ year: cardFields.source_attributes.year || '',
+ verification_value: cardFields.source_attributes.verification_value || '',
+ })
+
+ function handleChange(event: React.ChangeEvent) {
+ const target = event.target
+ const value = target.value
+ const name = target.name
+ setFormData((prevFormData) => ({
+ ...prevFormData,
+ [name]: value,
+ }))
+ }
+
+ async function handleSubmit(event: React.ChangeEvent) {
+ event.preventDefault()
+
+ const cardFields = {
+ payment_method_id: '1',
+ source_attributes: {
+ name: formData.name,
+ number: formData.number,
+ month: formData.month,
+ year: formData.year,
+ verification_value: formData.verification_value,
+ cc_type: 'visa',
+ },
+ }
+
+ setCardFields(cardFields)
+ setSidebarView('CHECKOUT_VIEW')
+ }
+
+ return (
+
+ )
+}
+
+export default PaymentMethodView
diff --git a/services/frontend/site/components/checkout/PaymentMethodView/index.ts b/services/frontend/components/checkout/PaymentMethodView/index.ts
similarity index 100%
rename from services/frontend/site/components/checkout/PaymentMethodView/index.ts
rename to services/frontend/components/checkout/PaymentMethodView/index.ts
diff --git a/services/frontend/site/components/checkout/PaymentWidget/PaymentWidget.module.css b/services/frontend/components/checkout/PaymentWidget/PaymentWidget.module.css
similarity index 100%
rename from services/frontend/site/components/checkout/PaymentWidget/PaymentWidget.module.css
rename to services/frontend/components/checkout/PaymentWidget/PaymentWidget.module.css
diff --git a/services/frontend/site/components/checkout/PaymentWidget/PaymentWidget.tsx b/services/frontend/components/checkout/PaymentWidget/PaymentWidget.tsx
similarity index 83%
rename from services/frontend/site/components/checkout/PaymentWidget/PaymentWidget.tsx
rename to services/frontend/components/checkout/PaymentWidget/PaymentWidget.tsx
index 9b496bb4..ab644301 100644
--- a/services/frontend/site/components/checkout/PaymentWidget/PaymentWidget.tsx
+++ b/services/frontend/components/checkout/PaymentWidget/PaymentWidget.tsx
@@ -8,9 +8,6 @@ interface ComponentProps {
}
const PaymentWidget: FC = ({ onClick, isValid }) => {
- /* Shipping Address
- Only available with checkout set to true -
- This means that the provider does offer checkout functionality. */
return (
)
}
diff --git a/services/frontend/site/components/checkout/PaymentWidget/index.ts b/services/frontend/components/checkout/PaymentWidget/index.ts
similarity index 100%
rename from services/frontend/site/components/checkout/PaymentWidget/index.ts
rename to services/frontend/components/checkout/PaymentWidget/index.ts
diff --git a/services/frontend/site/components/checkout/ShippingView/ShippingView.module.css b/services/frontend/components/checkout/ShippingView/ShippingView.module.css
similarity index 100%
rename from services/frontend/site/components/checkout/ShippingView/ShippingView.module.css
rename to services/frontend/components/checkout/ShippingView/ShippingView.module.css
diff --git a/services/frontend/components/checkout/ShippingView/ShippingView.tsx b/services/frontend/components/checkout/ShippingView/ShippingView.tsx
new file mode 100644
index 00000000..3ebd2b7c
--- /dev/null
+++ b/services/frontend/components/checkout/ShippingView/ShippingView.tsx
@@ -0,0 +1,195 @@
+import { FC, useState, useEffect } from 'react'
+import cn from 'clsx'
+
+import Button from '@components/ui/Button'
+import { useUI } from '@components/ui/context'
+import SidebarLayout from '@components/common/SidebarLayout'
+import { useCheckoutContext } from '@components/checkout/context'
+
+import s from './ShippingView.module.css'
+
+import countryIsoCodes from '../../../config/country_iso_codes.json'
+
+const ShippingView: FC = () => {
+ const { setSidebarView } = useUI()
+ const { addressFields, setAddressFields, addressStatus } =
+ useCheckoutContext()
+
+ const [formData, setFormData] = useState({
+ firstname: addressFields.firstname || '',
+ lastname: addressFields.lastname || '',
+ email: addressFields.email || '',
+ address1: addressFields.address1 || '',
+ address2: addressFields.address2 || '',
+ zipcode: addressFields.zipcode || '',
+ city: addressFields.city || '',
+ phone: addressFields.phone || '',
+ state_name: addressFields.state_name || '',
+ country_iso: addressFields.country_iso || 'US',
+ })
+
+ function handleChange(event: React.ChangeEvent) {
+ const target = event.target
+ const value = target.value
+ const name = target.name
+
+ setFormData((prevFormData) => ({
+ ...prevFormData,
+ [name]: value,
+ }))
+ }
+
+ async function handleSubmit(event: React.ChangeEvent) {
+ event.preventDefault()
+
+ const addressFields = {
+ firstname: formData.firstname,
+ lastname: formData.lastname,
+ email: formData.email,
+ address1: formData.address1,
+ address2: formData.address2,
+ zipcode: formData.zipcode,
+ city: formData.city,
+ phone: formData.phone,
+ state_name: formData.state_name,
+ country_iso: formData.country_iso,
+ }
+
+ setAddressFields(addressFields)
+ setSidebarView('CHECKOUT_VIEW')
+ }
+
+ return (
+
+ )
+}
+
+export default ShippingView
diff --git a/services/frontend/site/components/checkout/ShippingView/index.ts b/services/frontend/components/checkout/ShippingView/index.ts
similarity index 100%
rename from services/frontend/site/components/checkout/ShippingView/index.ts
rename to services/frontend/components/checkout/ShippingView/index.ts
diff --git a/services/frontend/site/components/checkout/ShippingWidget/ShippingWidget.module.css b/services/frontend/components/checkout/ShippingWidget/ShippingWidget.module.css
similarity index 100%
rename from services/frontend/site/components/checkout/ShippingWidget/ShippingWidget.module.css
rename to services/frontend/components/checkout/ShippingWidget/ShippingWidget.module.css
diff --git a/services/frontend/site/components/checkout/ShippingWidget/ShippingWidget.tsx b/services/frontend/components/checkout/ShippingWidget/ShippingWidget.tsx
similarity index 72%
rename from services/frontend/site/components/checkout/ShippingWidget/ShippingWidget.tsx
rename to services/frontend/components/checkout/ShippingWidget/ShippingWidget.tsx
index 1418a2b5..75f37064 100644
--- a/services/frontend/site/components/checkout/ShippingWidget/ShippingWidget.tsx
+++ b/services/frontend/components/checkout/ShippingWidget/ShippingWidget.tsx
@@ -8,9 +8,6 @@ interface ComponentProps {
}
const ShippingWidget: FC = ({ onClick, isValid }) => {
- /* Shipping Address
- Only available with checkout set to true -
- This means that the provider does offer checkout functionality. */
return (
)
}
diff --git a/services/frontend/site/components/checkout/ShippingWidget/index.ts b/services/frontend/components/checkout/ShippingWidget/index.ts
similarity index 100%
rename from services/frontend/site/components/checkout/ShippingWidget/index.ts
rename to services/frontend/components/checkout/ShippingWidget/index.ts
diff --git a/services/frontend/components/checkout/context.tsx b/services/frontend/components/checkout/context.tsx
new file mode 100644
index 00000000..169e7ba0
--- /dev/null
+++ b/services/frontend/components/checkout/context.tsx
@@ -0,0 +1,319 @@
+import React, {
+ FC,
+ useState,
+ useEffect,
+ useCallback,
+ useMemo,
+ useReducer,
+ useContext,
+ createContext,
+} from 'react'
+
+import { datadogRum } from '@datadog/browser-rum'
+
+import {
+ listPaymentMethods,
+ listShippingRates,
+ updateCheckout,
+ completeCheckout,
+} from '@lib/api/checkout'
+import { useCart } from '@lib/CartContext'
+import type {
+ PaymentAttributes,
+ AddressAttributes,
+ ShippingRateAttributes,
+} from '@customTypes/checkout'
+
+export type State = {
+ cardFields: PaymentAttributes
+ addressFields: AddressAttributes
+}
+
+type CheckoutContextType = State & {
+ shippingRate: any
+ addressStatus: {
+ ok: boolean | null
+ message: any
+ }
+ paymentStatus: {
+ ok: boolean | null
+ message: any
+ }
+ setCardFields: (cardFields: PaymentAttributes) => void
+ setAddressFields: (addressFields: AddressAttributes) => void
+ clearCheckoutFields: () => void
+ handleCompleteCheckout: () => void
+}
+
+type Action =
+ | {
+ type: 'SET_CARD_FIELDS'
+ card: PaymentAttributes
+ }
+ | {
+ type: 'SET_ADDRESS_FIELDS'
+ address: AddressAttributes
+ }
+ | {
+ type: 'CLEAR_CHECKOUT_FIELDS'
+ }
+
+const initialState: State = {
+ cardFields: {
+ payment_method_id: '1',
+ source_attributes: {
+ name: 'Jade Angelou',
+ number: '4111111111111111',
+ month: '01',
+ year: '2027',
+ verification_value: '123',
+ },
+ } as PaymentAttributes,
+ addressFields: {
+ firstname: 'Jade',
+ lastname: 'Angelou',
+ email: 'jade@ddtraining.datadoghq.com',
+ address1: '32 Stenson Drive',
+ address2: '',
+ zipcode: '94016',
+ city: 'San Francisco',
+ phone: '555-555-5555',
+ state_name: 'CA',
+ country_iso: 'US',
+ } as AddressAttributes,
+}
+
+export const CheckoutContext = createContext(initialState)
+
+CheckoutContext.displayName = 'CheckoutContext'
+
+const checkoutReducer = (state: State, action: Action): State => {
+ switch (action.type) {
+ case 'SET_CARD_FIELDS':
+ return {
+ ...state,
+ cardFields: action.card,
+ }
+ case 'SET_ADDRESS_FIELDS':
+ return {
+ ...state,
+ addressFields: action.address,
+ }
+ case 'CLEAR_CHECKOUT_FIELDS':
+ return {
+ ...state,
+ cardFields: initialState.cardFields,
+ addressFields: initialState.addressFields,
+ }
+ default:
+ return state
+ }
+}
+
+export const CheckoutProvider: FC = (props) => {
+ const [state, dispatch] = useReducer(checkoutReducer, initialState)
+ const [paymentMethods, setPaymentMethods] = useState([])
+ const [shippingRate, setShippingRate] = useState<{
+ id: string
+ selected_rate_id: string
+ price: number
+ } | null>(null)
+ const [addressStatus, setAddressError] = useState({ ok: null, message: null })
+ const [paymentStatus, setPaymentError] = useState({ ok: null, message: null })
+ const { cart, cartToken, cartUser } = useCart()
+
+ const getPaymentMethods = useCallback(async () => {
+ // get payment methods
+ const paymentMethods = await listPaymentMethods({ order_token: cartToken })
+ // set payment methods
+ setPaymentMethods(paymentMethods)
+ }, [cartToken, setPaymentMethods])
+
+ const getShippingRates = useCallback(async () => {
+ // get shipping rates
+ const shippingRates = await listShippingRates({ order_token: cartToken })
+
+ setShippingRate({
+ id: shippingRates.data[0].id,
+ selected_rate_id:
+ shippingRates.data[0].relationships.selected_shipping_rate.data.id,
+ price: Number(shippingRates.data[0].attributes.final_price).toFixed(2),
+ })
+ }, [cartToken, setShippingRate])
+
+ const updateAddress = useCallback(
+ async (address: AddressAttributes) => {
+ try {
+ const updatedCheckout = await updateCheckout({
+ order_token: cartToken,
+ order: {
+ email: address.email,
+ bill_address_attributes: address,
+ ship_address_attributes: address,
+ },
+ })
+
+ if (updatedCheckout.error) {
+ throw updatedCheckout.error
+ }
+
+ await getShippingRates()
+
+ setAddressError({ ok: true, message: null })
+ } catch (error) {
+ console.log(error)
+ setAddressError({ ok: false, message: error })
+ }
+ },
+ [cartToken, getShippingRates]
+ )
+
+ const handleCompleteCheckout = useCallback(async () => {
+ try {
+ const completedCheckout = await completeCheckout({
+ order_token: cartToken,
+ })
+ return completedCheckout
+ } catch (error) {
+ console.log(error)
+ }
+ }, [cartToken])
+
+ const updatePayment = useCallback(
+ async (payment: PaymentAttributes) => {
+ try {
+ const updatedCheckout = await updateCheckout({
+ order_token: cartToken,
+ order: {
+ payments_attributes: [payment],
+ },
+ })
+ setPaymentError({ ok: true, message: null })
+ } catch (error) {
+ console.log(error)
+ setPaymentError({ ok: false, message: error })
+ }
+ },
+ [cartToken]
+ )
+
+ const updateShipping = useCallback(
+ async (shippingRate: ShippingRateAttributes) => {
+ try {
+ const updatedCheckout = await updateCheckout({
+ order_token: cartToken,
+ order: {
+ shipments_attributes: [
+ {
+ id: shippingRate.id,
+ selected_shipping_rate_id:
+ shippingRate.selected_shipping_rate_id,
+ },
+ ],
+ },
+ })
+ console.log(updatedCheckout)
+ } catch (error) {
+ console.log(error)
+ }
+ },
+ [cartToken]
+ )
+
+ const setCardFields = useCallback(
+ (card: PaymentAttributes) => dispatch({ type: 'SET_CARD_FIELDS', card }),
+ [dispatch]
+ )
+
+ const setAddressFields = useCallback(
+ (address: AddressAttributes) =>
+ dispatch({ type: 'SET_ADDRESS_FIELDS', address }),
+ [dispatch]
+ )
+
+ const clearCheckoutFields = useCallback(
+ () => dispatch({ type: 'CLEAR_CHECKOUT_FIELDS' }),
+ [dispatch]
+ )
+
+ const cardFields = useMemo(() => state.cardFields, [state.cardFields])
+
+ const addressFields = useMemo(
+ () => state.addressFields,
+ [state.addressFields]
+ )
+
+ useEffect(() => {
+ if (cartToken) {
+ getPaymentMethods()
+ }
+ }, [cartToken, getPaymentMethods])
+
+ useEffect(() => {
+ if (cartToken && cart?.lineItems.length && addressFields.country_iso) {
+ updateAddress(addressFields)
+ }
+ }, [cart, cartToken, addressFields, updateAddress])
+
+ useEffect(() => {
+ if (cartToken && cardFields.source_attributes.number) {
+ updatePayment(cardFields)
+ }
+ }, [cartToken, cardFields, updatePayment])
+
+ useEffect(() => {
+ if (cartToken && shippingRate?.id) {
+ updateShipping({
+ id: shippingRate.id,
+ selected_shipping_rate_id: shippingRate.selected_rate_id,
+ })
+ }
+ }, [cartToken, shippingRate, updateShipping])
+
+ // set user name and email based on rum user
+ useEffect(() => {
+ if (cartUser && cartUser.name && cartUser.email) {
+ setAddressFields({
+ ...initialState.addressFields,
+ email: cartUser.email,
+ firstname: cartUser.name.split(' ')[0],
+ lastname: cartUser.name.split(' ')[1],
+ })
+ }
+ }, [cartUser, setAddressFields])
+
+ const value = useMemo(
+ () => ({
+ cardFields,
+ addressFields,
+ shippingRate,
+ addressStatus,
+ paymentStatus,
+ setCardFields,
+ setAddressFields,
+ clearCheckoutFields,
+ handleCompleteCheckout,
+ }),
+ [
+ cardFields,
+ addressFields,
+ shippingRate,
+ addressStatus,
+ paymentStatus,
+ setCardFields,
+ setAddressFields,
+ clearCheckoutFields,
+ handleCompleteCheckout,
+ ]
+ )
+
+ return (CheckoutContext)
+ if (context === undefined) {
+ throw new Error(`useCheckoutContext must be used within a CheckoutProvider`)
+ }
+ return context
+}
diff --git a/services/frontend/components/common/Ad/Ad.tsx b/services/frontend/components/common/Ad/Ad.tsx
new file mode 100644
index 00000000..698c7797
--- /dev/null
+++ b/services/frontend/components/common/Ad/Ad.tsx
@@ -0,0 +1,72 @@
+import { useState, useEffect, useCallback } from 'react'
+import { codeStash } from 'code-stash'
+import config from '../../../featureFlags.config.json'
+
+export interface AdDataResults {
+ data: object | null
+ path: string
+}
+// Advertisement banner
+function Ad() {
+ const [data, setData] = useState(null)
+ const [isLoading, setLoading] = useState(false)
+ const adsPath = `${process.env.NEXT_PUBLIC_ADS_ROUTE}:${process.env.NEXT_PUBLIC_ADS_PORT}`
+ const [codeFlag, setCodeFlag] = useState(false)
+
+ const getRandomArbitrary = useCallback((min: number, max: number) => {
+ return Math.floor(Math.random() * (max - min) + min)
+ }, [])
+
+ const fetchAd = useCallback(
+ (flag: boolean) => {
+ const headers = {
+ 'X-Throw-Error': `${flag}`,
+ }
+ fetch(`${adsPath}/ads`, { headers })
+ .then((res) => res.json())
+ .then((data) => {
+ const index = getRandomArbitrary(0, data.length)
+ setData(data[index])
+ })
+ .catch((e) => console.error(e.message))
+ .finally(() => {
+ setLoading(false)
+ })
+ },
+ [adsPath, getRandomArbitrary, setData, setLoading]
+ )
+
+ useEffect(() => {
+ setLoading(true)
+ // check for config file, then grab feature flags
+ if (config) {
+ codeStash('error-tracking', { file: config })
+ .then((r: boolean) => {
+ setCodeFlag(r)
+ })
+ .catch((e: Error) => console.log(e))
+ }
+
+ // Fetch ad with error
+ codeFlag && fetchAd(true)
+
+ // Fetch normal ad
+ !codeFlag && fetchAd(false)
+ }, [codeFlag, fetchAd])
+
+ if (isLoading)
+ return = ({ className, pages = [] }) => {
+ const rootClassName = cn(s.root, className)
+
+ return (
+
+ )
+}
+
+export default Footer
diff --git a/services/frontend/site/components/common/Footer/index.ts b/services/frontend/components/common/Footer/index.ts
similarity index 100%
rename from services/frontend/site/components/common/Footer/index.ts
rename to services/frontend/components/common/Footer/index.ts
diff --git a/services/frontend/site/components/common/Head/Head.tsx b/services/frontend/components/common/Head/Head.tsx
similarity index 100%
rename from services/frontend/site/components/common/Head/Head.tsx
rename to services/frontend/components/common/Head/Head.tsx
diff --git a/services/frontend/site/components/common/Head/index.ts b/services/frontend/components/common/Head/index.ts
similarity index 100%
rename from services/frontend/site/components/common/Head/index.ts
rename to services/frontend/components/common/Head/index.ts
diff --git a/services/frontend/site/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/services/frontend/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css
similarity index 100%
rename from services/frontend/site/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css
rename to services/frontend/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css
diff --git a/services/frontend/site/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx b/services/frontend/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
similarity index 100%
rename from services/frontend/site/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
rename to services/frontend/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
diff --git a/services/frontend/site/components/common/HomeAllProductsGrid/index.ts b/services/frontend/components/common/HomeAllProductsGrid/index.ts
similarity index 100%
rename from services/frontend/site/components/common/HomeAllProductsGrid/index.ts
rename to services/frontend/components/common/HomeAllProductsGrid/index.ts
diff --git a/services/frontend/site/components/common/I18nWidget/I18nWidget.module.css b/services/frontend/components/common/I18nWidget/I18nWidget.module.css
similarity index 100%
rename from services/frontend/site/components/common/I18nWidget/I18nWidget.module.css
rename to services/frontend/components/common/I18nWidget/I18nWidget.module.css
diff --git a/services/frontend/site/components/common/I18nWidget/I18nWidget.tsx b/services/frontend/components/common/I18nWidget/I18nWidget.tsx
similarity index 100%
rename from services/frontend/site/components/common/I18nWidget/I18nWidget.tsx
rename to services/frontend/components/common/I18nWidget/I18nWidget.tsx
diff --git a/services/frontend/site/components/common/I18nWidget/index.ts b/services/frontend/components/common/I18nWidget/index.ts
similarity index 100%
rename from services/frontend/site/components/common/I18nWidget/index.ts
rename to services/frontend/components/common/I18nWidget/index.ts
diff --git a/services/frontend/site/components/common/Layout/Layout.module.css b/services/frontend/components/common/Layout/Layout.module.css
similarity index 100%
rename from services/frontend/site/components/common/Layout/Layout.module.css
rename to services/frontend/components/common/Layout/Layout.module.css
diff --git a/services/frontend/components/common/Layout/Layout.tsx b/services/frontend/components/common/Layout/Layout.tsx
new file mode 100644
index 00000000..bd696b65
--- /dev/null
+++ b/services/frontend/components/common/Layout/Layout.tsx
@@ -0,0 +1,140 @@
+import { useState, useEffect, useCallback } from 'react'
+import cn from 'clsx'
+import s from './Layout.module.css'
+import dynamic from 'next/dynamic'
+// import LoginView from '@components/auth/LoginView'
+import { useUI } from '@components/ui/context'
+import { Navbar, Footer } from '@components/common'
+import ShippingView from '@components/checkout/ShippingView'
+import CartSidebarView from '@components/cart/CartSidebarView'
+import { Sidebar, Button, LoadingDots } from '@components/ui'
+import PaymentMethodView from '@components/checkout/PaymentMethodView'
+import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
+import OrderConfirmView from '@components/checkout/OrderConfirmView'
+import { CheckoutProvider } from '@components/checkout/context'
+import { MenuSidebarView } from '@components/common/UserNav'
+import Discount from '@components/common/Discount'
+import Ad from '@components/common/Ad'
+import type { Page } from '@customTypes/page'
+import type { Link as LinkProps } from '../UserNav/MenuSidebarView'
+import Pages from 'pages/[...pages]'
+
+const Loading = () => (
+
+ {/* {modalView === 'LOGIN_VIEW' &&
+ )
+}
+
+const ModalUI: React.FC = () => {
+ const { displayModal, closeModal, modalView } = useUI()
+ return displayModal ? (
+
+ {sidebarView === 'CART_VIEW' &&
+ )
+}
+
+const SidebarUI: React.FC<{}> = ({}) => {
+ const { displaySidebar, closeSidebar, sidebarView } = useUI()
+ return displaySidebar ? (
+ = ({ children, pageProps: { ...pageProps } }) => {
+ const [pages, setPages] = useState([])
+
+ useEffect(() => {
+ getLinks()
+ }, [])
+
+ async function getLinks() {
+ try {
+ const baseUrl = '/api'
+
+ const res = await fetch(`${baseUrl}/pages`)
+
+ if (!res.ok) {
+ throw res
+ }
+
+ const pages: Page[] = await res.json()
+
+ setPages(pages)
+ } catch (errorRes) {
+ const error = await errorRes.json()
+ console.error(error)
+ }
+ }
+
+ return (
+ = ({}) => {
+ // Set the input value from the form to state
+ const [inputValue, setInputValue] = useState()
+ const [showWarningMessage, setShowWarningMessage] = useState(false)
+ const [showEmailInput, setShowEmailInput] = useState(true)
+ const [xssFlag, setXssFlag] = useState()
+ const [dbmFlag, setDbmFlag] = useState()
+ const [userEmail, setUserEmail] = useState()
+ const [productInfo, setProductInfo] = useState
-
+
+
+ ) : error ? (
+ + Your cart is empty +
++ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +
+
+
+
+ ) : success ? (
+ + We couldn't process the purchase. Please check your card information + and try again. +
+
+
+
+ ) : (
+ <>
+ + Thank you for your order. +
+
+
+
+
+ My Cart
+
+
+
+
+
+ -
+ {cart?.lineItems.map((item: any) => (
+
+
+
+ )}
+ -
+
- + Subtotal + {subTotal} + +
- + Taxes + Calculated at checkout + +
- + Shipping + + {Number(cart?.shipTotal).toFixed(2) || 'TBD'} + + +
+ Total
+ {total}
+
+
+
+
+
+ Checkout
+ {checkoutError && (
+ setSidebarView('PAYMENT_VIEW')}
+ />
+ setSidebarView('SHIPPING_VIEW')}
+ />
+
+
+
+
+
+ {checkoutError}
+
+ )}
+
+ -
+ {cartData?.lineItems.map((item: any) => (
+
@@ -21,6 +18,9 @@ const PaymentWidget: FC = ({ onClick, isValid }) => {
{/* VISA #### #### #### 2345 */}
{isValid ?
+ {/*
+
*/}
@@ -18,12 +15,11 @@ const ShippingWidget: FC = ({ onClick, isValid }) => {
Add Shipping Address
- {/*
- 1046 Kearny Street.
- San Franssisco, California - */}
- San Franssisco, California - */}
{isValid ?
+ {/*
+
*/}
AD HERE
+ if (!data)
+ return AD HERE
+
+ return (
+
+
+ 
+
+
+ )
+}
+
+export default Ad
diff --git a/services/frontend/site/components/common/Ad/index.ts b/services/frontend/components/common/Ad/index.ts
similarity index 100%
rename from services/frontend/site/components/common/Ad/index.ts
rename to services/frontend/components/common/Ad/index.ts
diff --git a/services/frontend/site/components/common/Avatar/Avatar.tsx b/services/frontend/components/common/Avatar/Avatar.tsx
similarity index 100%
rename from services/frontend/site/components/common/Avatar/Avatar.tsx
rename to services/frontend/components/common/Avatar/Avatar.tsx
diff --git a/services/frontend/site/components/common/Avatar/index.ts b/services/frontend/components/common/Avatar/index.ts
similarity index 100%
rename from services/frontend/site/components/common/Avatar/index.ts
rename to services/frontend/components/common/Avatar/index.ts
diff --git a/services/frontend/site/components/common/Discount/Discount.tsx b/services/frontend/components/common/Discount/Discount.tsx
similarity index 100%
rename from services/frontend/site/components/common/Discount/Discount.tsx
rename to services/frontend/components/common/Discount/Discount.tsx
diff --git a/services/frontend/site/components/common/Discount/index.ts b/services/frontend/components/common/Discount/index.ts
similarity index 100%
rename from services/frontend/site/components/common/Discount/index.ts
rename to services/frontend/components/common/Discount/index.ts
diff --git a/services/frontend/site/components/common/FeatureBar/FeatureBar.module.css b/services/frontend/components/common/FeatureBar/FeatureBar.module.css
similarity index 100%
rename from services/frontend/site/components/common/FeatureBar/FeatureBar.module.css
rename to services/frontend/components/common/FeatureBar/FeatureBar.module.css
diff --git a/services/frontend/site/components/common/FeatureBar/FeatureBar.tsx b/services/frontend/components/common/FeatureBar/FeatureBar.tsx
similarity index 100%
rename from services/frontend/site/components/common/FeatureBar/FeatureBar.tsx
rename to services/frontend/components/common/FeatureBar/FeatureBar.tsx
diff --git a/services/frontend/site/components/common/FeatureBar/index.ts b/services/frontend/components/common/FeatureBar/index.ts
similarity index 100%
rename from services/frontend/site/components/common/FeatureBar/index.ts
rename to services/frontend/components/common/FeatureBar/index.ts
diff --git a/services/frontend/site/components/common/Footer/Footer.module.css b/services/frontend/components/common/Footer/Footer.module.css
similarity index 100%
rename from services/frontend/site/components/common/Footer/Footer.module.css
rename to services/frontend/components/common/Footer/Footer.module.css
diff --git a/services/frontend/components/common/Footer/Footer.tsx b/services/frontend/components/common/Footer/Footer.tsx
new file mode 100644
index 00000000..1590bc69
--- /dev/null
+++ b/services/frontend/components/common/Footer/Footer.tsx
@@ -0,0 +1,79 @@
+import React, { FC, useState, useEffect } from 'react'
+import cn from 'clsx'
+import Link from 'next/link'
+import { Logo, Container } from '@components/ui'
+import s from './Footer.module.css'
+
+import { Page } from '@customTypes/page'
+
+interface Props {
+ className?: string
+ children?: any
+ pages?: Page[]
+}
+
+const links = [
+ {
+ name: 'Home',
+ url: '/',
+ },
+]
+
+const Footer: FC
+
+)
+
+const dynamicProps = {
+ loading: Loading,
+}
+
+// const SignUpView = dynamic(() => import('@components/auth/SignUpView'), {
+// ...dynamicProps,
+// })
+
+// const ForgotPassword = dynamic(
+// () => import('@components/auth/ForgotPassword'),
+// {
+// ...dynamicProps,
+// }
+// )
+
+const FeatureBar = dynamic(() => import('@components/common/FeatureBar'), {
+ ...dynamicProps,
+})
+
+const Modal = dynamic(() => import('@components/ui/Modal'), {
+ ...dynamicProps,
+ ssr: false,
+})
+
+interface Props {
+ pageProps: any
+}
+
+const ModalView: React.FC<{ modalView: string; closeModal(): any }> = ({
+ modalView,
+ closeModal,
+}) => {
+ return (
+
+ {children}
+
+
+
+ )
+}
+
+export default Layout
diff --git a/services/frontend/site/components/common/Layout/index.ts b/services/frontend/components/common/Layout/index.ts
similarity index 100%
rename from services/frontend/site/components/common/Layout/index.ts
rename to services/frontend/components/common/Layout/index.ts
diff --git a/services/frontend/site/components/common/Navbar/Navbar.module.css b/services/frontend/components/common/Navbar/Navbar.module.css
similarity index 100%
rename from services/frontend/site/components/common/Navbar/Navbar.module.css
rename to services/frontend/components/common/Navbar/Navbar.module.css
diff --git a/services/frontend/components/common/Navbar/Navbar.tsx b/services/frontend/components/common/Navbar/Navbar.tsx
new file mode 100644
index 00000000..b2c0a76f
--- /dev/null
+++ b/services/frontend/components/common/Navbar/Navbar.tsx
@@ -0,0 +1,213 @@
+import { FC, useEffect, useState, useCallback } from 'react'
+import Link from 'next/link'
+import s from './Navbar.module.css'
+import NavbarRoot from './NavbarRoot'
+import { Logo, Container } from '@components/ui'
+import { Searchbar, UserNav } from '@components/common'
+import { codeStash } from 'code-stash'
+import config from '../../../featureFlags.config.json'
+
+let authUrl = `${process.env.NEXT_PUBLIC_AUTH_ROUTE}/email`
+let dbmUrl = `${process.env.NEXT_PUBLIC_DBM_ROUTE}/get-item`
+
+if (process.env.NEXT_PUBLIC_AUTH_PORT) {
+ authUrl = `${process.env.NEXT_PUBLIC_AUTH_ROUTE}:${process.env.NEXT_PUBLIC_AUTH_PORT}/email`
+}
+
+if (process.env.NEXT_PUBLIC_DBM_PORT) {
+ dbmUrl = `${process.env.NEXT_PUBLIC_DBM_ROUTE}:${process.env.NEXT_PUBLIC_DBM_PORT}/get-item`
+}
+
+const Navbar: FC