@decocms/apps 0.20.1

package/shopify/loaders/ProductList.ts

@@ -0,0 +1,101 @@
+import type { Product } from "../../commerce/types/commerce";
+import { getShopifyClient } from "../client";
+import { ProductsByCollection, SearchProducts } from "../utils/storefront/queries";
+import { toProduct, type ProductShopify } from "../utils/transform";
+import type { Metafield } from "../utils/types";
+import {
+  type CollectionSortKeys,
+  type SearchSortKeys,
+  searchSortShopify,
+  sortShopify,
+} from "../utils/utils";
+
+export interface QueryProps {
+  query: string;
+  count: number;
+  sort?: SearchSortKeys;
+}
+
+export interface CollectionProps {
+  collection: string;
+  count: number;
+  sort?: CollectionSortKeys;
+}
+
+export interface FilterProps {
+  tags?: string[];
+  productTypes?: string[];
+  productVendors?: string[];
+  priceMin?: number;
+  priceMax?: number;
+  variantOptions?: { name: string; value: string }[];
+}
+
+export type Props = {
+  props: QueryProps | CollectionProps;
+  filters?: FilterProps;
+  metafields?: Metafield[];
+};
+
+const isQueryList = (p: any): p is QueryProps =>
+  typeof p.query === "string" && typeof p.count === "number";
+
+export default async function productListLoader(
+  expandedProps: Props,
+  url?: URL,
+): Promise<Product[] | null> {
+  const client = getShopifyClient();
+
+  const props = expandedProps.props ??
+    (expandedProps as unknown as Props["props"]);
+
+  const count = props.count ?? 12;
+  const metafields = expandedProps.metafields || [];
+  const sort = props.sort ?? "";
+
+  const filters: any[] = [];
+  expandedProps.filters?.tags?.forEach((tag) => filters.push({ tag }));
+  expandedProps.filters?.productTypes?.forEach((productType) => filters.push({ productType }));
+  expandedProps.filters?.productVendors?.forEach((productVendor) => filters.push({ productVendor }));
+  if (expandedProps.filters?.priceMin) filters.push({ price: { min: expandedProps.filters.priceMin } });
+  if (expandedProps.filters?.priceMax) filters.push({ price: { max: expandedProps.filters.priceMax } });
+  expandedProps.filters?.variantOptions?.forEach((variantOption) => filters.push({ variantOption }));
+
+  let shopifyProducts: { nodes: ProductShopify[] } | undefined;
+
+  if (isQueryList(props)) {
+    const data = await client.query<{ search: { nodes: ProductShopify[] } }>(
+      SearchProducts,
+      {
+        first: count,
+        query: props.query,
+        productFilters: filters,
+        identifiers: metafields,
+        ...searchSortShopify[sort],
+      },
+    );
+    shopifyProducts = data.search;
+  } else {
+    const data = await client.query<{
+      collection?: { products: { nodes: ProductShopify[] } };
+    }>(
+      ProductsByCollection,
+      {
+        first: count,
+        handle: (props as CollectionProps).collection,
+        filters,
+        identifiers: metafields,
+        ...sortShopify[sort],
+      },
+    );
+    shopifyProducts = data.collection?.products;
+  }
+
+  const baseUrl = url ?? new URL("https://localhost");
+
+  const products = shopifyProducts?.nodes.map((p) =>
+    toProduct(p, p.variants.nodes[0], baseUrl)
+  );
+
+  return products ?? [];
+}

package/shopify/loaders/ProductListingPage.ts

