@ohos-ports/shopify 4.8.0-beta.0

package/dist/assets/hydrogen/starter/app/graphql/customer-account/CustomerOrderQuery.ts

@@ -0,0 +1,90 @@
+// NOTE: https://shopify.dev/docs/api/customer/latest/queries/order
+export const CUSTOMER_ORDER_QUERY = `#graphql
+  fragment OrderMoney on MoneyV2 {
+    amount
+    currencyCode
+  }
+  fragment DiscountApplication on DiscountApplication {
+    value {
+      __typename
+      ... on MoneyV2 {
+        ...OrderMoney
+      }
+      ... on PricingPercentageValue {
+        percentage
+      }
+    }
+  }
+  fragment OrderLineItemFull on LineItem {
+    id
+    title
+    quantity
+    price {
+      ...OrderMoney
+    }
+    discountAllocations {
+      allocatedAmount {
+        ...OrderMoney
+      }
+      discountApplication {
+        ...DiscountApplication
+      }
+    }
+    totalDiscount {
+      ...OrderMoney
+    }
+    image {
+      altText
+      height
+      url
+      id
+      width
+    }
+    variantTitle
+  }
+  fragment Order on Order {
+    id
+    name
+    confirmationNumber
+    statusPageUrl
+    fulfillmentStatus
+    processedAt
+    fulfillments(first: 1) {
+      nodes {
+        status
+      }
+    }
+    totalTax {
+      ...OrderMoney
+    }
+    totalPrice {
+      ...OrderMoney
+    }
+    subtotal {
+      ...OrderMoney
+    }
+    shippingAddress {
+      name
+      formatted(withName: true)
+      formattedArea
+    }
+    discountApplications(first: 100) {
+      nodes {
+        ...DiscountApplication
+      }
+    }
+    lineItems(first: 100) {
+      nodes {
+        ...OrderLineItemFull
+      }
+    }
+  }
+  query Order($orderId: ID!, $language: LanguageCode)
+    @inContext(language: $language) {
+    order(id: $orderId) {
+      ... on Order {
+        ...Order
+      }
+    }
+  }
+` as const;

package/dist/assets/hydrogen/starter/app/graphql/customer-account/CustomerOrdersQuery.ts

@@ -0,0 +1,63 @@
+// NOTE: https://shopify.dev/docs/api/customer/latest/objects/Order
+export const ORDER_ITEM_FRAGMENT = `#graphql
+  fragment OrderItem on Order {
+    totalPrice {
+      amount
+      currencyCode
+    }
+    financialStatus
+    fulfillmentStatus
+    fulfillments(first: 1) {
+      nodes {
+        status
+      }
+    }
+    id
+    number
+    confirmationNumber
+    processedAt
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/customer/latest/objects/Customer
+export const CUSTOMER_ORDERS_FRAGMENT = `#graphql
+  fragment CustomerOrders on Customer {
+    orders(
+      sortKey: PROCESSED_AT,
+      reverse: true,
+      first: $first,
+      last: $last,
+      before: $startCursor,
+      after: $endCursor,
+      query: $query
+    ) {
+      nodes {
+        ...OrderItem
+      }
+      pageInfo {
+        hasPreviousPage
+        hasNextPage
+        endCursor
+        startCursor
+      }
+    }
+  }
+  ${ORDER_ITEM_FRAGMENT}
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/customer/latest/queries/customer
+export const CUSTOMER_ORDERS_QUERY = `#graphql
+  ${CUSTOMER_ORDERS_FRAGMENT}
+  query CustomerOrders(
+    $endCursor: String
+    $first: Int
+    $last: Int
+    $startCursor: String
+    $query: String
+    $language: LanguageCode
+  ) @inContext(language: $language) {
+    customer {
+      ...CustomerOrders
+    }
+  }
+` as const;

package/dist/assets/hydrogen/starter/app/graphql/customer-account/CustomerUpdateMutation.ts

@@ -0,0 +1,25 @@
+// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerUpdate
+export const CUSTOMER_UPDATE_MUTATION = `#graphql
+  mutation customerUpdate(
+    $customer: CustomerUpdateInput!
+    $language: LanguageCode
+  ) @inContext(language: $language) {
+    customerUpdate(input: $customer) {
+      customer {
+        firstName
+        lastName
+        emailAddress {
+          emailAddress
+        }
+        phoneNumber {
+          phoneNumber
+        }
+      }
+      userErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+` as const;

package/dist/assets/hydrogen/starter/app/lib/context.ts

