Format files

2025-07-22 20:26:49 +00:00 · 2021-09-15 16:57:21 -03:00
parent a29fe7af2b
commit 4e878cb418
25 changed files with 115 additions and 52 deletions
--- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
+++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
@@ -3,25 +3,25 @@ import { FC } from 'react'
 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 '@framework/cart/use-cart'
 import usePrice from '@framework/product/use-price'
-import ShippingWidget from '../ShippingWidget'
 import useCheckout from '@framework/checkout/use-checkout'
+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, closeSidebar } = useUI()
  const { data: cartData } = useCart()
-  const { data: checkoutData, submit: onCheckout } = useCheckout();
+  const { data: checkoutData, submit: onCheckout } = useCheckout()

  async function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
-    event.preventDefault();
+    event.preventDefault()

-    await onCheckout();
+    await onCheckout()

-    closeSidebar();
+    closeSidebar()
  }

  const { price: subTotal } = usePrice(
@@ -47,8 +47,14 @@ const CheckoutSidebarView: FC = () => {
          <Text variant="sectionHeading">Checkout</Text>
        </Link>

-        <PaymentWidget isValid={checkoutData?.hasPayment} onClick={() => setSidebarView('PAYMENT_VIEW')} />
-        <ShippingWidget isValid={checkoutData?.hasShipping} onClick={() => setSidebarView('SHIPPING_VIEW')} />
+        <PaymentWidget
+          isValid={checkoutData?.hasPayment}
+          onClick={() => setSidebarView('PAYMENT_VIEW')}
+        />
+        <ShippingWidget
+          isValid={checkoutData?.hasShipping}
+          onClick={() => setSidebarView('SHIPPING_VIEW')}
+        />

        <ul className={s.lineItemsList}>
          {cartData!.lineItems.map((item: any) => (
@@ -62,7 +68,10 @@ const CheckoutSidebarView: FC = () => {
        </ul>
      </div>

-      <form onSubmit={handleSubmit} 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">
+      <form
+        onSubmit={handleSubmit}
+        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>
@@ -83,7 +92,11 @@ const CheckoutSidebarView: FC = () => {
        </div>
        <div>
          {/* Once data is correcly filled */}
-          <Button type="submit" width="100%" disabled={!checkoutData?.hasPayment || !checkoutData?.hasShipping}>
+          <Button
+            type="submit"
+            width="100%"
+            disabled={!checkoutData?.hasPayment || !checkoutData?.hasShipping}
+          >
            Confirm Purchase
          </Button>
        </div>
--- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx
+++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
@@ -27,7 +27,7 @@ const PaymentMethodView: FC = () => {
  const addCard = useAddCard()

  async function handleSubmit(event: React.ChangeEvent<Form>) {
-    event.preventDefault();
+    event.preventDefault()

    await addCard({
      cardHolder: event.target.cardHolder.value,
@@ -40,8 +40,8 @@ const PaymentMethodView: FC = () => {
      streetNumber: event.target.streetNumber.value,
      zipCode: event.target.zipCode.value,
      city: event.target.city.value,
-      country: event.target.country.value
-    });
+      country: event.target.country.value,
+    })

    setSidebarView('CHECKOUT_VIEW')
  }
@@ -63,7 +63,11 @@ const PaymentMethodView: FC = () => {
              </div>
              <div className={cn(s.fieldset, 'col-span-3')}>
                <label className={s.label}>Expires</label>
-                <input name="cardExpireDate" className={s.input} placeholder="MM/YY" />
+                <input
+                  name="cardExpireDate"
+                  className={s.input}
+                  placeholder="MM/YY"
+                />
              </div>
              <div className={cn(s.fieldset, 'col-span-2')}>
                <label className={s.label}>CVC</label>
@@ -90,7 +94,9 @@ const PaymentMethodView: FC = () => {
              <input name="streetNumber" className={s.input} />
            </div>
            <div className={s.fieldset}>
-              <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
+              <label className={s.label}>
+                Apartment, Suite, Etc. (Optional)
+              </label>
              <input className={s.input} name="apartment" />
            </div>
            <div className="grid gap-3 grid-flow-row grid-cols-12">
--- a/components/checkout/PaymentWidget/PaymentWidget.tsx
+++ b/components/checkout/PaymentWidget/PaymentWidget.tsx
@@ -3,8 +3,8 @@ import s from './PaymentWidget.module.css'
 import { ChevronRight, CreditCard, Check } from '@components/icons'

 interface ComponentProps {
-  onClick?: () => any;
-  isValid?: boolean;
+  onClick?: () => any
+  isValid?: boolean
 }

 const PaymentWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
@@ -20,9 +20,7 @@ const PaymentWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
        </span>
        {/* <span>VISA #### #### #### 2345</span> */}
      </div>
-      <div>
-        {isValid ? <Check /> : <ChevronRight />}
-      </div>
+      <div>{isValid ? <Check /> : <ChevronRight />}</div>
    </div>
  )
 }
--- a/components/checkout/ShippingView/ShippingView.tsx
+++ b/components/checkout/ShippingView/ShippingView.tsx
@@ -27,7 +27,7 @@ const PaymentMethodView: FC = () => {
  const addAddress = useAddAddress()

  async function handleSubmit(event: React.ChangeEvent<Form>) {
-    event.preventDefault();
+    event.preventDefault()

    await addAddress({
      type: event.target.type.value,
@@ -38,8 +38,8 @@ const PaymentMethodView: FC = () => {
      apartments: event.target.streetNumber.value,
      zipCode: event.target.zipCode.value,
      city: event.target.city.value,
-      country: event.target.country.value
-    });
+      country: event.target.country.value,
+    })

    setSidebarView('CHECKOUT_VIEW')
  }
@@ -82,7 +82,9 @@ const PaymentMethodView: FC = () => {
              <input name="streetNumber" className={s.input} />
            </div>
            <div className={s.fieldset}>
-              <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
+              <label className={s.label}>
+                Apartment, Suite, Etc. (Optional)
+              </label>
              <input name="apartments" className={s.input} />
            </div>
            <div className="grid gap-3 grid-flow-row grid-cols-12">
--- a/components/checkout/ShippingWidget/ShippingWidget.tsx
+++ b/components/checkout/ShippingWidget/ShippingWidget.tsx
@@ -5,7 +5,7 @@ import cn from 'classnames'

 interface ComponentProps {
  onClick?: () => any
-  isValid?: boolean;
+  isValid?: boolean
 }

 const ShippingWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
@@ -24,9 +24,7 @@ const ShippingWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
          San Franssisco, California
        </span> */}
      </div>
-      <div>
-        {isValid ? <Check /> : <ChevronRight />}
-      </div>
+      <div>{isValid ? <Check /> : <ChevronRight />}</div>
    </div>
  )
 }
--- a/framework/bigcommerce/checkout/use-checkout.tsx
+++ b/framework/bigcommerce/checkout/use-checkout.tsx
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ useData }) => async (input) => ({})
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
 }
--- a/framework/bigcommerce/customer/address/use-add-item.tsx
+++ b/framework/bigcommerce/customer/address/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/bigcommerce/customer/card/use-add-item.tsx
+++ b/framework/bigcommerce/customer/card/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/commerce/checkout/use-submit-checkout.tsx
+++ b/framework/commerce/checkout/use-submit-checkout.tsx
@@ -6,7 +6,9 @@ import { useHook, useMutationHook } from '../utils/use-hook'
 import { mutationFetcher } from '../utils/default-fetcher'

 export type UseSubmitCheckout<
-  H extends MutationHook<SubmitCheckoutHook<any>> = MutationHook<SubmitCheckoutHook>
+  H extends MutationHook<
+    SubmitCheckoutHook<any>
+  > = MutationHook<SubmitCheckoutHook>
 > = ReturnType<H['useHook']>

 export const fetcher: HookFetcherFn<SubmitCheckoutHook> = mutationFetcher
--- a/framework/local/checkout/use-checkout.tsx
+++ b/framework/local/checkout/use-checkout.tsx
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ useData }) => async (input) => ({})
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
 }
