@@ -650,7 +690,9 @@ export function ProductDetails({
)}
{product?.id && (
-
Product ID:
+
+ {t.storefront.productId}
+
{product.id}
@@ -659,7 +701,9 @@ export function ProductDetails({
{selectedSku && (
<>
-
Selected SKU:
+
+ {t.storefront.selectedSku}
+
{selectedSku.code}
@@ -667,17 +711,20 @@ export function ProductDetails({
{selectedSku.inventoryCounts?.edges &&
selectedSku.inventoryCounts.edges.length > 0 && (
- Stock Status:
+
+ {t.storefront.stockStatus}
+
{(() => {
const availableCount =
selectedSku.inventoryCounts.edges.find(
edge => edge?.node?.type === 'AVAILABLE'
)?.node?.quantity ?? 0;
- if (availableCount === 0) return 'Out of Stock';
+ if (availableCount === 0)
+ return t.storefront.outOfStock;
if (availableCount < 10)
- return `Low Stock (${availableCount})`;
- return 'In Stock';
+ return `${t.storefront.lowStock} (${availableCount})`;
+ return t.storefront.inStock;
})()}
diff --git a/packages/react/src/components/storefront/product-grid.tsx b/packages/react/src/components/storefront/product-grid.tsx
index dc0fe042..d73607f0 100644
--- a/packages/react/src/components/storefront/product-grid.tsx
+++ b/packages/react/src/components/storefront/product-grid.tsx
@@ -11,6 +11,8 @@ interface ProductGridProps {
clientId?: string;
first?: number;
getProductHref?: (productId: string) => string;
+ onAddToCartSuccess?: () => void;
+ onAddToCartError?: (error: Error) => void;
}
function ProductGridSkeleton({ count = 6 }: { count?: number }) {
@@ -34,8 +36,11 @@ export function ProductGrid({
clientId: clientIdProp,
first = 100,
getProductHref,
+ onAddToCartSuccess,
+ onAddToCartError,
}: ProductGridProps) {
const context = useGoDaddyContext();
+ const { t } = context;
const storeId = storeIdProp || context.storeId;
const clientId = clientIdProp || context.clientId;
@@ -51,7 +56,11 @@ export function ProductGrid({
}
if (error) {
- return
Error loading products: {error.message}
;
+ return (
+
+ {t.storefront.errorLoadingProducts} {error.message}
+
+ );
}
const skuGroups = data?.skuGroups?.edges;
@@ -63,7 +72,15 @@ export function ProductGrid({
if (!group?.id) return null;
const href = getProductHref?.(group.id);
- return
;
+ return (
+
+ );
})}
);
diff --git a/packages/react/src/components/ui/badge.tsx b/packages/react/src/components/ui/badge.tsx
index 19b5addc..47d4ca2f 100644
--- a/packages/react/src/components/ui/badge.tsx
+++ b/packages/react/src/components/ui/badge.tsx
@@ -13,6 +13,8 @@ const badgeVariants = cva(
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+ accent:
+ 'border-transparent bg-accent text-accent-foreground hover:bg-accent/80',
outline: 'text-foreground',
},
},
diff --git a/packages/react/src/components/ui/sheet.tsx b/packages/react/src/components/ui/sheet.tsx
index 408e6676..f867253c 100644
--- a/packages/react/src/components/ui/sheet.tsx
+++ b/packages/react/src/components/ui/sheet.tsx
@@ -68,7 +68,7 @@ const SheetContent = React.forwardRef<
className={cn(sheetVariants({ side }), className)}
{...props}
>
-
+
{t.ui.accessibility.close}
diff --git a/packages/react/src/globals.css b/packages/react/src/globals.css
index 89152395..ac3016a4 100644
--- a/packages/react/src/globals.css
+++ b/packages/react/src/globals.css
@@ -1,6 +1,80 @@
@import "tailwindcss" source(none);
@source "./components/";
+@keyframes enter {
+ from {
+ opacity: 0;
+ transform: var(--tw-enter-transform);
+ }
+}
+
+@keyframes exit {
+ to {
+ opacity: 0;
+ transform: var(--tw-exit-transform);
+ }
+}
+
+@utility animate-in {
+ animation-name: enter;
+ animation-duration: 0.15s;
+ --tw-enter-transform: none;
+}
+
+@utility animate-out {
+ animation-name: exit;
+ animation-duration: 0.15s;
+ --tw-exit-transform: none;
+}
+
+@utility fade-in-0 {
+ --tw-enter-opacity: 0;
+}
+
+@utility fade-out-0 {
+ --tw-exit-opacity: 0;
+}
+
+@utility slide-in-from-right {
+ --tw-enter-transform: translateX(100%);
+}
+
+@utility slide-out-to-right {
+ --tw-exit-transform: translateX(100%);
+}
+
+@utility slide-in-from-left {
+ --tw-enter-transform: translateX(-100%);
+}
+
+@utility slide-out-to-left {
+ --tw-exit-transform: translateX(-100%);
+}
+
+@utility slide-in-from-top {
+ --tw-enter-transform: translateY(-100%);
+}
+
+@utility slide-out-to-top {
+ --tw-exit-transform: translateY(-100%);
+}
+
+@utility slide-in-from-bottom {
+ --tw-enter-transform: translateY(100%);
+}
+
+@utility slide-out-to-bottom {
+ --tw-exit-transform: translateY(100%);
+}
+
+@utility duration-300 {
+ animation-duration: 300ms;
+}
+
+@utility duration-500 {
+ animation-duration: 500ms;
+}
+
@font-face {
font-family: "GD Sherpa";
src: url("https://d85ecz8votkqa.cloudfront.net/fonts/gd-sherpa-regular.eot"); /* IE9 Compat Modes */
diff --git a/packages/react/src/godaddy-provider.tsx b/packages/react/src/godaddy-provider.tsx
index 6faea256..c13fd245 100644
--- a/packages/react/src/godaddy-provider.tsx
+++ b/packages/react/src/godaddy-provider.tsx
@@ -73,6 +73,7 @@ interface GoDaddyContextValue {
apiHost?: string;
clientId?: string;
storeId?: string;
+ channelId?: string;
locale?: string;
Link?: React.ComponentType;
}
@@ -101,13 +102,13 @@ export interface GoDaddyProviderProps {
*
* Internal devs can set to:
* - "http://localhost:3000" for local development
- * - "https://checkout.commerce.api.dev-godaddy.com" for DEV environment
- * - "https://checkout.commerce.api.test-godaddy.com" for TEST environment
*/
apiHost?: string;
clientId?: string;
storeId?: string;
+ channelId?: string;
locale?: string;
+
queryClient?: QueryClient;
Link?: React.ComponentType;
children: QueryClientProviderProps['children'];
@@ -120,6 +121,7 @@ export function GoDaddyProvider({
apiHost,
clientId,
storeId,
+ channelId,
locale = 'en-US',
queryClient: providedQueryClient,
Link,
@@ -214,6 +216,7 @@ export function GoDaddyProvider({
apiHost,
clientId,
storeId,
+ channelId,
locale,
Link,
}}
diff --git a/packages/react/src/lib/cart-storage.ts b/packages/react/src/lib/cart-storage.ts
new file mode 100644
index 00000000..3f4c2e2b
--- /dev/null
+++ b/packages/react/src/lib/cart-storage.ts
@@ -0,0 +1,78 @@
+const CART_ORDER_ID_KEY = 'godaddy_cart_order_id';
+const CART_CREATED_AT_KEY = 'godaddy_cart_created_at';
+const CART_TTL = 30 * 24 * 60 * 60 * 1000; // 30 days in milliseconds
+
+/**
+ * Get the cart order ID from localStorage.
+ * Returns null if the cart doesn't exist or has expired.
+ */
+export function getCartOrderId(): string | null {
+ if (typeof window === 'undefined') {
+ // SSR safety
+ return null;
+ }
+
+ const orderId = localStorage.getItem(CART_ORDER_ID_KEY);
+ const createdAt = localStorage.getItem(CART_CREATED_AT_KEY);
+
+ // No cart exists
+ if (!orderId) {
+ return null;
+ }
+
+ // Check if cart has expired (30 days old)
+ if (createdAt) {
+ const age = Date.now() - parseInt(createdAt, 10);
+ if (age > CART_TTL) {
+ // Cart expired, clean it up
+ clearCartOrderId();
+ return null;
+ }
+ }
+
+ return orderId;
+}
+
+/**
+ * Save the cart order ID to localStorage with a timestamp.
+ */
+export function setCartOrderId(orderId: string): void {
+ if (typeof window === 'undefined') {
+ // SSR safety
+ return;
+ }
+
+ localStorage.setItem(CART_ORDER_ID_KEY, orderId);
+ localStorage.setItem(CART_CREATED_AT_KEY, Date.now().toString());
+}
+
+/**
+ * Remove the cart order ID and timestamp from localStorage.
+ */
+export function clearCartOrderId(): void {
+ if (typeof window === 'undefined') {
+ // SSR safety
+ return;
+ }
+
+ localStorage.removeItem(CART_ORDER_ID_KEY);
+ localStorage.removeItem(CART_CREATED_AT_KEY);
+}
+
+/**
+ * Get the age of the current cart in days.
+ * Returns null if no cart exists.
+ */
+export function getCartAge(): number | null {
+ if (typeof window === 'undefined') {
+ return null;
+ }
+
+ const createdAt = localStorage.getItem(CART_CREATED_AT_KEY);
+ if (!createdAt) {
+ return null;
+ }
+
+ const ageMs = Date.now() - parseInt(createdAt, 10);
+ return Math.floor(ageMs / (24 * 60 * 60 * 1000)); // Convert to days
+}
diff --git a/packages/react/src/lib/godaddy/catalog-storefront-env.ts b/packages/react/src/lib/godaddy/catalog-storefront-env.ts
index dcce0046..5d61fca3 100644
--- a/packages/react/src/lib/godaddy/catalog-storefront-env.ts
+++ b/packages/react/src/lib/godaddy/catalog-storefront-env.ts
@@ -1325,15 +1325,6 @@ const introspection = {
],
isDeprecated: false,
},
- {
- name: 'status',
- type: {
- kind: 'SCALAR',
- name: 'String',
- },
- args: [],
- isDeprecated: false,
- },
{
name: 'updatedAt',
type: {
@@ -2528,15 +2519,6 @@ const introspection = {
],
isDeprecated: false,
},
- {
- name: 'status',
- type: {
- kind: 'SCALAR',
- name: 'String',
- },
- args: [],
- isDeprecated: false,
- },
{
name: 'updatedAt',
type: {
@@ -8454,6 +8436,24 @@ const introspection = {
args: [],
isDeprecated: true,
},
+ {
+ name: 'skuCount',
+ type: {
+ kind: 'SCALAR',
+ name: 'Int',
+ },
+ args: [
+ {
+ name: 'status',
+ type: {
+ kind: 'INPUT_OBJECT',
+ name: 'SKUStatusFilter',
+ },
+ defaultValue: '{in: ["ACTIVE", "DRAFT"]}',
+ },
+ ],
+ isDeprecated: false,
+ },
{
name: 'skus',
type: {
diff --git a/packages/react/src/lib/godaddy/catalog-storefront-queries.ts b/packages/react/src/lib/godaddy/catalog-storefront-queries.ts
index fc1f4b02..eab1ed43 100644
--- a/packages/react/src/lib/godaddy/catalog-storefront-queries.ts
+++ b/packages/react/src/lib/godaddy/catalog-storefront-queries.ts
@@ -1,7 +1,7 @@
import { graphql } from '@/lib/gql/gql-catalog-storefront.tada.ts';
export const SkuGroupsQuery = graphql(`
- query SkuGroups($first: Int, $after: String, $id: SKUGroupIdsFilter, $attributeValues: [String!] = []) {
+ query SkuGroups($first: Int, $after: String, $id: SKUGroupIdsFilter) {
skuGroups(first: $first, after: $after, id: $id) {
edges {
cursor
@@ -48,12 +48,21 @@ export const SkuGroupsQuery = graphql(`
}
}
}
- skus(attributeValues: { has: $attributeValues }) {
+ skus(first: 2) {
edges {
node {
id
label
name
+ inventoryCounts {
+ edges {
+ node {
+ id
+ quantity
+ type
+ }
+ }
+ }
}
}
}
@@ -70,7 +79,7 @@ export const SkuGroupsQuery = graphql(`
`);
export const SkuGroupQuery = graphql(`
- query SkuGroup($id: String!, $attributeValues: [String!] = []) {
+ query SkuGroup($id: String!, $first: Int, $attributeValues: [String!] = []) {
skuGroup(id: $id) {
id
name
@@ -114,12 +123,24 @@ export const SkuGroupQuery = graphql(`
}
}
}
- skus(attributeValues: { has: $attributeValues }) {
+ skus(
+ attributeValues: { has: $attributeValues }
+ first: $first
+ ) {
edges {
node {
id
label
name
+ inventoryCounts {
+ edges {
+ node {
+ id
+ quantity
+ type
+ }
+ }
+ }
}
}
}
diff --git a/packages/react/src/lib/godaddy/checkout-mutations.ts b/packages/react/src/lib/godaddy/checkout-mutations.ts
index 23cc9741..d493425c 100644
--- a/packages/react/src/lib/godaddy/checkout-mutations.ts
+++ b/packages/react/src/lib/godaddy/checkout-mutations.ts
@@ -5,6 +5,7 @@ export const CreateCheckoutSessionMutation = graphql(`
createCheckoutSession(input: $input) {
id
token
+ url
sourceApp
returnUrl
successUrl
diff --git a/packages/react/src/lib/godaddy/godaddy.ts b/packages/react/src/lib/godaddy/godaddy.ts
index ece3f3ab..5d45662b 100644
--- a/packages/react/src/lib/godaddy/godaddy.ts
+++ b/packages/react/src/lib/godaddy/godaddy.ts
@@ -6,15 +6,28 @@ import {
SkuGroupsQuery,
SkuQuery,
} from '@/lib/godaddy/catalog-storefront-queries.ts';
+import {
+ AddCartOrderMutation,
+ AddLineItemBySkuIdMutation,
+ ApplyDiscountCodesMutation,
+ DeleteLineItemByIdMutation,
+ UpdateCartOrderMutation,
+ UpdateLineItemByIdMutation,
+} from '@/lib/godaddy/orders-storefront-mutations.ts';
+import { GetCartOrderQuery } from '@/lib/godaddy/orders-storefront-queries.ts';
import { graphqlRequestWithErrors } from '@/lib/graphql-with-errors';
import type {
+ AddCartOrderInput,
+ AddLineItemBySkuIdInput,
ApplyCheckoutSessionDeliveryMethodInput,
ApplyCheckoutSessionDiscountInput,
ApplyCheckoutSessionFulfillmentLocationInput,
ApplyCheckoutSessionShippingMethodInput,
+ ApplyDiscountCodesInput,
CheckoutSession,
CheckoutSessionInput,
ConfirmCheckoutMutationInput,
+ DeleteLineItemByIdInput,
DraftOrderPriceAdjustmentsQueryInput,
GetCheckoutSessionShippingRatesInput,
GetCheckoutSessionTaxesInput,
@@ -22,7 +35,9 @@ import type {
SkuGroupInput,
SkuGroupsInput,
SkuInput,
+ UpdateCartOrderInput,
UpdateDraftOrderInput,
+ UpdateLineItemByIdInput,
} from '@/types';
import {
ApplyCheckoutSessionDeliveryMethodMutation,
@@ -48,9 +63,13 @@ import {
GetCheckoutSessionQuery,
} from './checkout-queries.ts';
-function getHostByEnvironment(apiHost?: string, service = 'checkout'): string {
+function getHostByEnvironment(apiHost?: string): string {
// Use provided apiHost, otherwise default to production
- return `https://${service}.commerce.${apiHost || 'api.godaddy.com'}`;
+ return `https://checkout.commerce.${apiHost || 'api.godaddy.com'}`;
+}
+
+function getApiHostByEnvironment(apiHost?: string, endpoint?: string): string {
+ return `https://${apiHost || 'api.godaddy.com'}${endpoint ? endpoint : ''}`;
}
// Type for createCheckoutSession input with kebab-case appearance
@@ -1066,10 +1085,13 @@ export function getSkuGroups(
clientId: string,
apiHost?: string
) {
- const GODADDY_HOST = getHostByEnvironment(apiHost, 'catalog');
+ const GODADDY_HOST = getApiHostByEnvironment(
+ apiHost,
+ `/v2/commerce/stores/${storeId}/catalog-subgraph/storefront`
+ );
return graphqlRequestWithErrors>(
- `${GODADDY_HOST}/storefront`,
+ GODADDY_HOST,
SkuGroupsQuery,
input,
{
@@ -1085,10 +1107,13 @@ export function getSkuGroup(
clientId: string,
apiHost?: string
) {
- const GODADDY_HOST = getHostByEnvironment(apiHost, 'catalog');
+ const GODADDY_HOST = getApiHostByEnvironment(
+ apiHost,
+ `/v2/commerce/stores/${storeId}/catalog-subgraph/storefront`
+ );
return graphqlRequestWithErrors>(
- `${GODADDY_HOST}/storefront`,
+ GODADDY_HOST,
SkuGroupQuery,
input,
{
@@ -1104,10 +1129,13 @@ export function getSku(
clientId: string,
apiHost?: string
) {
- const GODADDY_HOST = getHostByEnvironment(apiHost, 'catalog');
+ const GODADDY_HOST = getApiHostByEnvironment(
+ apiHost,
+ `/v2/commerce/stores/${storeId}/catalog-subgraph/storefront`
+ );
return graphqlRequestWithErrors>(
- `${GODADDY_HOST}/storefront`,
+ GODADDY_HOST,
SkuQuery,
input,
{
@@ -1116,3 +1144,157 @@ export function getSku(
}
);
}
+
+// Cart/Orders functions
+export function createCartOrder(
+ input: AddCartOrderInput,
+ storeId: string,
+ clientId: string,
+ apiHost?: string
+) {
+ const GODADDY_HOST = getApiHostByEnvironment(
+ apiHost,
+ `/v1/commerce/order-storefront-subgraph`
+ );
+
+ return graphqlRequestWithErrors>(
+ GODADDY_HOST,
+ AddCartOrderMutation,
+ { input },
+ {
+ 'X-Store-ID': storeId,
+ 'X-Client-ID': clientId,
+ }
+ );
+}
+
+export function getCartOrder(
+ orderId: string,
+ storeId: string,
+ clientId: string,
+ apiHost?: string
+) {
+ const GODADDY_HOST = getApiHostByEnvironment(
+ apiHost,
+ `/v1/commerce/order-storefront-subgraph`
+ );
+
+ return graphqlRequestWithErrors>(
+ GODADDY_HOST,
+ GetCartOrderQuery,
+ { id: orderId },
+ {
+ 'X-Store-ID': storeId,
+ 'X-Client-ID': clientId,
+ }
+ );
+}
+
+export function addCartLineItem(
+ input: AddLineItemBySkuIdInput,
+ storeId: string,
+ clientId: string,
+ apiHost?: string
+) {
+ const GODADDY_HOST = getApiHostByEnvironment(
+ apiHost,
+ `/v1/commerce/order-storefront-subgraph`
+ );
+
+ return graphqlRequestWithErrors>(
+ GODADDY_HOST,
+ AddLineItemBySkuIdMutation,
+ { input },
+ {
+ 'X-Store-ID': storeId,
+ 'X-Client-ID': clientId,
+ }
+ );
+}
+
+export function updateCartOrder(
+ input: UpdateCartOrderInput,
+ storeId: string,
+ clientId: string,
+ apiHost?: string
+) {
+ const GODADDY_HOST = getApiHostByEnvironment(
+ apiHost,
+ `/v1/commerce/order-storefront-subgraph`
+ );
+
+ return graphqlRequestWithErrors>(
+ GODADDY_HOST,
+ UpdateCartOrderMutation,
+ { input },
+ {
+ 'X-Store-ID': storeId,
+ 'X-Client-ID': clientId,
+ }
+ );
+}
+
+export function deleteCartLineItem(
+ input: DeleteLineItemByIdInput,
+ storeId: string,
+ clientId: string,
+ apiHost?: string
+) {
+ const GODADDY_HOST = getApiHostByEnvironment(
+ apiHost,
+ `/v1/commerce/order-storefront-subgraph`
+ );
+
+ return graphqlRequestWithErrors>(
+ GODADDY_HOST,
+ DeleteLineItemByIdMutation,
+ input,
+ {
+ 'X-Store-ID': storeId,
+ 'X-Client-ID': clientId,
+ }
+ );
+}
+
+export function applyCartDiscountCodes(
+ input: ApplyDiscountCodesInput,
+ storeId: string,
+ clientId: string,
+ apiHost?: string
+) {
+ const GODADDY_HOST = getApiHostByEnvironment(
+ apiHost,
+ `/v1/commerce/order-storefront-subgraph`
+ );
+ return graphqlRequestWithErrors>(
+ GODADDY_HOST,
+ ApplyDiscountCodesMutation,
+ { input },
+ {
+ 'X-Store-ID': storeId,
+ 'X-Client-ID': clientId,
+ }
+ );
+}
+
+export function updateCartLineItem(
+ input: UpdateLineItemByIdInput,
+ storeId: string,
+ clientId: string,
+ apiHost?: string
+) {
+ const GODADDY_HOST = getApiHostByEnvironment(
+ apiHost,
+ `/v1/commerce/order-storefront-subgraph`
+ );
+
+ return graphqlRequestWithErrors>(
+ GODADDY_HOST,
+ UpdateLineItemByIdMutation,
+ { input },
+ {
+ 'X-Store-ID': storeId,
+ 'X-Client-ID': clientId,
+ }
+ );
+}
diff --git a/packages/react/src/lib/godaddy/orders-storefront-env.ts b/packages/react/src/lib/godaddy/orders-storefront-env.ts
index 3949dcaf..c35d6566 100644
--- a/packages/react/src/lib/godaddy/orders-storefront-env.ts
+++ b/packages/react/src/lib/godaddy/orders-storefront-env.ts
@@ -64,11 +64,8 @@ const introspection = {
{
name: 'totals',
type: {
- kind: 'NON_NULL',
- ofType: {
- kind: 'INPUT_OBJECT',
- name: 'OrderTotalsInput',
- },
+ kind: 'INPUT_OBJECT',
+ name: 'OrderTotalsInput',
},
},
{
@@ -1326,6 +1323,15 @@ const introspection = {
args: [],
isDeprecated: false,
},
+ {
+ name: 'unitAmount',
+ type: {
+ kind: 'OBJECT',
+ name: 'Money',
+ },
+ args: [],
+ isDeprecated: false,
+ },
{
name: 'updatedAt',
type: {
diff --git a/packages/react/src/lib/godaddy/orders-storefront-mutations.ts b/packages/react/src/lib/godaddy/orders-storefront-mutations.ts
new file mode 100644
index 00000000..f485ce0f
--- /dev/null
+++ b/packages/react/src/lib/godaddy/orders-storefront-mutations.ts
@@ -0,0 +1,302 @@
+import { graphql } from '@/lib/gql/gql-orders-storefront.tada';
+
+export const AddCartOrderMutation = graphql(`
+ mutation AddCartOrder($input: AddDraftOrderInput!) {
+ addDraftOrder(input: $input) {
+ id
+ customerId
+ createdAt
+ updatedAt
+ context {
+ storeId
+ channelId
+ }
+ lineItems {
+ id
+ name
+ quantity
+ skuId
+ type
+ fulfillmentMode
+ totals {
+ subTotal {
+ value
+ currencyCode
+ }
+ taxTotal {
+ value
+ currencyCode
+ }
+ discountTotal {
+ value
+ currencyCode
+ }
+ feeTotal {
+ value
+ currencyCode
+ }
+ }
+ }
+ totals {
+ subTotal {
+ value
+ currencyCode
+ }
+ shippingTotal {
+ value
+ currencyCode
+ }
+ taxTotal {
+ value
+ currencyCode
+ }
+ discountTotal {
+ value
+ currencyCode
+ }
+ feeTotal {
+ value
+ currencyCode
+ }
+ total {
+ value
+ currencyCode
+ }
+ }
+ }
+ }
+`);
+
+export const AddLineItemBySkuIdMutation = graphql(`
+ mutation AddLineItemBySkuId($input: AddLineItemInput!) {
+ addLineItemBySkuId(input: $input) {
+ id
+ name
+ quantity
+ skuId
+ type
+ fulfillmentMode
+ details {
+ productAssetUrl
+ sku
+ unitOfMeasure
+ selectedOptions {
+ attribute
+ values
+ }
+ selectedAddons {
+ attribute
+ sku
+ values {
+ name
+ costAdjustment {
+ value
+ currencyCode
+ }
+ }
+ }
+ }
+ totals {
+ subTotal {
+ value
+ currencyCode
+ }
+ taxTotal {
+ value
+ currencyCode
+ }
+ discountTotal {
+ value
+ currencyCode
+ }
+ feeTotal {
+ value
+ currencyCode
+ }
+ }
+ discounts {
+ id
+ name
+ code
+ amount {
+ value
+ currencyCode
+ }
+ }
+ taxes {
+ id
+ name
+ amount {
+ value
+ currencyCode
+ }
+ ratePercentage
+ }
+ createdAt
+ updatedAt
+ }
+ }
+`);
+
+export const UpdateCartOrderMutation = graphql(`
+ mutation UpdateCartOrder($input: UpdateDraftOrderInput!) {
+ updateDraftOrder(input: $input) {
+ id
+ customerId
+ createdAt
+ updatedAt
+ context {
+ storeId
+ channelId
+ }
+ lineItems {
+ id
+ name
+ quantity
+ skuId
+ type
+ fulfillmentMode
+ totals {
+ subTotal {
+ value
+ currencyCode
+ }
+ taxTotal {
+ value
+ currencyCode
+ }
+ discountTotal {
+ value
+ currencyCode
+ }
+ feeTotal {
+ value
+ currencyCode
+ }
+ }
+ }
+ totals {
+ subTotal {
+ value
+ currencyCode
+ }
+ shippingTotal {
+ value
+ currencyCode
+ }
+ taxTotal {
+ value
+ currencyCode
+ }
+ discountTotal {
+ value
+ currencyCode
+ }
+ feeTotal {
+ value
+ currencyCode
+ }
+ total {
+ value
+ currencyCode
+ }
+ }
+ }
+ }
+`);
+
+export const DeleteLineItemByIdMutation = graphql(`
+ mutation DeleteLineItemById($id: ID!, $orderId: ID!) {
+ deleteLineItemById(id: $id, orderId: $orderId)
+ }
+`);
+
+export const ApplyDiscountCodesMutation = graphql(`
+ mutation ApplyDiscountCodes($input: ApplyDiscountCodesInput!) {
+ applyDiscountCodes(input: $input) {
+ id
+ discounts {
+ id
+ name
+ code
+ amount {
+ value
+ currencyCode
+ }
+ ratePercentage
+ appliedBeforeTax
+ }
+ totals {
+ subTotal {
+ value
+ currencyCode
+ }
+ shippingTotal {
+ value
+ currencyCode
+ }
+ taxTotal {
+ value
+ currencyCode
+ }
+ discountTotal {
+ value
+ currencyCode
+ }
+ productDiscountTotal {
+ value
+ currencyCode
+ }
+ shippingDiscountTotal {
+ value
+ currencyCode
+ }
+ feeTotal {
+ value
+ currencyCode
+ }
+ total {
+ value
+ currencyCode
+ }
+ }
+ }
+ }
+`);
+
+export const UpdateLineItemByIdMutation = graphql(`
+ mutation UpdateLineItemById($input: UpdateLineItemByIdInput!) {
+ updateLineItemById(input: $input) {
+ id
+ name
+ quantity
+ skuId
+ type
+ fulfillmentMode
+ details {
+ productAssetUrl
+ sku
+ unitOfMeasure
+ }
+ totals {
+ subTotal {
+ value
+ currencyCode
+ }
+ taxTotal {
+ value
+ currencyCode
+ }
+ discountTotal {
+ value
+ currencyCode
+ }
+ feeTotal {
+ value
+ currencyCode
+ }
+ }
+ updatedAt
+ }
+ }
+`);
diff --git a/packages/react/src/lib/godaddy/orders-storefront-queries.ts b/packages/react/src/lib/godaddy/orders-storefront-queries.ts
new file mode 100644
index 00000000..4a4dcf4c
--- /dev/null
+++ b/packages/react/src/lib/godaddy/orders-storefront-queries.ts
@@ -0,0 +1,169 @@
+import { graphql } from '@/lib/gql/gql-orders-storefront.tada';
+
+export const GetCartOrderQuery = graphql(`
+ query GetCartOrder($id: ID!) {
+ orderById(id: $id) {
+ id
+ customerId
+ createdAt
+ updatedAt
+ context {
+ storeId
+ channelId
+ }
+ lineItems {
+ id
+ name
+ quantity
+ skuId
+ type
+ fulfillmentMode
+ details {
+ productAssetUrl
+ sku
+ unitOfMeasure
+ selectedOptions {
+ attribute
+ values
+ }
+ selectedAddons {
+ attribute
+ sku
+ values {
+ name
+ costAdjustment {
+ value
+ currencyCode
+ }
+ }
+ }
+ }
+ totals {
+ subTotal {
+ value
+ currencyCode
+ }
+ taxTotal {
+ value
+ currencyCode
+ }
+ discountTotal {
+ value
+ currencyCode
+ }
+ feeTotal {
+ value
+ currencyCode
+ }
+ }
+ discounts {
+ id
+ name
+ code
+ amount {
+ value
+ currencyCode
+ }
+ ratePercentage
+ }
+ taxes {
+ id
+ name
+ amount {
+ value
+ currencyCode
+ }
+ ratePercentage
+ }
+ notes {
+ id
+ content
+ author
+ authorType
+ }
+ }
+ totals {
+ subTotal {
+ value
+ currencyCode
+ }
+ shippingTotal {
+ value
+ currencyCode
+ }
+ taxTotal {
+ value
+ currencyCode
+ }
+ discountTotal {
+ value
+ currencyCode
+ }
+ productDiscountTotal {
+ value
+ currencyCode
+ }
+ shippingDiscountTotal {
+ value
+ currencyCode
+ }
+ feeTotal {
+ value
+ currencyCode
+ }
+ total {
+ value
+ currencyCode
+ }
+ }
+ discounts {
+ id
+ name
+ code
+ amount {
+ value
+ currencyCode
+ }
+ ratePercentage
+ appliedBeforeTax
+ }
+ taxes {
+ id
+ name
+ amount {
+ value
+ currencyCode
+ }
+ ratePercentage
+ included
+ exempted
+ }
+ shipping {
+ firstName
+ lastName
+ email
+ phone
+ companyName
+ address {
+ addressLine1
+ addressLine2
+ addressLine3
+ adminArea1
+ adminArea2
+ adminArea3
+ adminArea4
+ postalCode
+ countryCode
+ }
+ }
+ notes {
+ id
+ content
+ author
+ authorType
+ createdAt
+ }
+ tags
+ }
+ }
+`);
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
index 7f78bda9..d4b06da6 100644
--- a/packages/react/src/types.ts
+++ b/packages/react/src/types.ts
@@ -23,6 +23,15 @@ import {
DraftOrderSkusQuery,
DraftOrderTaxesQuery,
} from '@/lib/godaddy/checkout-queries.ts';
+import {
+ AddCartOrderMutation,
+ AddLineItemBySkuIdMutation,
+ ApplyDiscountCodesMutation,
+ DeleteLineItemByIdMutation,
+ UpdateCartOrderMutation,
+ UpdateLineItemByIdMutation,
+} from '@/lib/godaddy/orders-storefront-mutations.ts';
+import { GetCartOrderQuery } from '@/lib/godaddy/orders-storefront-queries.ts';
export const PaymentProvider = {
STRIPE: 'stripe',
@@ -270,3 +279,68 @@ export type SKUAttributeValue = NonNullable<
>['edges']
>[number]
>['node'];
+
+// Cart/Orders types
+export type AddCartOrderInput = VariablesOf<
+ typeof AddCartOrderMutation
+>['input'];
+
+export type AddLineItemBySkuIdInput = VariablesOf<
+ typeof AddLineItemBySkuIdMutation
+>['input'];
+
+export type UpdateCartOrderInput = VariablesOf<
+ typeof UpdateCartOrderMutation
+>['input'];
+
+export type UpdateLineItemByIdInput = VariablesOf<
+ typeof UpdateLineItemByIdMutation
+>['input'];
+
+export type DeleteLineItemByIdInput = VariablesOf<
+ typeof DeleteLineItemByIdMutation
+>;
+
+export type ApplyDiscountCodesInput = VariablesOf<
+ typeof ApplyDiscountCodesMutation
+>['input'];
+
+export type CartOrder = NonNullable<
+ ResultOf['orderById']
+>;
+
+export type CartLineItem = NonNullable<
+ NonNullable['orderById']>['lineItems']
+>[number];
+
+export type CartOrderTotals = NonNullable<
+ NonNullable['orderById']>['totals']
+>;
+
+export type CartLineItemTotals = NonNullable<
+ NonNullable<
+ NonNullable['orderById']>['lineItems']
+ >[number]['totals']
+>;
+
+export type CartDiscount = NonNullable<
+ NonNullable['orderById']>['discounts']
+>[number];
+
+export type CartTax = NonNullable<
+ NonNullable['orderById']>['taxes']
+>[number];
+
+export type CartShippingInfo = NonNullable<
+ NonNullable['orderById']>['shipping']
+>;
+
+export type CartNote = NonNullable<
+ NonNullable['orderById']>['notes']
+>[number];
+
+export type CartLineItemDetails = NonNullable<
+ NonNullable<
+ NonNullable['orderById']>['lineItems']
+ >[number]['details']
+>;