Add swell provider folder

framework/swell/utils/customer-token.ts

@@ -0,0 +1,21 @@
+import Cookies, { CookieAttributes } from 'js-cookie'
+import { SHOPIFY_COOKIE_EXPIRE, SHOPIFY_CUSTOMER_TOKEN_COOKIE } from '../const'
+
+export const getCustomerToken = () => Cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
+
+export const setCustomerToken = (
+  token: string | null,
+  options?: CookieAttributes
+) => {
+  if (!token) {
+    Cookies.remove(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
+  } else {
+    Cookies.set(
+      SHOPIFY_CUSTOMER_TOKEN_COOKIE,
+      token,
+      options ?? {
+        expires: SHOPIFY_COOKIE_EXPIRE,
+      }
+    )
+  }
+}

framework/swell/utils/get-categories.ts

@@ -0,0 +1,29 @@
+import { ShopifyConfig } from '../api'
+import { CollectionEdge } from '../schema'
+import getSiteCollectionsQuery from './queries/get-all-collections-query'
+
+export type Category = {
+  entityId: string
+  name: string
+  path: string
+}
+
+const getCategories = async (config: ShopifyConfig): Promise<Category[]> => {
+  const { data } = await config.fetch(getSiteCollectionsQuery, {
+    variables: {
+      first: 250,
+    },
+  })
+
+  return (
+    data.collections?.edges?.map(
+      ({ node: { id: entityId, title: name, handle } }: CollectionEdge) => ({
+        entityId,
+        name,
+        path: `/${handle}`,
+      })
+    ) ?? []
+  )
+}
+
+export default getCategories

framework/swell/utils/get-checkout-id.ts

@@ -0,0 +1,8 @@
+import Cookies from 'js-cookie'
+import { SHOPIFY_CHECKOUT_ID_COOKIE } from '../const'
+
+const getCheckoutId = (id?: string) => {
+  return id ?? Cookies.get(SHOPIFY_CHECKOUT_ID_COOKIE)
+}
+
+export default getCheckoutId

framework/swell/utils/get-search-variables.ts

@@ -0,0 +1,27 @@
+import getSortVariables from './get-sort-variables'
+import type { SearchProductsInput } from '../product/use-search'
+
+export const getSearchVariables = ({
+  brandId,
+  search,
+  categoryId,
+  sort,
+}: SearchProductsInput) => {
+  let query = ''
+
+  if (search) {
+    query += `product_type:${search} OR title:${search} OR tag:${search}`
+  }
+
+  if (brandId) {
+    query += `${search ? ' AND ' : ''}vendor:${brandId}`
+  }
+
+  return {
+    categoryId,
+    query,
+    ...getSortVariables(sort, !!categoryId),
+  }
+}
+
+export default getSearchVariables

framework/swell/utils/get-sort-variables.ts

@@ -0,0 +1,32 @@
+const getSortVariables = (sort?: string, isCategory = false) => {
+  let output = {}
+  switch (sort) {
+    case 'price-asc':
+      output = {
+        sortKey: 'PRICE',
+        reverse: false,
+      }
+      break
+    case 'price-desc':
+      output = {
+        sortKey: 'PRICE',
+        reverse: true,
+      }
+      break
+    case 'trending-desc':
+      output = {
+        sortKey: 'BEST_SELLING',
+        reverse: false,
+      }
+      break
+    case 'latest-desc':
+      output = {
+        sortKey: isCategory ? 'CREATED' : 'CREATED_AT',
+        reverse: true,
+      }
+      break
+  }
+  return output
+}
+
+export default getSortVariables

framework/swell/utils/get-vendors.ts

@@ -0,0 +1,36 @@
+import { ShopifyConfig } from '../api'
+import fetchAllProducts from '../api/utils/fetch-all-products'
+import getAllProductVendors from './queries/get-all-product-vendors-query'
+
+export type BrandNode = {
+  name: string
+  path: string
+}
+
+export type BrandEdge = {
+  node: BrandNode
+}
+
+export type Brands = BrandEdge[]
+
+const getVendors = async (config: ShopifyConfig): Promise<BrandEdge[]> => {
+  const vendors = await fetchAllProducts({
+    config,
+    query: getAllProductVendors,
+    variables: {
+      first: 250,
+    },
+  })
+
+  let vendorsStrings = vendors.map(({ node: { vendor } }) => vendor)
+
+  return [...new Set(vendorsStrings)].map((v) => ({
+    node: {
+      entityId: v,
+      name: v,
+      path: `brands/${v}`,
+    },
+  }))
+}
+
+export default getVendors

framework/swell/utils/handle-fetch-response.ts

@@ -0,0 +1,27 @@
+import { FetcherError } from '@commerce/utils/errors'
+
+export function getError(errors: any[], status: number) {
+  errors = errors ?? [{ message: 'Failed to fetch Shopify API' }]
+  return new FetcherError({ errors, status })
+}
+
+export async function getAsyncError(res: Response) {
+  const data = await res.json()
+  return getError(data.errors, res.status)
+}
+
+const handleFetchResponse = async (res: Response) => {
+  if (res.ok) {
+    const { data, errors } = await res.json()
+
+    if (errors && errors.length) {
+      throw getError(errors, res.status)
+    }
+
+    return data
+  }
+
+  throw await getAsyncError(res)
+}
+
+export default handleFetchResponse

framework/swell/utils/handle-login.ts

@@ -0,0 +1,39 @@
+import { ValidationError } from '@commerce/utils/errors'
+import { setCustomerToken } from './customer-token'
+
+const getErrorMessage = ({
+  code,
+  message,
+}: {
+  code: string
+  message: string
+}) => {
+  switch (code) {
+    case 'UNIDENTIFIED_CUSTOMER':
+      message = 'Cannot find an account that matches the provided credentials'
+      break
+  }
+  return message
+}
+
+const handleLogin = (data: any) => {
+  const response = data.customerAccessTokenCreate
+  const errors = response?.customerUserErrors
+
+  if (errors && errors.length) {
+    throw new ValidationError({
+      message: getErrorMessage(errors[0]),
+    })
+  }
+
+  const customerAccessToken = response?.customerAccessToken
+  const accessToken = customerAccessToken?.accessToken
+
+  if (accessToken) {
+    setCustomerToken(accessToken)
+  }
+
+  return customerAccessToken
+}
+
+export default handleLogin

framework/swell/utils/index.ts

@@ -0,0 +1,10 @@
+export { default as handleFetchResponse } from './handle-fetch-response'
+export { default as getSearchVariables } from './get-search-variables'
+export { default as getSortVariables } from './get-sort-variables'
+export { default as getVendors } from './get-vendors'
+export { default as getCategories } from './get-categories'
+export { default as getCheckoutId } from './get-checkout-id'
+export * from './queries'
+export * from './mutations'
+export * from './normalize'
+export * from './customer-token'

framework/swell/utils/mutations/associate-customer-with-checkout.ts

@@ -0,0 +1,18 @@
+const associateCustomerWithCheckoutMutation = /* GraphQl */ `
+mutation associateCustomerWithCheckout($checkoutId: ID!, $customerAccessToken: String!) {
+    checkoutCustomerAssociateV2(checkoutId: $checkoutId, customerAccessToken: $customerAccessToken) {
+      checkout {
+        id
+      }
+      checkoutUserErrors {
+        code
+        field
+        message
+      }
+      customer {
+        id
+      }
+    }
+  }
+`
+export default associateCustomerWithCheckoutMutation

framework/swell/utils/mutations/checkout-create.ts

@@ -0,0 +1,16 @@
+import { checkoutDetailsFragment } from '../queries/get-checkout-query'
+
+const checkoutCreateMutation = /* GraphQL */ `
+  mutation {
+    checkoutCreate(input: {}) {
+      userErrors {
+        message
+        field
+      }
+      checkout {
+        ${checkoutDetailsFragment}
+      }
+    }
+  }
+`
+export default checkoutCreateMutation

framework/swell/utils/mutations/checkout-line-item-add.ts

@@ -0,0 +1,16 @@
+import { checkoutDetailsFragment } from '../queries/get-checkout-query'
+
+const checkoutLineItemAddMutation = /* GraphQL */ `
+  mutation($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) {
+    checkoutLineItemsAdd(checkoutId: $checkoutId, lineItems: $lineItems) {
+      userErrors {
+        message
+        field
+      }
+      checkout {
+        ${checkoutDetailsFragment}
+      }
+    }
+  }
+`
+export default checkoutLineItemAddMutation

framework/swell/utils/mutations/checkout-line-item-remove.ts

@@ -0,0 +1,19 @@
+import { checkoutDetailsFragment } from '../queries/get-checkout-query'
+
+const checkoutLineItemRemoveMutation = /* GraphQL */ `
+  mutation($checkoutId: ID!, $lineItemIds: [ID!]!) {
+    checkoutLineItemsRemove(
+      checkoutId: $checkoutId
+      lineItemIds: $lineItemIds
+    ) {
+      userErrors {
+        message
+        field
+      }
+      checkout {
+       ${checkoutDetailsFragment}
+      }
+    }
+  }
+`
+export default checkoutLineItemRemoveMutation

framework/swell/utils/mutations/checkout-line-item-update.ts

@@ -0,0 +1,16 @@
+import { checkoutDetailsFragment } from '../queries/get-checkout-query'
+
+const checkoutLineItemUpdateMutation = /* GraphQL */ `
+  mutation($checkoutId: ID!, $lineItems: [CheckoutLineItemUpdateInput!]!) {
+    checkoutLineItemsUpdate(checkoutId: $checkoutId, lineItems: $lineItems) {
+      userErrors {
+        message
+        field
+      }
+      checkout {
+        ${checkoutDetailsFragment}
+      }
+    }
+  }
+`
+export default checkoutLineItemUpdateMutation

framework/swell/utils/mutations/customer-access-token-create.ts

@@ -0,0 +1,16 @@
+const customerAccessTokenCreateMutation = /* GraphQL */ `
+  mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
+    customerAccessTokenCreate(input: $input) {
+      customerAccessToken {
+        accessToken
+        expiresAt
+      }
+      customerUserErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+`
+export default customerAccessTokenCreateMutation

framework/swell/utils/mutations/customer-access-token-delete.ts

@@ -0,0 +1,14 @@
+const customerAccessTokenDeleteMutation = /* GraphQL */ `
+  mutation customerAccessTokenDelete($customerAccessToken: String!) {
+    customerAccessTokenDelete(customerAccessToken: $customerAccessToken) {
+      deletedAccessToken
+      deletedCustomerAccessTokenId
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`
+
+export default customerAccessTokenDeleteMutation

framework/swell/utils/mutations/customer-create.ts

@@ -0,0 +1,15 @@
+const customerCreateMutation = /* GraphQL */ `
+  mutation customerCreate($input: CustomerCreateInput!) {
+    customerCreate(input: $input) {
+      customerUserErrors {
+        code
+        field
+        message
+      }
+      customer {
+        id
+      }
+    }
+  }
+`
+export default customerCreateMutation

framework/swell/utils/mutations/index.ts

@@ -0,0 +1,7 @@
+export { default as customerCreateMutation } from './customer-create'
+export { default as checkoutCreateMutation } from './checkout-create'
+export { default as checkoutLineItemAddMutation } from './checkout-line-item-add'
+export { default as checkoutLineItemUpdateMutation } from './checkout-line-item-update'
+export { default as checkoutLineItemRemoveMutation } from './checkout-line-item-remove'
+export { default as customerAccessTokenCreateMutation } from './customer-access-token-create'
+export { default as customerAccessTokenDeleteMutation } from './customer-access-token-delete'

framework/swell/utils/normalize.ts

@@ -0,0 +1,152 @@
+import { Product } from '@commerce/types'
+
+import {
+  Product as ShopifyProduct,
+  Checkout,
+  CheckoutLineItemEdge,
+  SelectedOption,
+  ImageConnection,
+  ProductVariantConnection,
+  MoneyV2,
+  ProductOption,
+} from '../schema'
+
+import type { Cart, LineItem } from '../types'
+
+const money = ({ amount, currencyCode }: MoneyV2) => {
+  return {
+    value: +amount,
+    currencyCode,
+  }
+}
+
+const normalizeProductOption = ({
+  id,
+  name: displayName,
+  values,
+}: ProductOption) => {
+  return {
+    __typename: 'MultipleChoiceOption',
+    id,
+    displayName,
+    values: values.map((value) => {
+      let output: any = {
+        label: value,
+      }
+      if (displayName === 'Color') {
+        output = {
+          ...output,
+          hexColors: [value],
+        }
+      }
+      return output
+    }),
+  }
+}
+
+const normalizeProductImages = ({ edges }: ImageConnection) =>
+  edges?.map(({ node: { originalSrc: url, ...rest } }) => ({
+    url,
+    ...rest,
+  }))
+
+const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
+  return edges?.map(
+    ({
+      node: { id, selectedOptions, sku, title, priceV2, compareAtPriceV2 },
+    }) => ({
+      id,
+      name: title,
+      sku: sku ?? id,
+      price: +priceV2.amount,
+      listPrice: +compareAtPriceV2?.amount,
+      requiresShipping: true,
+      options: selectedOptions.map(({ name, value }: SelectedOption) =>
+        normalizeProductOption({
+          id,
+          name,
+          values: [value],
+        })
+      ),
+    })
+  )
+}
+
+export function normalizeProduct(productNode: ShopifyProduct): Product {
+  const {
+    id,
+    title: name,
+    vendor,
+    images,
+    variants,
+    description,
+    handle,
+    priceRange,
+    options,
+    ...rest
+  } = productNode
+
+  const product = {
+    id,
+    name,
+    vendor,
+    description,
+    path: `/${handle}`,
+    slug: handle?.replace(/^\/+|\/+$/g, ''),
+    price: money(priceRange?.minVariantPrice),
+    images: normalizeProductImages(images),
+    variants: variants ? normalizeProductVariants(variants) : [],
+    options: options ? options.map((o) => normalizeProductOption(o)) : [],
+    ...rest,
+  }
+
+  return product
+}
+
+export function normalizeCart(checkout: Checkout): Cart {
+  return {
+    id: checkout.id,
+    customerId: '',
+    email: '',
+    createdAt: checkout.createdAt,
+    currency: {
+      code: checkout.totalPriceV2?.currencyCode,
+    },
+    taxesIncluded: checkout.taxesIncluded,
+    lineItems: checkout.lineItems?.edges.map(normalizeLineItem),
+    lineItemsSubtotalPrice: +checkout.subtotalPriceV2?.amount,
+    subtotalPrice: +checkout.subtotalPriceV2?.amount,
+    totalPrice: checkout.totalPriceV2?.amount,
+    discounts: [],
+  }
+}
+
+function normalizeLineItem({
+  node: { id, title, variant, quantity },
+}: CheckoutLineItemEdge): LineItem {
+  return {
+    id,
+    variantId: String(variant?.id),
+    productId: String(variant?.id),
+    name: `${title}`,
+    quantity,
+    variant: {
+      id: String(variant?.id),
+      sku: variant?.sku ?? '',
+      name: variant?.title!,
+      image: {
+        url: variant?.image?.originalSrc,
+      },
+      requiresShipping: variant?.requiresShipping ?? false,
+      price: variant?.priceV2?.amount,
+      listPrice: variant?.compareAtPriceV2?.amount,
+    },
+    path: '',
+    discounts: [],
+    options: [
+      {
+        value: variant?.title,
+      },
+    ],
+  }
+}

