@anker-in/campaign-ui 0.1.10 → 0.2.10-beta.2

package/src/shopify/gql/index.ts

@@ -0,0 +1,4 @@
+export * from './fragment-masking'
+export * from './gql'
+export * from './graphql'
+

package/src/shopify/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useProductsByHandles } from './useProductsByHandles'
+export { useCreateCartMutation } from './useCreateCart'

package/src/shopify/hooks/useCreateCart.ts

@@ -0,0 +1,24 @@
+import { CartInput } from '../gql'
+import { createCart } from '../fetchers/create-cart'
+import useSWRMutation from 'swr/mutation'
+import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { setCartCookies } from '../utils/cookie'
+
+export function useCreateCartMutation() {
+  const { storefrontToken, storeDomain, metafieldsNamespace, cartIdCookieName } = useShopifyContext()
+
+  return useSWRMutation(
+    'createCart',
+    async (_, { arg }: { arg: CartInput }) => {
+      const cart = await createCart({
+        options: { ...arg, metafieldsNamespace },
+        config: { storefrontToken, storeDomain },
+      })
+      if (cart && cart.id) {
+        setCartCookies(cartIdCookieName, cart.id)
+      }
+      return cart
+    },
+    { throwOnError: true }
+  )
+}

package/src/shopify/hooks/useProductsByHandles.ts

@@ -0,0 +1,25 @@
+import useSWR from 'swr'
+
+import { getProductsByHandles, GetProductsMetafieldQueryRoot } from '../fetchers/get-products-by-handles'
+
+import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { ShopifyHookOptions } from '@shopify/types/fetcher'
+import { GetProductsByHandlesReq } from '../fetchers/get-products-by-handles'
+
+export function useProductsByHandles({
+  handles,
+  metafieldIdentifiers,
+}: ShopifyHookOptions<GetProductsByHandlesReq, GetProductsMetafieldQueryRoot>) {
+  const { storefrontToken, storeDomain, metafieldsNamespace } = useShopifyContext()
+
+  return useSWR(handles?.length ? { handles, metafieldIdentifiers } : undefined, async () => {
+    return getProductsByHandles({
+      options: {
+        handles: handles,
+        metafieldIdentifiers: metafieldIdentifiers,
+        metafieldsNamespace,
+      },
+      config: { storefrontToken, storeDomain },
+    })
+  })
+}

package/src/shopify/mutations/create-cart.ts

@@ -0,0 +1,16 @@
+import { cartFragment } from '../fragments/cart'
+
+export const createCartMutation = /* GraphQL */ `
+  mutation createCart($lines: [CartLineInput!], $discountCodes: [String!], $attributes: [AttributeInput!] = []) {
+    cartCreate(input: { lines: $lines, discountCodes: $discountCodes, attributes: $attributes }) {
+      cart {
+        ...cart
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+  ${cartFragment}
+`

package/src/shopify/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@anker-in/shopify",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./fragments": {
+      "types": "./dist/fragments/index.d.ts",
+      "import": "./dist/fragments/index.mjs",
+      "require": "./dist/fragments/index.cjs"
+    },
+    "./queries": {
+      "types": "./dist/queries/index.d.ts",
+      "import": "./dist/queries/index.mjs",
+      "require": "./dist/queries/index.cjs"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.mjs",
+      "require": "./dist/types/index.cjs"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.mjs",
+      "require": "./dist/utils/index.cjs"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs",
+      "require": "./dist/hooks/index.cjs"
+    },
+    "./fetchers": {
+      "types": "./dist/fetchers/index.d.ts",
+      "import": "./dist/fetchers/index.mjs",
+      "require": "./dist/fetchers/index.cjs"
+    }
+  },
+  "files": [
+    "dist/**",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "lint": "eslint \"**/*.ts\"",
+    "test": "jest --passWithNoTests",
+    "clean": "rm -rf .turbo node_modules dist"
+  },
+  "keywords": [
+    "shopify",
+    "graphql",
+    "ecommerce"
+  ],
+  "author": "Anker",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/anker-in/headless-ui.git",
+    "directory": "packages/shopify"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20",
+    "eslint": "^8.57.0",
+    "jest": "^29.0.0",
+    "ts-jest": "^29.2.6",
+    "tsup": "^8.4.0",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^18.0.0"
+  }
+}

package/src/shopify/queries/get-product-by-handles.ts