@@ -0,0 +1,180 @@
+import type { ProductListingPage } from "../../commerce/types/commerce";
+import { getShopifyClient } from "../client";
+import { ProductsByCollection, SearchProducts } from "../utils/storefront/queries";
+import { toFilter, toProduct, type ProductShopify } from "../utils/transform";
+import type { Metafield } from "../utils/types";
+import {
+  getFiltersByUrl,
+  searchSortOptions,
+  searchSortShopify,
+  sortOptions,
+  sortShopify,
+} from "../utils/utils";
+
+interface PageInfo {
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  endCursor?: string;
+  startCursor?: string;
+}
+
+interface FilterNode {
+  id: string;
+  label: string;
+  type: string;
+  values: Array<{ id: string; label: string; count: number; input: string }>;
+}
+
+interface ProductConnection {
+  nodes: ProductShopify[];
+  pageInfo: PageInfo;
+  filters?: FilterNode[];
+}
+
+export interface Props {
+  query?: string;
+  collectionName?: string;
+  count: number;
+  metafields?: Metafield[];
+  pageOffset?: number;
+  page?: number;
+  startCursor?: string;
+  endCursor?: string;
+  pageHref?: string;
+}
+
+export default async function productListingPageLoader(
+  props: Props,
+  url?: URL,
+): Promise<ProductListingPage | null> {
+  const pageUrl = url ?? new URL(props.pageHref || "https://localhost");
+  const client = getShopifyClient();
+
+  const count = props.count ?? 12;
+  const query = props.query || pageUrl.searchParams.get("q") || "";
+  const currentPageoffset = props.pageOffset ?? 1;
+  const pageParam = pageUrl.searchParams.get("page")
+    ? Number(pageUrl.searchParams.get("page")) - currentPageoffset
+    : 0;
+  const page = props.page || pageParam;
+  const endCursor = props.endCursor || pageUrl.searchParams.get("endCursor") || "";
+  const startCursor = props.startCursor || pageUrl.searchParams.get("startCursor") || "";
+  const metafields = props.metafields || [];
+
+  const isSearch = Boolean(query);
+  let hasNextPage = false;
+  let hasPreviousPage = false;
+  let shopifyProducts: ProductConnection | undefined;
+  let shopifyFilters: FilterNode[] | undefined;
+  let records: number | undefined;
+  let collectionTitle: string | undefined;
+  let collectionDescription: string | undefined;
+
+  const sort = pageUrl.searchParams.get("sort") ?? "";
+
+  if (isSearch) {
+    const data = await client.query<{
+      search: ProductConnection & { totalCount?: number; productFilters?: FilterNode[] };
+    }>(
+      SearchProducts,
+      {
+        ...(!endCursor && { first: count }),
+        ...(endCursor && { last: count }),
+        ...(startCursor && { after: startCursor }),
+        ...(endCursor && { before: endCursor }),
+        query,
+        productFilters: getFiltersByUrl(pageUrl),
+        identifiers: metafields,
+        ...searchSortShopify[sort],
+      },
+    );
+
+    shopifyProducts = data.search;
+    shopifyFilters = data.search?.productFilters;
+    records = data.search?.totalCount;
+    hasNextPage = Boolean(data.search?.pageInfo.hasNextPage);
+    hasPreviousPage = Boolean(data.search?.pageInfo.hasPreviousPage);
+  } else {
+    const pathname = props.collectionName || pageUrl.pathname.split("/")[1];
+
+    const data = await client.query<{
+      collection?: {
+        title?: string;
+        description?: string;
+        products: ProductConnection;
+      };
+    }>(
+      ProductsByCollection,
+      {
+        ...(!endCursor && { first: count }),
+        ...(endCursor && { last: count }),
+        ...(startCursor && { after: startCursor }),
+        ...(endCursor && { before: endCursor }),
+        identifiers: metafields,
+        handle: pathname,
+        filters: getFiltersByUrl(pageUrl),
+        ...sortShopify[sort],
+      },
+    );
+
+    shopifyProducts = data.collection?.products;
+    shopifyFilters = data.collection?.products?.filters;
+    hasNextPage = Boolean(data.collection?.products.pageInfo.hasNextPage);
+    hasPreviousPage = Boolean(data.collection?.products.pageInfo.hasPreviousPage);
+    collectionTitle = data.collection?.title;
+    collectionDescription = data.collection?.description;
+  }
+
+  const products = shopifyProducts?.nodes?.map((p) =>
+    toProduct(p, p.variants.nodes[0], pageUrl)
+  );
+
+  const nextPage = new URLSearchParams(pageUrl.searchParams);
+  const previousPage = new URLSearchParams(pageUrl.searchParams);
+
+  if (hasNextPage) {
+    nextPage.set("page", (page + currentPageoffset + 1).toString());
+    nextPage.set("startCursor", shopifyProducts?.pageInfo.endCursor ?? "");
+    nextPage.delete("endCursor");
+  }
+
+  if (hasPreviousPage) {
+    previousPage.set("page", (page + currentPageoffset - 1).toString());
+    previousPage.set("endCursor", shopifyProducts?.pageInfo.startCursor ?? "");
+    previousPage.delete("startCursor");
+  }
+
+  const filters = shopifyFilters?.map((filter) => toFilter(filter, pageUrl));
+  const currentPage = page + currentPageoffset;
+
+  return {
+    "@type": "ProductListingPage",
+    breadcrumb: {
+      "@type": "BreadcrumbList",
+      itemListElement: [{
+        "@type": "ListItem" as const,
+        name: isSearch ? query : pageUrl.pathname.split("/")[1],
+        item: isSearch ? pageUrl.href : pageUrl.pathname,
+        position: 2,
+      }],
+      numberOfItems: 1,
+    },
+    filters: filters ?? [],
+    products: products ?? [],
+    pageInfo: {
+      nextPage: hasNextPage ? `?${nextPage}` : undefined,
+      previousPage: hasPreviousPage ? `?${previousPage}` : undefined,
+      currentPage,
+      records,
+      recordPerPage: count,
+    },
+    sortOptions: isSearch ? searchSortOptions : sortOptions,
+    seo: {
+      title: collectionTitle || "",
+      description: collectionDescription || "",
+      canonical: `${pageUrl.origin}${pageUrl.pathname}${
+        page >= 1 ? `?page=${page}` : ""
+      }`,
+    },
+  };
+}