framework/swell/utils/queries/get-all-collections-query.ts

@@ -0,0 +1,14 @@
+const getSiteCollectionsQuery = /* GraphQL */ `
+  query getSiteCollections($first: Int!) {
+    collections(first: $first) {
+      edges {
+        node {
+          id
+          title
+          handle
+        }
+      }
+    }
+  }
+`
+export default getSiteCollectionsQuery

framework/swell/utils/queries/get-all-pages-query.ts

@@ -0,0 +1,14 @@
+export const getAllPagesQuery = /* GraphQL */ `
+  query getAllPages($first: Int = 250) {
+    pages(first: $first) {
+      edges {
+        node {
+          id
+          title
+          handle
+        }
+      }
+    }
+  }
+`
+export default getAllPagesQuery

framework/swell/utils/queries/get-all-product-vendors-query.ts

@@ -0,0 +1,17 @@
+const getAllProductVendors = /* GraphQL */ `
+  query getAllProductVendors($first: Int = 250, $cursor: String) {
+    products(first: $first, after: $cursor) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+      }
+      edges {
+        node {
+          vendor
+        }
+        cursor
+      }
+    }
+  }
+`
+export default getAllProductVendors

framework/swell/utils/queries/get-all-products-paths-query.ts

@@ -0,0 +1,17 @@
+const getAllProductsPathsQuery = /* GraphQL */ `
+  query getAllProductPaths($first: Int = 250, $cursor: String) {
+    products(first: $first, after: $cursor) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+      }
+      edges {
+        node {
+          handle
+        }
+        cursor
+      }
+    }
+  }
+`
+export default getAllProductsPathsQuery

