Feat/checkout items

.gitignore

@@ -41,3 +41,5 @@ storybook-static/
 .qodo
 
 .qodo
+
+.qodo

platform/canvas-packages/internal_pkgs/spree/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commerce-spree",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "description": "Plasmic registration calls for spree commerce provider",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

platform/canvas-packages/internal_pkgs/spree/src/checkout/use-checkout.tsx

@@ -4,6 +4,8 @@ import getCart from '../utils/get-cart'
 import normalizeCart from '../utils/normalizations/normalize-cart'
 import { useMemo } from 'react'
 import { GetCheckoutHook } from '../commerce/types/checkout'
+import getShippingRates from '../utils/get-shipping-rates'
+import getPaymentMethods from '../utils/get-payment-methods'
 
 export default useCheckout as UseCheckout<typeof handler>
 
@@ -24,13 +26,24 @@ export const handler: SWRHook<any> = {
     )
     const spreeCartResponse = await getCart(fetch)
     const cart = normalizeCart(spreeCartResponse, spreeCartResponse.data)
+    let shippingRates = null
+    let paymentMethods = null
+    if (cart.shippingAddress) {
+      shippingRates = await getShippingRates(fetch)
+      paymentMethods = await getPaymentMethods(fetch)
+    }
     return {
-      hasPayment: false,
-      hasShipping: false,
+      hasPayment: cart.payments.length > 0,
+      hasShipping: cart.shipments.length > 0,
       addressId: null,
-      payments: [],
+      payments: cart.payments,
       cardId: null,
       lineItems: cart.lineItems,
+      billingAddress: cart.billingAddress,
+      shippingAddress: cart.shippingAddress,
+      shipments: cart.shipments,
+      shippingRates,
+      paymentMethods,
     }
   },
   useHook: ({ useData }) => {

platform/canvas-packages/internal_pkgs/spree/src/checkout/use-submit-checkout.tsx

@@ -38,37 +38,44 @@ export const handler: MutationHook<SubmitCheckoutHook> = {
         async (input) => {
           const {
             email,
-            special_instructions,
-            billing_address,
-            shipping_address,
+            specialInstructions,
+            billingAddress,
+            shippingAddress,
             payments,
             shipments,
-            onSuccessAction,
+            shippingMethodId,
+            paymentMethodId,
+            action,
           } = input
 
           if (
             !email &&
-            !special_instructions &&
-            !billing_address &&
-            !shipping_address &&
+            !specialInstructions &&
+            !billingAddress &&
+            !shippingAddress &&
             !payments &&
+            !shippingMethodId &&
+            !paymentMethodId &&
             !shipments
           ) {
             throw new ValidationError({
               message:
                 'email or special_instructions or billing_address or' +
-                ' shipping_address or payments or shipments needs to be provided.',
+                ' shipping_address or payments or shipments or shippingMethodId or paymentMethodId' +
+                ' needs to be provided.',
             })
           }
           const data = await fetch({
             input: {
               email,
-              special_instructions,
-              billing_address,
-              shipping_address,
+              specialInstructions,
+              billingAddress,
+              shippingAddress,
               payments,
               shipments,
-              onSuccessAction,
+              shippingMethodId,
+              paymentMethodId,
+              action,
             },
           })
 

platform/canvas-packages/internal_pkgs/spree/src/commerce/types/checkout.ts

@@ -1,6 +1,7 @@
 import type { AddressFields } from './customer/address'
-import type { Card, CardFields } from './customer/card'
+import type { CardFields } from './customer/card'
 import type { LineItem } from './cart'
+import { AddressAttr, PaymentAttr, ShipmentAttr } from '../../types'
 
 export interface Checkout {
   /**
@@ -15,10 +16,6 @@ export interface Checkout {
    * The unique identifier for the address that the customer has selected for shipping.
    */
   addressId: string
-  /**
-   * The list of payment cards that the customer has available.
-   */
-  payments?: Card[]
   /**
    * The unique identifier of the card that the customer has selected for payment.
    */
@@ -27,6 +24,12 @@ export interface Checkout {
    * List of items in the checkout.
    */
   lineItems?: LineItem[]
+  shippingAddress?: AddressAttr
+  billingAddress?: AddressAttr
+  payments?: PaymentAttr[]
+  shipments?: ShipmentAttr[]
+  paymentMethods?: PaymentMethod[]
+  shippingRates?: ShippingRate[]
 }
 
 export interface Payment {
@@ -38,11 +41,46 @@ export interface Shipment {
   selectedShippingRateId: string
 }
 
+export interface OrderShipment {
+  id: string
+  number: string
+  finalPrice: string
+  displayFinalPrice: string
+  state: string
+  shippedAt: Date
+  trackingUrl: string
+  free: boolean
+  shippingRates: ShippingRate[]
+}
+
+export interface ShippingRate {
+  id: string
+  name: string
+  selected: boolean
+  finalPrice: string
+  displayFinalPrice: string
+  cost: string
+  displayCost: string
+  taxAmount: string
+  displayTaxAmount: string
+  shippingMethodId: string
+  free: boolean
+}
+
+export interface PaymentMethod {
+  id: string
+  type: string
+  name: string
+  description: string
+  publicMetadata?: object
+  preferences?: object
+}
+
 export interface CheckoutBody {
   /**
    * The email assigned to this cart.
    */
-  email: string
+  email?: string
   /**
    * The unique identifier for the cart.
    */
@@ -56,22 +94,30 @@ export interface CheckoutBody {
    * The billing Address information.
    * @see AddressFields
    */
-  billing_address?: AddressFields
+  billingAddress?: AddressFields
   /**
    * The shipping Address information.
    * @see AddressFields
    */
-  shipping_address?: AddressFields
+  shippingAddress?: AddressFields
   /**
    * The special instructions for the order.
    */
-  special_instructions?: string
+  specialInstructions?: string
   /**
    * The list of payments.
    */
   payments?: Payment[]
   shipments?: Shipment[]
-  onSuccessAction?: 'orderNext' | 'advance' | 'complete' | null
+  shippingMethodId?: string
+  paymentMethodId?: string
+  action:
+    | 'orderUpdate'
+    | 'orderNext'
+    | 'advance'
+    | 'complete'
+    | 'selectShippingMethod'
+    | 'addPayment'
 }
 
 export type CheckoutTypes = {

platform/canvas-packages/internal_pkgs/spree/src/commerce/types/customer/address.ts

@@ -18,43 +18,43 @@ export interface AddressFields {
   /**
    * The customer's first name.
    */
-  firstName: string
+  firstName?: string
   /**
    * The customer's last name.
    */
-  lastName: string
+  lastName?: string
   /**
    * Company name.
    */
-  company: string
+  company?: string
   /**
    * The customer's billing address street number.
    */
-  streetNumber: string
+  streetNumber?: string
   /**
    * The customer's billing address apartment number.
    */
-  apartments: string
+  apartments?: string
   /**
    * The customer's billing address zip code.
    */
-  zipCode: string
+  zipCode?: string
   /**
    * The customer's billing address city.
    */
-  city: string
+  city?: string
   /**
    * The customer's billing address state.
    */
-  state: string
+  state?: string
   /**
    * The customer's billing address country.
    */
-  country: string
+  country?: string
   /**
    * The customer's phone number.
    */
-  phone: string
+  phone?: string
 }
 
 /**

platform/canvas-packages/internal_pkgs/spree/src/registerCheckoutProvider.tsx

@@ -33,12 +33,20 @@ export const checkoutProviderMeta: ComponentMeta<
 interface CheckoutActions extends GlobalActionDict {
   submitCheckout: (
     email: string,
-    special_instructions: string,
-    billing_address: AddressFields,
-    shipping_address: AddressFields,
+    specialInstructions: string,
+    billingAddress: AddressFields,
+    shippingAddress: AddressFields,
     payments: Payment[],
     shipments: Shipment[],
-    onSuccessAction: 'orderNext' | 'advance' | 'complete' | null
+    shippingMethodId: string,
+    paymentMethodId: string,
+    action:
+      | 'orderUpdate'
+      | 'orderNext'
+      | 'advance'
+      | 'complete'
+      | 'selectShippingMethod'
+      | 'addPayment'
   ) => void
 }
 
@@ -52,21 +60,31 @@ export function CheckoutActionsProvider(
     () => ({
       submitCheckout(
         email: string,
-        special_instructions: string,
-        billing_address: AddressFields,
-        shipping_address: AddressFields,
+        specialInstructions: string,
+        billingAddress: AddressFields,
+        shippingAddress: AddressFields,
         payments: Payment[],
         shipments: Shipment[],
-        onSuccessAction: 'orderNext' | 'advance' | 'complete' | null
+        shippingMethodId: string,
+        paymentMethodId: string,
+        action:
+          | 'orderUpdate'
+          | 'orderNext'
+          | 'advance'
+          | 'complete'
+          | 'selectShippingMethod'
+          | 'addPayment'
       ) {
         submitCheckout({
           email,
-          special_instructions,
-          billing_address,
-          shipping_address,
+          specialInstructions,
+          billingAddress,
+          shippingAddress,
           payments,
           shipments,
-          onSuccessAction,
+          shippingMethodId,
+          paymentMethodId,
+          action,
         })
       },
     }),
@@ -172,20 +190,20 @@ export const globalActionsRegistrations: Record<
         type: 'string',
       },
       {
-        name: 'special_instructions',
+        name: 'specialInstructions',
         displayName: 'Special instructions',
         type: 'string',
       },
       {
-        name: 'billing_address',
+        name: 'billingAddress',
         displayName: 'Billing address',
         type: {
           type: 'object',
           fields: addressFields,
         },
       },
       {
-        name: 'shipping_address',
+        name: 'shippingAddress',
         displayName: 'Shipping address',
         type: {
           type: 'object',
@@ -203,16 +221,28 @@ export const globalActionsRegistrations: Record<
         type: 'object',
       },
       {
-        name: 'onSuccessAction',
-        displayName: 'On success action',
+        name: 'shippingMethodId',
+        displayName: 'Shipping method ID',
+        type: 'string',
+      },
+      {
+        name: 'paymentMethodId',
+        displayName: 'Payment method ID',
+        type: 'string',
+      },
+      {
+        name: 'action',
+        displayName: 'Action',
         type: {
           type: 'choice',
           multiSelect: false,
           options: [
+            { value: 'orderUpdate', label: 'Update checkout' },
             { value: 'orderNext', label: 'Next' },
             { value: 'advance', label: 'Advance' },
             { value: 'complete', label: 'Complete' },
-            { value: 'null', label: 'None' },
+            { value: 'selectShippingMethod', label: 'Select shipping method' },
+            { value: 'addPayment', label: 'Add payment' },
           ],
         },
       },