New Release (#371)

* Custom Checkout Progress * Updates to Checkout * Custom Checkout Progress * Adding tabs * Adding Collapse * Adding Collapse * Improving Sidebar Scroll * Modif footer * Changes * More design updates * sidebar cart * More design updates * More design updates * More design updates * More design updates * Types * Types * Design Updates * More changes * More changes * More changes * Changes * Changes * Changes * New tailwind required changes * Sidebar Styling issues with Mobile * Latest changes - Normalizing cart * Styling Fixes * New changes * Changes * latest * Refactor and Renaming some UI Props * Adding Quantity Component * Adding Rating Component * Rating Component * More updates * User Select disabled, plus hidding horizontal scroll bars * Changes * Adding ProductOptions Component and more helpers * Styling updates * Styling updates * Fix for slim tags * Missmatch with RightArrow * Footer updates and some styles * Latest Updates * Latest Updates * Latest Updates * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Sam backdrop filter * General UI Improvements * General UI Improvements * Search now with Geist Colors * Now with Geist Colors * Changes * Scroll for Mobile on IOs devises * LoadingDots Working (: * Changes * More Changes * Perf changes * More perf changes * Fade to the Nametags in the ProductCard * changes * Search issue ui * Search issue ui * Make sure to only refresh navbar and modals when required * Index revalidate * Fixed image issue * hide album scroll on windows * Fix scrollbar * Changing * Adding 404 with Layout * Removing Toast * Adding Assets * Adding Assets * Progress with LocalProvider * New productTag * Only images for the drop * changes * Empty SWRhooks * Adding Local Provider * Working local * Working view of a LocalProvider * More updates * Changes * Removed react-ticker * default to local if no env available * default to local if no env available * add missing `@` to css import * rewrite search rewrites to multiple pages * allow requests in getStaticProps to execute in parallel * make type import explicit * add a tsconfig.js file * use local provider in tsconfig.js * avoid a circular dependency * Saleor was not in the providers list * avoid circular dependency in bigcommerce * Adding more to the Local Provider (#366) * Adding more data * Adding more data * optimize assets (#370) * Optimize assets (#372) * optimize assets * remove assets * remove assets * cart enabled * Adding saleor * Changes with Webpack * Changes Co-authored-by: Luis Alvarez <luis@vercel.com> Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com> Co-authored-by: Shu Ding <g@shud.in>
2025-07-22 20:26:49 +00:00 · 2021-06-15 20:23:17 -03:00
parent 3c9b90f453
commit 78cc378a72
202 changed files with 15406 additions and 2201 deletions
--- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
+++ 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;
+}
--- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
+++ 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 (
+    <SidebarLayout
+      className={s.root}
+      handleBack={() => setSidebarView('CART_VIEW')}
+    >
+      <div className="px-4 sm:px-6 flex-1">
+        <Link href="/cart">
+          <Text variant="sectionHeading">Checkout</Text>
+        </Link>
+
+        <PaymentWidget onClick={() => setSidebarView('PAYMENT_VIEW')} />
+        <ShippingWidget onClick={() => setSidebarView('SHIPPING_VIEW')} />
+
+        <ul className={s.lineItemsList}>
+          {data!.lineItems.map((item: any) => (
+            <CartItem
+              key={item.id}
+              item={item}
+              currencyCode={data!.currency.code}
+              variant="display"
+            />
+          ))}
+        </ul>
+      </div>
+
+      <div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm">
+        <ul className="pb-2">
+          <li className="flex justify-between py-1">
+            <span>Subtotal</span>
+            <span>{subTotal}</span>
+          </li>
+          <li className="flex justify-between py-1">
+            <span>Taxes</span>
+            <span>Calculated at checkout</span>
+          </li>
+          <li className="flex justify-between py-1">
+            <span>Shipping</span>
+            <span className="font-bold tracking-wide">FREE</span>
+          </li>
+        </ul>
+        <div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-2">
+          <span>Total</span>
+          <span>{total}</span>
+        </div>
+        <div>
+          {/* Once data is correcly filled */}
+          {/* <Button Component="a" width="100%">
+                Confirm Purchase
+              </Button> */}
+          <Button Component="a" width="100%" variant="ghost" disabled>
+            Continue
+          </Button>
+        </div>
+      </div>
+    </SidebarLayout>
+  )
+}
+
+export default CheckoutSidebarView
--- a/components/checkout/CheckoutSidebarView/index.ts
+++ b/components/checkout/CheckoutSidebarView/index.ts
@@ -0,0 +1 @@
+export { default } from './CheckoutSidebarView'
--- a/components/checkout/PaymentMethodView/PaymentMethodView.module.css
+++ 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;
+}
--- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx
+++ 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 (
+    <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
+      <div className="px-4 sm:px-6 flex-1">
+        <Text variant="sectionHeading"> Payment Method</Text>
+        <div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Cardholder Name</label>
+            <input className={s.input} />
+          </div>
+          <div className="grid gap-3 grid-flow-row grid-cols-12">
+            <div className={cn(s.fieldset, 'col-span-7')}>
+              <label className={s.label}>Card Number</label>
+              <input className={s.input} />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-3')}>
+              <label className={s.label}>Expires</label>
+              <input className={s.input} placeholder="MM/YY" />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-2')}>
+              <label className={s.label}>CVC</label>
+              <input className={s.input} />
+            </div>
+          </div>
+          <hr className="border-accent-2 my-6" />
+          <div className="grid gap-3 grid-flow-row grid-cols-12">
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>First Name</label>
+              <input className={s.input} />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>Last Name</label>
+              <input className={s.input} />
+            </div>
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Company (Optional)</label>
+            <input className={s.input} />
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Street and House Number</label>
+            <input className={s.input} />
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
+            <input className={s.input} />
+          </div>
+          <div className="grid gap-3 grid-flow-row grid-cols-12">
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>Postal Code</label>
+              <input className={s.input} />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>City</label>
+              <input className={s.input} />
+            </div>
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Country/Region</label>
+            <select className={s.select}>
+              <option>Hong Kong</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
+        <Button Component="a" width="100%" variant="ghost">
+          Continue
+        </Button>
+      </div>
+    </SidebarLayout>
+  )
+}
+
+export default PaymentMethodView
--- a/components/checkout/PaymentMethodView/index.ts
+++ b/components/checkout/PaymentMethodView/index.ts
@@ -0,0 +1 @@
+export { default } from './PaymentMethodView'
--- a/components/checkout/PaymentWidget/PaymentWidget.module.css
+++ 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;
+}
--- a/components/checkout/PaymentWidget/PaymentWidget.tsx
+++ 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<ComponentProps> = ({ onClick }) => {
+  /* Shipping Address 
+  Only available with checkout set to true - 
+  This means that the provider does offer checkout functionality. */
+  return (
+    <div onClick={onClick} className={s.root}>
+      <div className="flex flex-1 items-center">
+        <CreditCard className="w-5 flex" />
+        <span className="ml-5 text-sm text-center font-medium">
+          Add Payment Method
+        </span>
+        {/* <span>VISA #### #### #### 2345</span> */}
+      </div>
+      <div>
+        <ChevronRight />
+      </div>
+    </div>
+  )
+}
+
+export default PaymentWidget
--- a/components/checkout/PaymentWidget/index.ts
+++ b/components/checkout/PaymentWidget/index.ts
@@ -0,0 +1 @@
+export { default } from './PaymentWidget'
--- a/components/checkout/ShippingView/ShippingView.module.css
+++ 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;
+}
--- a/components/checkout/ShippingView/ShippingView.tsx
+++ 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 (
+    <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
+      <div className="px-4 sm:px-6 flex-1">
+        <h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
+          Shipping
+        </h2>
+        <div>
+          <div className="flex flex-row my-3 items-center">
+            <input className={s.radio} type="radio" />
+            <span className="ml-3 text-sm">Same as billing address</span>
+          </div>
+          <div className="flex flex-row my-3 items-center">
+            <input className={s.radio} type="radio" />
+            <span className="ml-3 text-sm">
+              Use a different shipping address
+            </span>
+          </div>
+          <hr className="border-accent-2 my-6" />
+          <div className="grid gap-3 grid-flow-row grid-cols-12">
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>First Name</label>
+              <input className={s.input} />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>Last Name</label>
+              <input className={s.input} />
+            </div>
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Company (Optional)</label>
+            <input className={s.input} />
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Street and House Number</label>
+            <input className={s.input} />
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
+            <input className={s.input} />
+          </div>
+          <div className="grid gap-3 grid-flow-row grid-cols-12">
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>Postal Code</label>
+              <input className={s.input} />
+            </div>
+            <div className={cn(s.fieldset, 'col-span-6')}>
+              <label className={s.label}>City</label>
+              <input className={s.input} />
+            </div>
+          </div>
+          <div className={s.fieldset}>
+            <label className={s.label}>Country/Region</label>
+            <select className={s.select}>
+              <option>Hong Kong</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
+        <Button Component="a" width="100%" variant="ghost">
+          Continue
+        </Button>
+      </div>
+    </SidebarLayout>
+  )
+}
+
+export default PaymentMethodView
--- a/components/checkout/ShippingView/index.ts
+++ b/components/checkout/ShippingView/index.ts
@@ -0,0 +1 @@
+export { default } from './ShippingView'
--- a/components/checkout/ShippingWidget/ShippingWidget.module.css
+++ 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;
+}
--- a/components/checkout/ShippingWidget/ShippingWidget.tsx
+++ 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<ComponentProps> = ({ onClick }) => {
+  /* Shipping Address 
+  Only available with checkout set to true - 
+  This means that the provider does offer checkout functionality. */
+  return (
+    <div onClick={onClick} className={s.root}>
+      <div className="flex flex-1 items-center">
+        <MapPin className="w-5 flex" />
+        <span className="ml-5 text-sm text-center font-medium">
+          Add Shipping Address
+        </span>
+        {/* <span>
+          1046 Kearny Street.<br/>
+          San Franssisco, California
+        </span> */}
+      </div>
+      <div>
+        <ChevronRight />
+      </div>
+    </div>
+  )
+}
+
+export default ShippingWidget
--- a/components/checkout/ShippingWidget/index.ts
+++ b/components/checkout/ShippingWidget/index.ts
@@ -0,0 +1 @@
+export { default } from './ShippingWidget'
				`@@ -0,0 +1 @@`
				`export { default } from './CheckoutSidebarView'`
				`@@ -0,0 +1 @@`
				`export { default } from './PaymentMethodView'`