framework/swell/utils/queries/get-all-products-query.ts

@@ -0,0 +1,57 @@
+export const productConnection = `
+pageInfo {
+  hasNextPage
+  hasPreviousPage
+}
+edges {
+  node {
+    id
+    title
+    vendor
+    handle
+    description
+    priceRange {
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+    }
+    images(first: 1) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+      }
+      edges {
+        node {
+          originalSrc
+          altText
+          width
+          height
+        }
+      }
+    }
+  }
+}`
+
+export const productsFragment = `
+products(
+  first: $first
+  sortKey: $sortKey
+  reverse: $reverse
+  query: $query
+) {
+  ${productConnection}
+}
+`
+
+const getAllProductsQuery = /* GraphQL */ `
+  query getAllProducts(
+    $first: Int = 250
+    $query: String = ""
+    $sortKey: ProductSortKeys = RELEVANCE
+    $reverse: Boolean = false
+  ) {
+    ${productsFragment}
+  }
+`
+export default getAllProductsQuery

framework/swell/utils/queries/get-checkout-query.ts

@@ -0,0 +1,62 @@
+export const checkoutDetailsFragment = `
+  id
+  webUrl
+  subtotalPriceV2{
+    amount
+    currencyCode
+  }
+  totalTaxV2 {
+    amount
+    currencyCode
+  }
+  totalPriceV2 {
+    amount
+    currencyCode
+  }
+  completedAt
+  createdAt
+  taxesIncluded
+  lineItems(first: 250) {
+    pageInfo {
+      hasNextPage
+      hasPreviousPage
+    }
+    edges {
+      node {
+        id
+        title
+        variant {
+          id
+          sku
+          title
+          image {
+            originalSrc
+            altText
+            width
+            height
+          }
+          priceV2{
+            amount
+            currencyCode
+          }
+          compareAtPriceV2{
+            amount
+            currencyCode
+          }
+        }
+        quantity
+      }
+    }
+  }
+`
+
+const getCheckoutQuery = /* GraphQL */ `
+  query($checkoutId: ID!) {
+    node(id: $checkoutId) {
+      ... on Checkout {
+        ${checkoutDetailsFragment}
+      }
+    }
+  }
+`
+export default getCheckoutQuery