@@ -0,0 +1,32 @@
+import { imageFragment, metafieldFragment, productFragment, seoFragment, variantFragment } from '../fragments'
+
+export const getProductsByHandlesQuery = (handles: string[]) => /* GraphQL */ `
+query GetProductByHandles(
+  $productMetafieldIdentifiers: [HasMetafieldsIdentifier!] = []
+  $variantMetafieldIdentifiers: [HasMetafieldsIdentifier!] = []
+) {
+  ${handles.map(
+    (handle, index: number) => /* GraphQL */ `
+    product${index}: product(handle: "${handle}") {
+      ...product
+      metafields(identifiers: $productMetafieldIdentifiers) {
+        ...metafield
+      }
+      variants(first: 250) {
+        nodes {
+          ...variant
+          metafields(identifiers: $variantMetafieldIdentifiers) {
+            ...metafield
+          }
+        }
+      }
+    }
+  `
+  )}
+}
+${productFragment}
+${variantFragment}
+${metafieldFragment}
+${seoFragment}
+${imageFragment}
+`

package/src/shopify/queries/index.ts

@@ -0,0 +1,2 @@
+export { getProductsByHandlesQuery } from './get-product-by-handles'
+

package/src/shopify/src/index.ts

@@ -0,0 +1,5 @@
+export * from '../fetchers'
+export * from '../hooks'
+export * from '../queries'
+export * from '../fragments'
+export * from '../types'

package/src/shopify/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": ".",
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "paths": {
+      "@utils/*": ["./utils/*"],
+      "@types/*": ["./types/*"]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "fetchers/**/*",
+    "hooks/**/*",
+    "queries/**/*",
+    "fragments/**/*",
+    "gql/**/*",
+    "types/**/*",
+    "utils/**/*"
+  ],
+  "exclude": ["node_modules", "dist"]
+}

package/src/shopify/tsup.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: {
+    index: 'src/index.ts',
+    // expose subpath entries to match package.json exports
+    fragments: 'fragments/index.ts',
+    queries: 'queries/index.ts',
+    types: 'types/index.ts',
+    utils: 'utils/index.ts',
+    hooks: 'hooks/index.ts',
+    fetchers: 'fetchers/index.ts',
+    // gql is internal only, not exposed as subpath
+  },
+  format: ['cjs', 'esm'],
+  dts: true,
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  external: ['react', 'react-dom'],
+})

package/src/shopify/types/article.ts

@@ -0,0 +1,46 @@
+import { Article, ArticleEdge } from '../gql'
+
+export type ArticleResponse = {
+  blog: {
+    title: string
+    seo: string
+    article: Article
+    articles: {
+      edges: ArticleEdge[]
+      pageInfo: {
+        hasNextPage: boolean
+        hasPreviousPage: boolean
+      }
+    }
+    handle: string
+  }
+}
+
+export type ArticleImage = {
+  url: string
+  alt?: string
+}
+
+export type ArticleTypes = {
+  article: Article
+  metafields: any
+}
+
+export type ArticleQuery = {
+  locale: string
+  blog: string
+  slug: string
+}
+
+export type GetArticleOperation = {
+  data: { blog_article?: ArticleTypes; error?: string }
+  variables: { blog: string; slug: string }
+}
+
+export type GetAllArticleOperation<T extends ArticleTypes = ArticleTypes> = {
+  data: { articles: T['article'][] }
+  variables: {
+    first?: number
+    after?: string
+  }
+}

package/src/shopify/types/cart.ts

