@decocms/apps 0.20.1

package/shopify/utils/utils.ts

@@ -0,0 +1,164 @@
+import {
+  InputMaybe,
+  ProductCollectionSortKeys,
+  ProductFilter,
+  SearchSortKeys as SearchSortKeysShopify,
+} from "../utils/storefront/storefront.graphql.gen";
+
+export const sortOptions = [
+  { value: "", label: "relevance:desc" },
+  { value: "price-ascending", label: "price:asc" },
+  { value: "price-descending", label: "price:desc" },
+  { value: "best-selling", label: "orders:desc" },
+  { value: "title-ascending", label: "name:asc" },
+  { value: "title-descending", label: "name:desc" },
+  { value: "created-descending", label: "release:desc" },
+];
+
+// only these sorts work for search at shopify
+export const searchSortOptions = [
+  { value: "", label: "relevance:desc" },
+  { value: "price-ascending", label: "price:asc" },
+  { value: "price-descending", label: "price:desc" },
+];
+
+export type CollectionSortKeys =
+  | ""
+  | "price-descending"
+  | "price-ascending"
+  | "best-selling"
+  | "title-descending"
+  | "title-ascending"
+  | "created-descending";
+
+export type SearchSortKeys =
+  | ""
+  | "price-descending"
+  | "price-ascending";
+
+export const searchSortShopify: Record<
+  string,
+  { sortKey: SearchSortKeysShopify; reverse: boolean }
+> = {
+  "": {
+    sortKey: "RELEVANCE",
+    reverse: false,
+  },
+  "price-descending": {
+    sortKey: "PRICE",
+    reverse: true,
+  },
+  "price-ascending": {
+    sortKey: "PRICE",
+    reverse: false,
+  },
+};
+
+export const sortShopify: Record<
+  string,
+  {
+    sortKey: ProductCollectionSortKeys | SearchSortKeysShopify;
+    reverse: boolean;
+  }
+> = {
+  "": {
+    sortKey: "RELEVANCE",
+    reverse: false,
+  },
+  "price-descending": {
+    sortKey: "PRICE",
+    reverse: true,
+  },
+  "price-ascending": {
+    sortKey: "PRICE",
+    reverse: false,
+  },
+  "best-selling": {
+    sortKey: "BEST_SELLING",
+    reverse: false,
+  },
+  "title-descending": {
+    sortKey: "TITLE",
+    reverse: true,
+  },
+  "title-ascending": {
+    sortKey: "TITLE",
+    reverse: false,
+  },
+  "created-descending": {
+    sortKey: "CREATED",
+    reverse: true,
+  },
+};
+
+export const filterToObject = (
+  type: string,
+  filter: InputMaybe<ProductFilter>,
+) => {
+  if (type == "tag") {
+    return { tag: filter?.tag };
+  }
+  if (type == "productType") {
+    return { productType: filter?.productType };
+  }
+  if (type == "productVendor") {
+    return { productVendor: filter?.productVendor };
+  }
+  if (type == "priceMin") {
+    return { price: { min: filter?.price?.min } };
+  }
+  if (type == "priceMax") {
+    return { price: { max: filter?.price?.max } };
+  }
+  if (type == "variantOption") {
+    return { variantOption: filter?.variantOption };
+  }
+};
+
+export const getFiltersByUrl = (url: URL) => {
+  const filters: InputMaybe<ProductFilter[]> | undefined = [];
+  url.searchParams.forEach((value, key) => {
+    if (key.startsWith("filter.v.option")) {
+      filters.push({
+        variantOption: { name: key.split(".")[3], value: value },
+      });
+    } else if (key.startsWith("filter.p.tag")) {
+      filters.push({ tag: value });
+    } else if (key.startsWith("filter.p.type")) {
+      filters.push({ productType: value });
+    } else if (key.startsWith("filter.p.product_type")) {
+      filters.push({ productType: value });
+    } else if (key.startsWith("filter.p.vendor")) {
+      filters.push({ productVendor: value });
+    } else if (key.startsWith("filter.v.availability")) {
+      filters.push({ available: value.toLowerCase() === "in stock" });
+    } else if (key.startsWith("filter.v.price.gte")) {
+      filters.push({ price: { min: Number(value) } });
+    } else if (key.startsWith("filter.v.price.lte")) {
+      filters.push({ price: { max: Number(value) } });
+    } else if (key.startsWith("filter.p.m.custom")) {
+      filters.push({
+        productMetafield: {
+          namespace: "custom",
+          key: key.replace("filter.p.m.custom.", ""),
+          value: value,
+        },
+      });
+    } else if (key.startsWith("filter.v.t.shopify")) {
+      filters.push({
+        taxonomyMetafield: {
+          namespace: "shopify",
+          key: key.replace("filter.v.t.shopify.", ""),
+          value: value,
+        },
+      });
+    } else if (key.startsWith("filter.p.t.category")) {
+      filters.push({
+        category: {
+          id: value,
+        },
+      });
+    }
+  });
+  return filters;
+};

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "module": "ESNext",
+    "target": "ES2022",
+    "skipLibCheck": true,
+    "strictNullChecks": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

package/vtex/README.md

@@ -0,0 +1,6 @@
+VTEX is a cloud-based e-commerce platform and digital commerce company that provides a comprehensive set of tools and services for businesses looking to establish and manage their online retail operations.
+
+This app wrapps VTEX API into a comprehensive set of loaders/actions/workflows
+empowering non technical users to interact and act upon their headless commerce.
+
+If you want to use a custom search engine (Algolia, Typesense etc), you will need to fill the App Key & App Token properties. For these, follow this guide