framework/swell/utils/queries/get-collection-products-query.ts

@@ -0,0 +1,24 @@
+import { productConnection } from './get-all-products-query'
+
+const getCollectionProductsQuery = /* GraphQL */ `
+  query getProductsFromCollection(
+    $categoryId: ID!
+    $first: Int = 250
+    $sortKey: ProductCollectionSortKeys = RELEVANCE
+    $reverse: Boolean = false
+  ) {
+    node(id: $categoryId) {
+      id
+      ... on Collection {
+        products(
+          first: $first
+          sortKey: $sortKey
+          reverse: $reverse
+        ) {
+          ${productConnection}
+        }
+      }
+    }
+  }
+`
+export default getCollectionProductsQuery

framework/swell/utils/queries/get-customer-id-query.ts

@@ -0,0 +1,8 @@
+export const getCustomerQuery = /* GraphQL */ `
+  query getCustomerId($customerAccessToken: String!) {
+    customer(customerAccessToken: $customerAccessToken) {
+      id
+    }
+  }
+`
+export default getCustomerQuery

framework/swell/utils/queries/get-customer-query.ts

@@ -0,0 +1,16 @@
+export const getCustomerQuery = /* GraphQL */ `
+  query getCustomer($customerAccessToken: String!) {
+    customer(customerAccessToken: $customerAccessToken) {
+      id
+      firstName
+      lastName
+      displayName
+      email
+      phone
+      tags
+      acceptsMarketing
+      createdAt
+    }
+  }
+`
+export default getCustomerQuery