@@ -0,0 +1,202 @@
+import { ProductVariant, Product } from '../types/product'
+import { Cart as ShopifyCart } from '@shopify/gql'
+import { Discount } from './common'
+import { CustomerAddress } from './customer'
+
+export type Attributes = {
+  key: string
+  value: string
+}[]
+
+export type ShopifyCartOperation = {
+  cart: ShopifyCart
+  variables: {
+    cartId: string
+  }
+}
+
+export type ShopifyCreateCartOperation = {
+  cartCreate: { cart: Cart }
+  // cartCreate: { cart: ShopifyCart }
+  variables: {
+    buyerIdentity?: any
+    lines: {
+      merchandiseId: string
+      quantity: number
+      attributes?: any
+    }[]
+    attributes?: {}
+  }
+}
+
+export type ShopifyAddToCartOperation = {
+  cartLinesAdd: {
+    cart: ShopifyCart
+  }
+  variables: {
+    cartId: string
+    buyerIdentity?: any
+    lines: {
+      merchandiseId: string
+      quantity: number
+      attributes?: any
+    }[]
+    attributes?: {}
+  }
+}
+
+export type ShopifyRemoveFromCartOperation = {
+  cartLinesRemove: {
+    cart: ShopifyCart
+  }
+  variables: {
+    cartId: string
+    lineIds: string[]
+  }
+}
+
+export type ShopifyUpdateCartOperation = {
+  cartLinesUpdate: {
+    cart: ShopifyCart
+  }
+  variables: {
+    cartId: string
+    lines: {
+      id: string
+      merchandiseId?: string
+      quantity?: number
+      attributes?: any
+    }[]
+    attributes?: any
+  }
+}
+
+export type ShopifyCodesUpdateCartOperation = {
+  cartDiscountCodesUpdate: {
+    cart: ShopifyCart
+  }
+  variables: {
+    cartId: string
+    discountCodes: string[]
+  }
+}
+
+export type CartAttributesUpdateOperation = {
+  cartAttributesUpdate: { cart: ShopifyCart }
+  variables: {
+    cartId: string
+    attributes: any
+  }
+}
+
+export type InputArribute = {
+  key?: string
+  value?: string
+}
+
+export type subInputValue = {
+  [key: string]: string
+}
+
+export type InputLineItem = {
+  merchandiseId: string
+  quantity: number
+  attributes: any
+  buyerIdentity?: any
+  sellingPlanId?: string
+}
+
+export type SelectedOption = {
+  // The option's id.
+  id?: string
+  // The product option’s name.
+  name: string
+  /// The product option’s value.
+  value: string
+}
+
+export type LineItem = {
+  id: string
+  variantId: string
+  productId: string
+  name: string
+  quantity: number
+  discounts: Discount[]
+  // A human-friendly unique string automatically generated from the product’s name
+  path: string
+  variant: ProductVariant
+  totalAmount: number
+  subtotalAmount: number
+  options?: SelectedOption[]
+  discountAllocations?: DiscountAllocations[]
+  product?: Product
+  customAttributes?: any
+  attributes?: any
+  sellingPlan?: string
+}
+
+export type Discounts = {
+  applicable: boolean
+  code: string
+}
+
+export type DiscountAllocations = {
+  amount: number
+  code: string
+}
+
+export type EstimatedCost = {
+  amount: string
+  currencyCode: string
+}
+
+export type SelectedDeliveryOption = {
+  code: string
+  estimatedCost: EstimatedCost
+  handle: string
+  title: string
+}
+
+export type DeliveryGroups = {
+  deliveryAddress: CustomerAddress
+  deliveryOptions: any
+  id: string
+  selectedDeliveryOption?: any
+}
+
+export type Cart = {
+  id: string
+  // ID of the customer to which the cart belongs.
+  customerId?: string
+  // The email assigned to this cart
+  email?: string
+  // The date and time when the cart was created.
+  createdAt: string
+  // The currency used for this cart
+  currency: { code: string }
+  // Specifies if taxes are included in the line items.
+  taxesIncluded?: boolean
+  lineItems: LineItem[]
+  // The sum of all the prices of all the items in the cart.
+  // Duties, taxes, shipping and discounts excluded.
+  totalLineItemsDiscount?: number
+  orderDiscounts?: number
+  lineItemsSubtotalPrice: number
+  // Price of the cart before duties, shipping and taxes.
+  subtotalPrice: number
+  // The sum of all the prices of all the items in the cart.
+  // Duties, taxes and discounts included.
+  totalPrice: number
+  // Discounts that have been applied on the cart.
+  totalTaxAmount: number
+  discountCodes: Discounts[]
+  discountAllocations?: DiscountAllocations[]
+  discounts?: Discount[]
+  url?: string
+  ready: boolean
+  orderStatusUrl?: any
+  customAttributes?: any
+  buyerIdentity?: any
+  deliveryAmount?: number
+  deliveryGroups?: DeliveryGroups[]
+}

package/src/shopify/types/checkout.ts