@@ -0,0 +1,65 @@
+import {createHydrogenContext} from '@shopify/hydrogen';
+import {AppSession} from '~/lib/session';
+import {CART_QUERY_FRAGMENT} from '~/lib/fragments';
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
+
+// Define the additional context object
+const additionalContext = {
+  // Additional context for custom properties, CMS clients, 3P SDKs, etc.
+  // These will be available as both context.propertyName and context.get(propertyContext)
+  // Example of complex objects that could be added:
+  // cms: await createCMSClient(env),
+  // reviews: await createReviewsClient(env),
+} as const;
+
+// Automatically augment HydrogenAdditionalContext with the additional context type
+type AdditionalContextType = typeof additionalContext;
+
+declare global {
+  interface HydrogenAdditionalContext extends AdditionalContextType {}
+
+  // Augment HydrogenCustomCartFragment with the codegen'd cart fragment type so
+  // that context.cart.get() and all cart mutations return the extended cart type.
+  interface HydrogenCustomCartFragment extends CartApiQueryFragment {}
+}
+
+/**
+ * Creates Hydrogen context for React Router 7.9.x
+ * Returns HydrogenRouterContextProvider with hybrid access patterns
+ * */
+export async function createHydrogenRouterContext(
+  request: Request,
+  env: Env,
+  executionContext: ExecutionContext,
+) {
+  /**
+   * Open a cache instance in the worker and a custom session instance.
+   */
+  if (!env?.SESSION_SECRET) {
+    throw new Error('SESSION_SECRET environment variable is not set');
+  }
+
+  const waitUntil = executionContext.waitUntil.bind(executionContext);
+  const [cache, session] = await Promise.all([
+    caches.open('hydrogen'),
+    AppSession.init(request, [env.SESSION_SECRET]),
+  ]);
+
+  const hydrogenContext = createHydrogenContext(
+    {
+      env,
+      request,
+      cache,
+      waitUntil,
+      session,
+      // Or detect from URL path based on locale subpath, cookies, or any other strategy
+      i18n: {language: 'EN', country: 'US'},
+      cart: {
+        queryFragment: CART_QUERY_FRAGMENT,
+      },
+    },
+    additionalContext,
+  );
+
+  return hydrogenContext;
+}

package/dist/assets/hydrogen/starter/app/lib/fragments.ts

@@ -0,0 +1,242 @@
+// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/cart
+export const CART_QUERY_FRAGMENT = `#graphql
+  fragment Money on MoneyV2 {
+    currencyCode
+    amount
+  }
+  fragment CartLine on CartLine {
+    id
+    quantity
+    attributes {
+      key
+      value
+    }
+    cost {
+      totalAmount {
+        ...Money
+      }
+      amountPerQuantity {
+        ...Money
+      }
+      compareAtAmountPerQuantity {
+        ...Money
+      }
+    }
+    merchandise {
+      ... on ProductVariant {
+        id
+        availableForSale
+        compareAtPrice {
+          ...Money
+        }
+        price {
+          ...Money
+        }
+        requiresShipping
+        title
+        image {
+          id
+          url
+          altText
+          width
+          height
+
+        }
+        product {
+          handle
+          title
+          id
+          vendor
+        }
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+    parentRelationship {
+      parent {
+        id
+      }
+    }
+  }
+  fragment CartLineComponent on ComponentizableCartLine {
+    id
+    quantity
+    attributes {
+      key
+      value
+    }
+    cost {
+      totalAmount {
+        ...Money
+      }
+      amountPerQuantity {
+        ...Money
+      }
+      compareAtAmountPerQuantity {
+        ...Money
+      }
+    }
+    merchandise {
+      ... on ProductVariant {
+        id
+        availableForSale
+        compareAtPrice {
+          ...Money
+        }
+        price {
+          ...Money
+        }
+        requiresShipping
+        title
+        image {
+          id
+          url
+          altText
+          width
+          height
+        }
+        product {
+          handle
+          title
+          id
+          vendor
+        }
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+    lineComponents {
+      ...CartLine
+    }
+  }
+  fragment CartApiQuery on Cart {
+    updatedAt
+    id
+    appliedGiftCards {
+      id
+      lastCharacters
+      amountUsed {
+        ...Money
+      }
+    }
+    checkoutUrl
+    totalQuantity
+    buyerIdentity {
+      countryCode
+      customer {
+        id
+        email
+        firstName
+        lastName
+        displayName
+      }
+      email
+      phone
+    }
+    lines(first: $numCartLines) {
+      nodes {
+        ...CartLine
+      }
+      nodes {
+        ...CartLineComponent
+      }
+    }
+    cost {
+      subtotalAmount {
+        ...Money
+      }
+      totalAmount {
+        ...Money
+      }
+      totalDutyAmount {
+        ...Money
+      }
+      totalTaxAmount {
+        ...Money
+      }
+    }
+    note
+    attributes {
+      key
+      value
+    }
+    discountCodes {
+      code
+      applicable
+    }
+  }
+` as const;
+
+const MENU_FRAGMENT = `#graphql
+  fragment MenuItem on MenuItem {
+    id
+    resourceId
+    tags
+    title
+    type
+    url
+  }
+  fragment ChildMenuItem on MenuItem {
+    ...MenuItem
+  }
+  fragment ParentMenuItem on MenuItem {
+    ...MenuItem
+    items {
+      ...ChildMenuItem
+    }
+  }
+  fragment Menu on Menu {
+    id
+    items {
+      ...ParentMenuItem
+    }
+  }
+` as const;
+
+export const HEADER_QUERY = `#graphql
+  fragment Shop on Shop {
+    id
+    name
+    description
+    primaryDomain {
+      url
+    }
+    brand {
+      logo {
+        image {
+          url
+        }
+      }
+    }
+  }
+  query Header(
+    $country: CountryCode
+    $headerMenuHandle: String!
+    $language: LanguageCode
+  ) @inContext(language: $language, country: $country) {
+    shop {
+      ...Shop
+    }
+    menu(handle: $headerMenuHandle) {
+      ...Menu
+    }
+  }
+  ${MENU_FRAGMENT}
+` as const;
+
+export const FOOTER_QUERY = `#graphql
+  query Footer(
+    $country: CountryCode
+    $footerMenuHandle: String!
+    $language: LanguageCode
+  ) @inContext(language: $language, country: $country) {
+    menu(handle: $footerMenuHandle) {
+      ...Menu
+    }
+  }
+  ${MENU_FRAGMENT}
+` as const;

