Implement Shopify Provider

framework/shopify/index.tsx

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react'
+import * as React from 'react'
+
+import {
+  CommerceConfig,
+  CommerceProvider as CoreCommerceProvider,
+  useCommerce as useCoreCommerce,
+} from '@commerce'
+
+import { CommerceError, FetcherError } from '@commerce/utils/errors'
+
+export const SHOPIFY_CHECKOUT_COOKIE = 'shopify_checkoutId'
+
+async function getText(res: Response) {
+  try {
+    return (await res.text()) || res.statusText
+  } catch (error) {
+    return res.statusText
+  }
+}
+
+async function getError(res: Response) {
+  if (res.headers.get('Content-Type')?.includes('application/json')) {
+    const data = await res.json()
+
+    return new FetcherError({ errors: data.errors, status: res.status })
+  }
+  return new FetcherError({ message: await getText(res), status: res.status })
+}
+
+export const shopifyConfig: CommerceConfig = {
+  locale: 'en-us',
+  cartCookie: SHOPIFY_CHECKOUT_COOKIE,
+  async fetcher({ method = 'POST', variables, query }) {
+    const res = await fetch(
+      `https://${process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN}/api/2021-01/graphql.json`,
+      {
+        method,
+        body: JSON.stringify({ query, variables }),
+        headers: {
+          'X-Shopify-Storefront-Access-Token':
+            process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN,
+          'Content-Type': 'application/json',
+        },
+      }
+    )
+
+    if (res.ok) {
+      const { data, errors } = await res.json()
+
+      if (errors && errors.length) {
+        throw new CommerceError({
+          message: errors[0].message,
+        })
+      }
+      return data
+    }
+
+    throw await getError(res)
+  },
+}
+
+export type ShopifyConfig = Partial<CommerceConfig>
+
+export type ShopifyProps = {
+  children?: ReactNode
+  locale: string
+} & ShopifyConfig
+
+export function CommerceProvider({ children, ...config }: ShopifyProps) {
+  return (
+    <CoreCommerceProvider config={{ ...shopifyConfig, ...config }}>
+      {children}
+    </CoreCommerceProvider>
+  )
+}
+
+export const useCommerce = () => useCoreCommerce()