@@ -0,0 +1,44 @@
+export type ShopifyGetCheckoutOperation = {
+  node: {
+    id: string
+    webUrl: string
+    completedAt: string
+  }
+  variables: {
+    checkoutId: string
+  }
+}
+export type ShopifyCreateCheckoutOperation = {
+  checkoutCreate: {
+    checkout: {
+      id: string
+      webUrl: string
+    }
+  }
+  variables: {
+    customAttributes?: any
+    lineItems: {
+      variantId: string
+      quantity: number
+      customAttributes?: any
+    }[]
+  }
+}
+
+export type ShopifyCheckoutDiscountApplyOperation = {
+  checkoutDiscountCodeApplyV2: {
+    checkout: {
+      id: string
+      webUrl: string
+    }
+  }
+  variables: {
+    checkoutId: string
+    discountCode: string
+  }
+}
+
+export type Checkout = {
+  id?: string
+  webUrl?: string
+}

package/src/shopify/types/collection.ts

@@ -0,0 +1,104 @@
+import { ProductTypes } from './product'
+import { Collection, Image, Maybe } from '../gql'
+
+export type CollectionsMetafield = {
+  [key: string]: string[]
+}
+
+export type FilterPriceTxt = {
+  text: string
+  gte: string
+  lte: string
+}
+
+export type FiltersPairMetafield = {
+  collections: {
+    [key: string]: {
+      filter_params: string[]
+      price?: [number[]]
+    }
+  }
+  filters_label: { [key: string]: any }
+  cabletype?: { [key: string]: any }
+  length?: { [key: string]: any }
+  videoports?: { [key: string]: any }
+  datatransferspeed?: { [key: string]: any }
+  connectivity?: { [key: string]: any }
+  numberofports?: { [key: string]: any }
+  porttype?: { [key: string]: any }
+  numberofdevicespowered?: { [key: string]: any }
+  chargingtechnology?: { [key: string]: any }
+  capacity?: { [key: string]: any }
+  product_type: { [key: string]: any }
+  price: FilterPriceTxt
+  filter_txt: { [key: string]: any }
+  [key: string]: any
+}
+
+export type FiltersPair = {
+  label: string
+  value: string
+  options: Array<{
+    value: string
+    label: string
+  }>
+}
+
+export type CategoryImage = {
+  url: string
+  alt?: string
+}
+
+export type Category<T extends ProductTypes = ProductTypes> = {
+  id: string
+  name: string
+  slug: string
+  path: string
+  description?: string
+  descriptionHtml?: string
+  image?: Maybe<Image>
+  products?: T['product'][]
+  filters?: any
+  pageInfo?: any
+  seo?: any
+  initData?: any
+  metafields?: { [key: string]: any }
+}
+
+export type CategoryTypes = {
+  collection: Category
+}
+
+export type GetCollectionOperation<T extends CategoryTypes = CategoryTypes> = {
+  collectionByHandle: Collection
+  variables: {
+    handle?: string
+    first?: number
+    after?: string
+    last?: string
+    before?: string
+    reverse?: boolean
+    sortKey?: string
+    filters?: any
+  }
+}
+
+export type CollectionQuery = {
+  locale?: string
+  handle?: string
+  queryArgument?: {
+    first?: number
+    after?: string
+    last?: string
+    before?: string
+    reverse?: boolean
+    sortKey?: string
+    filters?: any
+  }
+}
+
+export type PriceLabel = {
+  text: string
+  gte: string
+  lte: string
+}

package/src/shopify/types/common.ts

@@ -0,0 +1,53 @@
+export type Discount = {
+  // The value of the discount, can be an amount or percentage
+  value?: number
+  percentage?: number
+  amount?: number
+  currencyCode?: string
+}
+
+export type Measurement = {
+  value: number
+  unit: 'KILOGRAMS' | 'GRAMS' | 'POUNDS' | 'OUNCES'
+}
+
+export type Image = {
+  url: string
+  altText?: string
+  width?: number
+  height?: number
+}
+
+export type Maybe<T> = T | null
+
+export type ExtractVariables<T> = T extends { variables?: object }
+  ? T['variables']
+  : undefined
+
+export interface CommerceAPIFetchOptions<T> {
+  variables?: ExtractVariables<T>
+  preview?: boolean
+}
+
+export type Connection<T> = {
+  edges: Array<Edge<T>>
+}
+
+export type Edge<T> = {
+  node: T
+}
+
+export type Menu = {
+  title: string
+  path: string
+}
+
+export type Money = {
+  amount: string
+  currencyCode: string
+}
+
+export type SEO = {
+  title: string
+  description: string
+}