@tanstack/create 0.65.0 → 0.66.0

package/src/frameworks/react/add-ons/shopify/assets/src/lib/shopify/customer-queries.ts.ejs

@@ -0,0 +1,228 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+/**
+ * GraphQL queries for the Shopify Customer Account API.
+ *
+ * The Customer Account API has its own schema, distinct from the Storefront
+ * API. We hand-type the slices we use; if the surface area grows we can wire
+ * up @shopify/customer-account-api-codegen later.
+ */
+
+export const CUSTOMER_QUERY = /* GraphQL */ `
+  query Customer {
+    customer {
+      id
+      firstName
+      lastName
+      emailAddress {
+        emailAddress
+      }
+      phoneNumber {
+        phoneNumber
+      }
+      defaultAddress {
+        id
+        firstName
+        lastName
+        address1
+        address2
+        city
+        zoneCode
+        zip
+        territoryCode
+        phoneNumber
+      }
+    }
+  }
+`
+
+export type CustomerProfile = {
+  id: string
+  firstName: string | null
+  lastName: string | null
+  emailAddress: { emailAddress: string } | null
+  phoneNumber: { phoneNumber: string } | null
+  defaultAddress: CustomerAddress | null
+}
+
+export type CustomerQueryResult = { customer: CustomerProfile }
+
+export type CustomerAddress = {
+  id: string
+  firstName: string | null
+  lastName: string | null
+  address1: string | null
+  address2: string | null
+  city: string | null
+  zoneCode: string | null
+  zip: string | null
+  territoryCode: string | null
+  phoneNumber: string | null
+}
+
+export const CUSTOMER_ADDRESSES_QUERY = /* GraphQL */ `
+  query CustomerAddresses($first: Int!) {
+    customer {
+      addresses(first: $first) {
+        nodes {
+          id
+          firstName
+          lastName
+          address1
+          address2
+          city
+          zoneCode
+          zip
+          territoryCode
+          phoneNumber
+        }
+      }
+      defaultAddress {
+        id
+      }
+    }
+  }
+`
+
+export type CustomerAddressesQueryResult = {
+  customer: {
+    addresses: { nodes: Array<CustomerAddress> }
+    defaultAddress: { id: string } | null
+  }
+}
+
+export const ORDERS_QUERY = /* GraphQL */ `
+  query CustomerOrders($first: Int!, $after: String) {
+    customer {
+      orders(first: $first, after: $after, sortKey: PROCESSED_AT, reverse: true) {
+        nodes {
+          id
+          name
+          processedAt
+          financialStatus
+          fulfillmentStatus
+          totalPrice {
+            amount
+            currencyCode
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+`
+
+export type OrderListItem = {
+  id: string
+  name: string
+  processedAt: string
+  financialStatus: string | null
+  fulfillmentStatus: string | null
+  totalPrice: { amount: string; currencyCode: string }
+}
+
+export type OrdersQueryResult = {
+  customer: {
+    orders: {
+      nodes: Array<OrderListItem>
+      pageInfo: { hasNextPage: boolean; endCursor: string | null }
+    }
+  }
+}
+
+export const ORDER_QUERY = /* GraphQL */ `
+  query Order($id: ID!) {
+    order(id: $id) {
+      id
+      name
+      processedAt
+      financialStatus
+      fulfillmentStatus
+      totalPrice {
+        amount
+        currencyCode
+      }
+      subtotal {
+        amount
+        currencyCode
+      }
+      totalShipping {
+        amount
+        currencyCode
+      }
+      totalTax {
+        amount
+        currencyCode
+      }
+      shippingAddress {
+        firstName
+        lastName
+        address1
+        address2
+        city
+        zoneCode
+        zip
+        territoryCode
+      }
+      lineItems(first: 50) {
+        nodes {
+          id
+          title
+          quantity
+          variantTitle
+          price {
+            amount
+            currencyCode
+          }
+          image {
+            url
+            altText
+            width
+            height
+          }
+        }
+      }
+    }
+  }
+`
+
+export type OrderDetailLine = {
+  id: string
+  title: string
+  quantity: number
+  variantTitle: string | null
+  price: { amount: string; currencyCode: string }
+  image: {
+    url: string
+    altText: string | null
+    width: number | null
+    height: number | null
+  } | null
+}
+
+export type OrderDetail = {
+  id: string
+  name: string
+  processedAt: string
+  financialStatus: string | null
+  fulfillmentStatus: string | null
+  totalPrice: { amount: string; currencyCode: string }
+  subtotal: { amount: string; currencyCode: string } | null
+  totalShipping: { amount: string; currencyCode: string } | null
+  totalTax: { amount: string; currencyCode: string } | null
+  shippingAddress: {
+    firstName: string | null
+    lastName: string | null
+    address1: string | null
+    address2: string | null
+    city: string | null
+    zoneCode: string | null
+    zip: string | null
+    territoryCode: string | null
+  } | null
+  lineItems: { nodes: Array<OrderDetailLine> }
+}
+
+export type OrderQueryResult = { order: OrderDetail | null }

package/src/frameworks/react/add-ons/shopify/assets/src/lib/shopify/format.ts

@@ -0,0 +1,33 @@
+/**
+ * Browser-safe formatting helpers for Shopify Storefront API responses.
+ * Framework-free — no React, no provider context required.
+ */
+
+export function formatMoney(amount: string | number, currencyCode: string) {
+  return new Intl.NumberFormat(undefined, {
+    style: 'currency',
+    currency: currencyCode,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(typeof amount === 'string' ? Number(amount) : amount)
+}
+
+type ShopifyImageOptions = {
+  width?: number
+  height?: number
+  format?: 'webp' | 'jpg' | 'png'
+  crop?: 'center' | 'top' | 'bottom' | 'left' | 'right'
+}
+
+/**
+ * Append Shopify CDN transform parameters to a product image URL.
+ * Shopify's CDN serves resized/reformatted versions automatically.
+ */
+export function shopifyImageUrl(url: string, opts: ShopifyImageOptions = {}) {
+  const u = new URL(url)
+  if (opts.width) u.searchParams.set('width', String(opts.width))
+  if (opts.height) u.searchParams.set('height', String(opts.height))
+  if (opts.format) u.searchParams.set('format', opts.format)
+  if (opts.crop) u.searchParams.set('crop', opts.crop)
+  return u.toString()
+}