framework/swell/utils/queries/get-page-query.ts

@@ -0,0 +1,14 @@
+export const getPageQuery = /* GraphQL */ `
+  query($id: ID!) {
+    node(id: $id) {
+      id
+      ... on Page {
+        title
+        handle
+        body
+        bodySummary
+      }
+    }
+  }
+`
+export default getPageQuery

framework/swell/utils/queries/get-product-query.ts

@@ -0,0 +1,69 @@
+const getProductQuery = /* GraphQL */ `
+  query getProductBySlug($slug: String!) {
+    productByHandle(handle: $slug) {
+      id
+      handle
+      title
+      productType
+      vendor
+      description
+      descriptionHtml
+      options {
+        id
+        name
+        values
+      }
+      priceRange {
+        maxVariantPrice {
+          amount
+          currencyCode
+        }
+        minVariantPrice {
+          amount
+          currencyCode
+        }
+      }
+      variants(first: 250) {
+        pageInfo {
+          hasNextPage
+          hasPreviousPage
+        }
+        edges {
+          node {
+            id
+            title
+            sku
+            selectedOptions {
+              name
+              value
+            }
+            priceV2 {
+              amount
+              currencyCode
+            }
+            compareAtPriceV2 {
+              amount
+              currencyCode
+            }
+          }
+        }
+      }
+      images(first: 250) {
+        pageInfo {
+          hasNextPage
+          hasPreviousPage
+        }
+        edges {
+          node {
+            originalSrc
+            altText
+            width
+            height
+          }
+        }
+      }
+    }
+  }
+`
+
+export default getProductQuery

framework/swell/utils/queries/index.ts

@@ -0,0 +1,10 @@
+export { default as getSiteCollectionsQuery } from './get-all-collections-query'
+export { default as getProductQuery } from './get-product-query'
+export { default as getAllProductsQuery } from './get-all-products-query'
+export { default as getAllProductsPathtsQuery } from './get-all-products-paths-query'
+export { default as getAllProductVendors } from './get-all-product-vendors-query'
+export { default as getCollectionProductsQuery } from './get-collection-products-query'
+export { default as getCheckoutQuery } from './get-checkout-query'
+export { default as getAllPagesQuery } from './get-all-pages-query'
+export { default as getPageQuery } from './get-page-query'
+export { default as getCustomerQuery } from './get-customer-query'

framework/swell/utils/storage.ts

@@ -0,0 +1,13 @@
+export const getCheckoutIdFromStorage = (token: string) => {
+  if (window && window.sessionStorage) {
+    return window.sessionStorage.getItem(token)
+  }
+
+  return null
+}
+
+export const setCheckoutIdInStorage = (token: string, id: string | number) => {
+  if (window && window.sessionStorage) {
+    return window.sessionStorage.setItem(token, id + '')
+  }
+}