commerce/site/components/checkout/ShippingMethodView/ShippingMethodView.tsx

import useCart from '@framework/cart/use-cart'
import useUpdateUpdateAddress from '@framework/customer/address/use-update-item'
import SidebarLayout from '@components/common/SidebarLayout'
import { useUI } from '@components/ui/context'
import { Button } from '@components/ui'
import useCheckout from '@framework/checkout/use-checkout'
import { useCheckoutContext } from '../context'

const ShippingMethod = () => {
  const { setSidebarView } = useUI()

  const { data: cart } = useCart()
  const { addressFields } = useCheckoutContext()

  const updateShippingMethod = useUpdateUpdateAddress()
  const { data: checkoutData } = useCheckout()

  const handleSubmit = async (event: React.ChangeEvent<HTMLFormElement>) => {
    event.preventDefault()

    await updateShippingMethod({
      id: cart!.id,
      ...addressFields,
      ...(event.target.shippingMethod.value
        ? { shippingMethodId: event.target.shippingMethod.value }
        : {}),
    })

    setSidebarView('CHECKOUT_VIEW')
  }

  return checkoutData?.shippingMethods ? (
    <form className="h-full" onSubmit={handleSubmit}>
      <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 Methods
          </h2>
          <div>
            {checkoutData.shippingMethods.map((option) => (
              <div
                className="flex flex-row my-3 items-center justify-between"
                key={option.id}
              >
                <fieldset className="flex flex-row items-center">
                  <input
                    name="shippingMethod"
                    className="bg-black"
                    type="radio"
                    value={option.id}
                    defaultChecked={
                      checkoutData.selectedShippingMethodId === option.id
                    }
                  />
                  <span className="ml-3 text-sm">{option.name}</span>
                </fieldset>
                <span>{option.fee}</span>
              </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 type="submit" width="100%" variant="ghost">
            Continue
          </Button>
        </div>
      </SidebarLayout>
    </form>
  ) : null
}

export default ShippingMethod