package/shopify/loaders/RelatedProducts.ts

@@ -0,0 +1,45 @@
+import type { Product } from "../../commerce/types/commerce";
+import { getShopifyClient } from "../client";
+import { GetProduct, ProductRecommendations } from "../utils/storefront/queries";
+import { toProduct, type ProductShopify } from "../utils/transform";
+import type { Metafield } from "../utils/types";
+
+export interface Props {
+  slug: string;
+  count?: number;
+  metafields?: Metafield[];
+}
+
+export default async function relatedProductsLoader(
+  props: Props,
+  url?: URL,
+): Promise<Product[] | null> {
+  const client = getShopifyClient();
+  const { slug, count = 10, metafields = [] } = props;
+
+  const splitted = slug?.split("-") ?? [];
+  const maybeSkuId = Number(splitted[splitted.length - 1]);
+  const handle = splitted.slice(0, maybeSkuId ? -1 : undefined).join("-");
+
+  const productData = await client.query<{ product?: ProductShopify }>(
+    GetProduct,
+    { handle, identifiers: metafields },
+  );
+
+  if (!productData?.product) return [];
+
+  const data = await client.query<{
+    productRecommendations?: ProductShopify[];
+  }>(
+    ProductRecommendations,
+    { productId: productData.product.id, identifiers: metafields },
+  );
+
+  if (!data?.productRecommendations) return [];
+
+  const baseUrl = url ?? new URL("https://localhost");
+
+  return data.productRecommendations
+    .map((p) => toProduct(p, p.variants.nodes[0], baseUrl))
+    .slice(0, count);
+}

package/shopify/loaders/cart.ts