package/vtex/actions/address.ts

@@ -0,0 +1,211 @@
+/**
+ * VTEX Address management actions (store-graphql).
+ * Ported from deco-cx/apps:
+ *   - vtex/actions/address/create.ts
+ *   - vtex/actions/address/delete.ts
+ *   - vtex/actions/address/update.ts
+ * @see https://developers.vtex.com/docs/guides/profile-system
+ */
+import { vtexFetch, getVtexConfig } from "../client";
+import { buildAuthCookieHeader } from "../utils/vtexId";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AddressInput {
+  addressName: string;
+  addressType?: string;
+  city?: string;
+  complement?: string;
+  country?: string;
+  geoCoordinates?: number[];
+  neighborhood?: string;
+  number?: string;
+  postalCode?: string;
+  receiverName?: string;
+  reference?: string;
+  state?: string;
+  street?: string;
+}
+
+export interface SavedAddress {
+  id: string;
+  cacheId: string;
+  addressId: string;
+  userId?: string;
+  addressName: string;
+  addressType: string | null;
+  city: string | null;
+  complement: string | null;
+  country: string | null;
+  geoCoordinates: number[] | null;
+  neighborhood: string | null;
+  number: string | null;
+  postalCode: string | null;
+  receiverName: string | null;
+  reference: string | null;
+  state: string | null;
+  street: string | null;
+  name?: string;
+}
+
+export interface DeleteAddressResult {
+  cacheId: string;
+  addresses: SavedAddress[];
+}
+
+export interface UpdateAddressResult {
+  cacheId: string;
+  addresses: SavedAddress;
+}
+
+// ---------------------------------------------------------------------------
+// GraphQL helper (myvtex.com private graphql)
+// ---------------------------------------------------------------------------
+
+interface GqlResponse<T> {
+  data: T;
+  errors?: Array<{ message: string }>;
+}
+
+async function gql<T>(
+  query: string,
+  variables: Record<string, unknown>,
+  authCookie: string,
+): Promise<T> {
+  const { account } = getVtexConfig();
+  const result = await vtexFetch<GqlResponse<T>>(
+    `https://${account}.myvtex.com/_v/private/graphql/v1`,
+    {
+      method: "POST",
+      body: JSON.stringify({ query, variables }),
+      headers: { Cookie: buildAuthCookieHeader(authCookie, account) },
+    },
+  );
+  if (result.errors?.length) {
+    throw new Error(`GraphQL error: ${result.errors[0].message}`);
+  }
+  return result.data;
+}
+
+// ---------------------------------------------------------------------------
+// Mutations
+// ---------------------------------------------------------------------------
+
+const SAVE_ADDRESS = `mutation SaveAddress($address: AddressInput!) {
+  saveAddress(address: $address) @context(provider: "vtex.store-graphql") {
+    addressId
+    cacheId
+    id
+    userId
+    receiverName
+    complement
+    neighborhood
+    country
+    state
+    number
+    street
+    geoCoordinates
+    postalCode
+    city
+    name
+    addressName
+    addressType
+  }
+}`;
+
+const DELETE_ADDRESS = `mutation DeleteAddress($addressId: String) {
+  deleteAddress(id: $addressId) {
+    cacheId
+    addresses {
+      addressId: id
+      addressType
+      addressName
+      city
+      complement
+      country
+      neighborhood
+      number
+      postalCode
+      geoCoordinates
+      receiverName
+      reference
+      state
+      street
+    }
+  }
+}`;
+
+const UPDATE_ADDRESS = `mutation UpdateAddress($addressId: String!, $addressFields: AddressInput) {
+  updateAddress(id: $addressId, fields: $addressFields) @context(provider: "vtex.store-graphql") {
+    cacheId
+    addresses: address {
+      addressId: id
+      addressType
+      addressName
+      city
+      complement
+      country
+      neighborhood
+      number
+      postalCode
+      geoCoordinates
+      receiverName
+      reference
+      state
+      street
+    }
+  }
+}`;
+
+// ---------------------------------------------------------------------------
+// Actions
+// ---------------------------------------------------------------------------
+
+/** Create a new user address. Requires the user's VtexIdclientAutCookie token. */
+export async function createAddress(
+  input: AddressInput,
+  authCookie: string,
+): Promise<SavedAddress> {
+  const { saveAddress } = await gql<{ saveAddress: SavedAddress }>(
+    SAVE_ADDRESS,
+    { address: input },
+    authCookie,
+  );
+  return saveAddress;
+}
+
+/** Delete an address by its ID. Returns remaining addresses. */
+export async function deleteAddress(
+  addressId: string,
+  authCookie: string,
+): Promise<DeleteAddressResult> {
+  const { deleteAddress: result } = await gql<{ deleteAddress: DeleteAddressResult }>(
+    DELETE_ADDRESS,
+    { addressId },
+    authCookie,
+  );
+  return result;
+}
+
+/** Update an existing address. Returns the updated address. */
+export async function updateAddress(
+  addressId: string,
+  fields: Partial<AddressInput>,
+  authCookie: string,
+): Promise<UpdateAddressResult> {
+  const { updateAddress: result } = await gql<{ updateAddress: UpdateAddressResult }>(
+    UPDATE_ADDRESS,
+    {
+      addressId,
+      addressFields: {
+        ...fields,
+        receiverName: fields.receiverName ?? null,
+        complement: fields.complement ?? null,
+      },
+    },
+    authCookie,
+  );
+  return result;
+}