package/dist/assets/hydrogen/starter/app/lib/orderFilters.ts

@@ -0,0 +1,90 @@
+/**
+ * Field name constants for order filtering
+ */
+export const ORDER_FILTER_FIELDS = {
+  NAME: 'name',
+  CONFIRMATION_NUMBER: 'confirmation_number',
+} as const;
+
+/**
+ * Parameters for filtering customer orders, see: https://shopify.dev/docs/api/customer/latest/queries/customer#returns-Customer.fields.orders.arguments.query
+ */
+export interface OrderFilterParams {
+  /** Order name or number (e.g., "#1001" or "1001") */
+  name?: string;
+  /** Order confirmation number */
+  confirmationNumber?: string;
+}
+
+/**
+ * Sanitizes a filter value to prevent injection attacks or malformed queries.
+ * Allows only alphanumeric characters, underscore, and dash.
+ * @param value - The input string to sanitize
+ * @returns The sanitized string
+ */
+function sanitizeFilterValue(value: string): string {
+  // Only allow alphanumeric, underscore, and dash
+  // Remove anything else to prevent injection
+  return value.replace(/[^a-zA-Z0-9_\-]/g, '');
+}
+
+/**
+ * Builds a query string for filtering customer orders using the Customer Account API
+ * @param filters - The filter parameters
+ * @returns A formatted query string for the GraphQL query parameter, or undefined if no filters
+ * @example
+ * buildOrderSearchQuery(\{ name: '1001' \}) // returns "name:1001"
+ * buildOrderSearchQuery(\{ name: '1001', confirmationNumber: 'ABC123' \}) // returns "name:1001 AND confirmation_number:ABC123"
+ */
+export function buildOrderSearchQuery(
+  filters: OrderFilterParams,
+): string | undefined {
+  const queryParts: string[] = [];
+
+  if (filters.name) {
+    // Remove # if present and trim
+    const cleanName = filters.name.replace(/^#/, '').trim();
+    const sanitizedName = sanitizeFilterValue(cleanName);
+    if (sanitizedName) {
+      queryParts.push(`name:${sanitizedName}`);
+    }
+  }
+
+  if (filters.confirmationNumber) {
+    const cleanConfirmation = filters.confirmationNumber.trim();
+    const sanitizedConfirmation = sanitizeFilterValue(cleanConfirmation);
+    if (sanitizedConfirmation) {
+      queryParts.push(`confirmation_number:${sanitizedConfirmation}`);
+    }
+  }
+
+  return queryParts.length > 0 ? queryParts.join(' AND ') : undefined;
+}
+
+/**
+ * Parses order filter parameters from URLSearchParams
+ * @param searchParams - The URL search parameters
+ * @returns Parsed filter parameters
+ * @example
+ * const url = new URL('https://example.com/orders?name=1001&confirmation_number=ABC123');
+ * parseOrderFilters(url.searchParams) // returns \{ name: '1001', confirmationNumber: 'ABC123' \}
+ */
+export function parseOrderFilters(
+  searchParams: URLSearchParams,
+): OrderFilterParams {
+  const filters: OrderFilterParams = {};
+
+  const name = searchParams.get(ORDER_FILTER_FIELDS.NAME);
+  if (name) {
+    filters.name = name;
+  }
+
+  const confirmationNumber = searchParams.get(
+    ORDER_FILTER_FIELDS.CONFIRMATION_NUMBER,
+  );
+  if (confirmationNumber) {
+    filters.confirmationNumber = confirmationNumber;
+  }
+
+  return filters;
+}

package/dist/assets/hydrogen/starter/app/lib/redirect.ts

@@ -0,0 +1,23 @@
+import {redirect} from 'react-router';
+
+export function redirectIfHandleIsLocalized(
+  request: Request,
+  ...localizedResources: Array<{
+    handle: string;
+    data: {handle: string} & unknown;
+  }>
+) {
+  const url = new URL(request.url);
+  let shouldRedirect = false;
+
+  localizedResources.forEach(({handle, data}) => {
+    if (handle !== data.handle) {
+      url.pathname = url.pathname.replace(handle, data.handle);
+      shouldRedirect = true;
+    }
+  });
+
+  if (shouldRedirect) {
+    throw redirect(url.toString());
+  }
+}

package/dist/assets/hydrogen/starter/app/lib/search.ts

@@ -0,0 +1,79 @@
+import type {
+  PredictiveSearchQuery,
+  RegularSearchQuery,
+} from 'storefrontapi.generated';
+
+type ResultWithItems<Type extends 'predictive' | 'regular', Items> = {
+  type: Type;
+  term: string;
+  error?: string;
+  result: {total: number; items: Items};
+};
+
+export type RegularSearchReturn = ResultWithItems<
+  'regular',
+  RegularSearchQuery
+>;
+export type PredictiveSearchReturn = ResultWithItems<
+  'predictive',
+  NonNullable<PredictiveSearchQuery['predictiveSearch']>
+>;
+
+/**
+ * Returns the empty state of a predictive search result to reset the search state.
+ */
+export function getEmptyPredictiveSearchResult(): PredictiveSearchReturn['result'] {
+  return {
+    total: 0,
+    items: {
+      articles: [],
+      collections: [],
+      products: [],
+      pages: [],
+      queries: [],
+    },
+  };
+}
+
+interface UrlWithTrackingParams {
+  /** The base URL to which the tracking parameters will be appended. */
+  baseUrl: string;
+  /** The trackingParams returned by the Storefront API. */
+  trackingParams?: string | null;
+  /** Any additional query parameters to be appended to the URL. */
+  params?: Record<string, string>;
+  /** The search term to be appended to the URL. */
+  term: string;
+}
+
+/**
+ * A utility function that appends tracking parameters to a URL. Tracking parameters are
+ * used internally by Shopify to enhance search results and admin dashboards.
+ * @example
+ * ```ts
+ * const baseUrl = 'www.example.com';
+ * const trackingParams = 'utm_source=shopify&utm_medium=shopify_app&utm_campaign=storefront';
+ * const params = { foo: 'bar' };
+ * const term = 'search term';
+ * const url = urlWithTrackingParams({ baseUrl, trackingParams, params, term });
+ * console.log(url);
+ * // Output: 'https://www.example.com?foo=bar&q=search%20term&utm_source=shopify&utm_medium=shopify_app&utm_campaign=storefront'
+ * ```
+ */
+export function urlWithTrackingParams({
+  baseUrl,
+  trackingParams,
+  params: extraParams,
+  term,
+}: UrlWithTrackingParams) {
+  let search = new URLSearchParams({
+    ...extraParams,
+    q: encodeURIComponent(term),
+  }).toString();
+
+  if (trackingParams) {
+    search = `${search}&${trackingParams}`;
+  }
+
+  return `${baseUrl}?${search}`;
+}