@@ -0,0 +1,73 @@
+import { getShopifyClient } from "../client";
+import { getCartCookie, setCartCookie } from "../utils/cart";
+import { CreateCart, GetCart } from "../utils/storefront/queries";
+
+export interface CartLine {
+  id: string;
+  quantity: number;
+  merchandise: {
+    id: string;
+    title: string;
+    image?: { url: string; altText?: string | null } | null;
+    product: { title: string; handle: string; onlineStoreUrl?: string | null };
+    price: { amount: string; currencyCode: string };
+  };
+  discountAllocations?: Array<{
+    code?: string;
+    discountedAmount?: { amount: string; currencyCode: string };
+  }>;
+  cost?: {
+    totalAmount: { amount: string; currencyCode: string };
+    subtotalAmount: { amount: string; currencyCode: string };
+    amountPerQuantity?: { amount: string; currencyCode: string };
+    compareAtAmountPerQuantity?: { amount: string; currencyCode: string } | null;
+  };
+}
+
+export interface ShopifyCart {
+  id: string;
+  checkoutUrl: string;
+  totalQuantity: number;
+  lines: { nodes: CartLine[] };
+  cost: {
+    totalTaxAmount?: { amount: string; currencyCode: string };
+    subtotalAmount: { amount: string; currencyCode: string };
+    totalAmount: { amount: string; currencyCode: string };
+    checkoutChargeAmount?: { amount: string; currencyCode: string };
+  };
+  discountCodes?: Array<{ applicable: boolean; code: string }>;
+  discountAllocations?: Array<{
+    discountedAmount: { amount: string; currencyCode: string };
+  }>;
+}
+
+export async function getCart(
+  requestHeaders: Headers,
+  responseHeaders?: Headers,
+): Promise<ShopifyCart | null> {
+  const client = getShopifyClient();
+  const maybeCartId = getCartCookie(requestHeaders);
+
+  const cartId = maybeCartId ??
+    await client.query<{ payload?: { cart?: { id: string } } }>(CreateCart)
+      .then((data) => data.payload?.cart?.id);
+
+  if (!cartId) throw new Error("Missing cart id");
+
+  const cart = await client.query<{ cart?: ShopifyCart }>(
+    GetCart,
+    { id: decodeURIComponent(cartId) },
+  ).then((data) => data.cart ?? null);
+
+  if (responseHeaders) {
+    setCartCookie(responseHeaders, cartId);
+  }
+
+  return cart;
+}
+
+export async function createCart(): Promise<string | null> {
+  const client = getShopifyClient();
+  const data = await client.query<{ payload?: { cart?: { id: string } } }>(CreateCart);
+  return data?.payload?.cart?.id ?? null;
+}

package/shopify/loaders/shop.ts

@@ -0,0 +1,40 @@
+import { getShopifyClient } from "../client";
+import { GetShopInfo } from "../utils/storefront/queries";
+import type { Metafield } from "../utils/types";
+
+export interface Shop {
+  name: string;
+  description?: string;
+  privacyPolicy?: { title: string; body: string };
+  refundPolicy?: { title: string; body: string };
+  shippingPolicy?: { title: string; body: string };
+  subscriptionPolicy?: { title: string; body: string };
+  termsOfService?: { title: string; body: string };
+  metafields?: Array<{
+    description?: string | null;
+    key: string;
+    namespace: string;
+    type: string;
+    value: string;
+    reference?: { image?: { url: string } } | null;
+    references?: { edges: Array<{ node: { image?: { url: string } } }> } | null;
+  } | null>;
+}
+
+export interface Props {
+  metafields?: Metafield[];
+}
+
+export default async function shopLoader(
+  props?: Props,
+): Promise<Shop> {
+  const client = getShopifyClient();
+  const metafields = props?.metafields || [];
+
+  const data = await client.query<{ shop: Shop }>(
+    GetShopInfo,
+    { identifiers: metafields },
+  );
+
+  return data.shop;
+}

package/shopify/loaders/user.ts