--- a/framework/local/customer/address/use-add-item.tsx
+++ b/framework/local/customer/address/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/local/customer/card/use-add-item.tsx
+++ b/framework/local/customer/card/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/saleor/api/endpoints/checkout/index.ts
+++ b/framework/saleor/api/endpoints/checkout/index.ts
@@ -6,11 +6,7 @@ export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>

 export type CheckoutEndpoint = CheckoutAPI['endpoint']

-const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
-  req,
-  res,
-  config,
-}) => {
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({ req, res, config }) => {
  try {
    const html = `
      <!DOCTYPE html>
--- a/framework/saleor/checkout/use-checkout.tsx
+++ b/framework/saleor/checkout/use-checkout.tsx
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ useData }) => async (input) => ({})
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
 }
--- a/framework/saleor/customer/address/use-add-item.tsx
+++ b/framework/saleor/customer/address/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/saleor/customer/card/use-add-item.tsx
+++ b/framework/saleor/customer/card/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/shopify/checkout/use-checkout.tsx
+++ b/framework/shopify/checkout/use-checkout.tsx
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ useData }) => async (input) => ({})
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
 }
--- a/framework/shopify/customer/address/use-add-item.tsx
+++ b/framework/shopify/customer/address/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/shopify/customer/card/use-add-item.tsx
+++ b/framework/shopify/customer/card/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/swell/checkout/use-checkout.tsx
+++ b/framework/swell/checkout/use-checkout.tsx
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ useData }) => async (input) => ({})
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
 }
--- a/framework/swell/customer/address/use-add-item.tsx
+++ b/framework/swell/customer/address/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/swell/customer/card/use-add-item.tsx
+++ b/framework/swell/customer/card/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/vendure/checkout/use-checkout.tsx
+++ b/framework/vendure/checkout/use-checkout.tsx
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ useData }) => async (input) => ({})
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
 }
--- a/framework/vendure/customer/address/use-add-item.tsx
+++ b/framework/vendure/customer/address/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }
--- a/framework/vendure/customer/card/use-add-item.tsx
+++ b/framework/vendure/customer/card/use-add-item.tsx
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
    query: '',
  },
  async fetcher({ input, options, fetch }) {},
-  useHook: ({ fetch }) => () => async () => ({})
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
 }