@@ -0,0 +1,44 @@
+import { getShopifyClient } from "../client";
+import { FetchCustomerInfo } from "../utils/storefront/queries";
+import { getUserCookie } from "../utils/user";
+
+export interface ShopifyUser {
+  "@id": string;
+  email: string;
+  givenName: string;
+  familyName: string;
+}
+
+export default async function userLoader(
+  requestHeaders: Headers,
+): Promise<ShopifyUser | null> {
+  const client = getShopifyClient();
+  const customerAccessToken = getUserCookie(requestHeaders);
+
+  if (!customerAccessToken) return null;
+
+  try {
+    const data = await client.query<{
+      customer?: {
+        id: string;
+        email?: string | null;
+        firstName?: string | null;
+        lastName?: string | null;
+      };
+    }>(
+      FetchCustomerInfo,
+      { customerAccessToken },
+    );
+
+    if (!data.customer) return null;
+
+    return {
+      "@id": data.customer.id,
+      email: data.customer.email ?? "",
+      givenName: data.customer.firstName ?? "",
+      familyName: data.customer.lastName ?? "",
+    };
+  } catch {
+    return null;
+  }
+}

package/shopify/utils/admin/admin.ts

@@ -0,0 +1,57 @@
+
+// deno-fmt-ignore-file
+// deno-lint-ignore-file no-explicit-any ban-types ban-unused-ignore
+
+export type Maybe<T> = T | null;
+
+export type Scalars = {
+  ID: { input: string; output: string };
+  String: { input: string; output: string };
+  Boolean: { input: boolean; output: boolean };
+  Int: { input: number; output: number };
+  Float: { input: number; output: number };
+  ARN: { input: any; output: any };
+  Date: { input: any; output: any };
+  DateTime: { input: any; output: any };
+  Decimal: { input: any; output: any };
+  FormattedString: { input: any; output: any };
+  HTML: { input: any; output: any };
+  JSON: { input: any; output: any };
+  Money: { input: any; output: any };
+  StorefrontID: { input: any; output: any };
+  URL: { input: any; output: any };
+  UnsignedInt64: { input: any; output: any };
+  UtcOffset: { input: any; output: any };
+};
+
+/** Return type for `draftOrderCalculate` mutation. */
+export type DraftOrderCalculatePayload = {
+  /** The calculated properties for a draft order. */
+  calculatedDraftOrder?: Maybe<CalculatedDraftOrder>;
+};
+
+export interface CalculatedDraftOrder {
+  /** The available shipping rates for the draft order. Requires a customer with a valid shipping address and at least one line item. */
+  availableShippingRates: Array<ShippingRate>;
+}
+
+export type ShippingRate = {
+  /** Human-readable unique identifier for this shipping rate. */
+  handle: Scalars["String"]["output"];
+  /** The cost associated with the shipping rate. */
+  price: MoneyV2;
+  /** The name of the shipping rate. */
+  title: Scalars["String"]["output"];
+};
+
+export type MoneyV2 = {
+  /** Decimal money amount. */
+  amount: Scalars["Decimal"]["output"];
+  /** Currency of the money. */
+  currencyCode: CurrencyCode;
+};
+
+export enum CurrencyCode {
+  CAD = "CAD",
+  Usd = "USD",
+}

package/shopify/utils/admin/queries.ts

@@ -0,0 +1,29 @@
+import { gql } from "../graphql";
+
+// Fixme: This is to avoid typescript generation errors
+// because it does not accept generating an empty schema
+// TODO: Remove this once you add any other query
+export const Noop = {
+  query: gql`query Noop { app(id: "") { description } }`,
+};
+
+export const draftOrderCalculate = {
+  query: gql` mutation draftOrderCalculate($input: DraftOrderInput!) {
+    calculatedDraftOrder: draftOrderCalculate(input: $input) {
+      calculatedDraftOrder {
+          availableShippingRates {
+              title
+              handle
+              price {
+                amount
+              }
+          }
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+  `,
+};

package/shopify/utils/cart.ts

@@ -0,0 +1,28 @@
+import { getCookies, setCookie } from "./cookies";
+
+const CART_COOKIE = "cart";
+const SHOPIFY_PREFIX = "gid://shopify/Cart/";
+
+const ONE_WEEK_MS = 7 * 24 * 3600 * 1_000;
+
+export const getCartCookie = (headers: Headers): string | null => {
+  const cookies = getCookies(headers);
+
+  if (!cookies[CART_COOKIE]) {
+    return null;
+  }
+
+  return decodeURIComponent(`${SHOPIFY_PREFIX}${cookies[CART_COOKIE]}`);
+};
+
+export const setCartCookie = (headers: Headers, cartId: string) => {
+  setCookie(headers, {
+    name: CART_COOKIE,
+    value: cartId.replace(SHOPIFY_PREFIX, ""),
+    path: "/",
+    expires: new Date(Date.now() + ONE_WEEK_MS),
+    httpOnly: true,
+    secure: true,
+    sameSite: "Lax",
+  });
+};

package/shopify/utils/cookies.ts

@@ -0,0 +1,85 @@
+/**
+ * Node.js-compatible cookie helpers.
+ * Replaces Deno's std/http/cookie.ts.
+ */
+
+export function getCookies(headers: Headers): Record<string, string> {
+  const cookieHeader = headers.get("cookie") || "";
+  const cookies: Record<string, string> = {};
+  for (const pair of cookieHeader.split(";")) {
+    const [key, ...rest] = pair.trim().split("=");
+    if (key) {
+      cookies[key.trim()] = decodeURIComponent(rest.join("=").trim());
+    }
+  }
+  return cookies;
+}
+
+export function setCookie(
+  headers: Headers,
+  options: {
+    name: string;
+    value: string;
+    path?: string;
+    expires?: Date;
+    maxAge?: number;
+    httpOnly?: boolean;
+    secure?: boolean;
+    sameSite?: "Strict" | "Lax" | "None";
+  }
+) {
+  const parts = [`${options.name}=${encodeURIComponent(options.value)}`];
+  if (options.path) parts.push(`Path=${options.path}`);
+  if (options.expires) parts.push(`Expires=${options.expires.toUTCString()}`);
+  if (options.maxAge !== undefined) parts.push(`Max-Age=${options.maxAge}`);
+  if (options.httpOnly) parts.push("HttpOnly");
+  if (options.secure) parts.push("Secure");
+  if (options.sameSite) parts.push(`SameSite=${options.sameSite}`);
+
+  headers.append("Set-Cookie", parts.join("; "));
+}
+
+export interface Cookie {
+  name: string;
+  value: string;
+  path?: string;
+  expires?: Date;
+  maxAge?: number;
+  httpOnly?: boolean;
+  secure?: boolean;
+  sameSite?: "Strict" | "Lax" | "None";
+}
+
+export function getSetCookies(headers: Headers): Cookie[] {
+  const cookies: Cookie[] = [];
+  const setCookieHeaders = headers.getSetCookie?.() ?? [];
+  for (const header of setCookieHeaders) {
+    const parts = header.split(";").map((p) => p.trim());
+    const [nameValue, ...attrs] = parts;
+    const [name, ...rest] = nameValue.split("=");
+    const value = rest.join("=");
+    const cookie: Cookie = { name: name.trim(), value };
+    for (const attr of attrs) {
+      const [k, v] = attr.split("=");
+      const key = k.trim().toLowerCase();
+      if (key === "path") cookie.path = v?.trim();
+      if (key === "httponly") cookie.httpOnly = true;
+      if (key === "secure") cookie.secure = true;
+      if (key === "samesite") cookie.sameSite = v?.trim() as any;
+      if (key === "max-age") cookie.maxAge = Number(v?.trim());
+    }
+    cookies.push(cookie);
+  }
+  return cookies;
+}
+
+export function debounce<T extends (...args: any[]) => void>(
+  fn: T,
+  delay: number
+): T {
+  let timer: ReturnType<typeof setTimeout>;
+  return ((...args: any[]) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), delay);
+  }) as T;
+}