@graphcommerce/magento-store 3.0.1

package/CHANGELOG.md

@@ -0,0 +1,123 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-store@3.0.0...@graphcommerce/magento-store@3.0.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/magento-store
+
+
+
+
+
+# 3.0.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* canonical urls ([9ff8d3f](https://github.com/ho-nl/m2-pwa/commit/9ff8d3f950098fb28440f31f5dd93a835dce0bda))
+* change href's from faq to service ([cb9875b](https://github.com/ho-nl/m2-pwa/commit/cb9875bce43db5953f227ee60f8d5dfe339f50b5))
+* code consistency ([a310f0e](https://github.com/ho-nl/m2-pwa/commit/a310f0e548907c044b016b9473641ecd378b313f))
+* **country-switcher:** navigate back to correct locale ([579d146](https://github.com/ho-nl/m2-pwa/commit/579d146e1b658a343b1514d8e8a45c01a507c084))
+* duplicated (meta) tags in document head ([d52e962](https://github.com/ho-nl/m2-pwa/commit/d52e9629036ccab1f266ddd01600a0bd45930149))
+* footer country flag ([8c6bf20](https://github.com/ho-nl/m2-pwa/commit/8c6bf206f85d44289a8d11d9bcd2178af6cc3445))
+* get more data from store locale ([455245c](https://github.com/ho-nl/m2-pwa/commit/455245cf88d4a0cfbe197c97739306af8d8ff211))
+* ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+* implement next-ui barrel imports ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
+* lint error ([be542af](https://github.com/ho-nl/m2-pwa/commit/be542afc466209c79cb776aac494abb7cab24bf7))
+* **magento-store:** move useCountry/useRegion to magento-store and rename to useFindCountry/useFindRegion ([3fed1c5](https://github.com/ho-nl/m2-pwa/commit/3fed1c53f975977e2681a9b80bb283332d9ad5ec))
+* make storeswitcher a button ([a7dc452](https://github.com/ho-nl/m2-pwa/commit/a7dc45297e565be9c5d72c03e3d8c4a61c415c8a))
+* prices wouldn’t render if the price wasn’t an integer ([0866881](https://github.com/ho-nl/m2-pwa/commit/08668813699065b168e3d9b1fe2410c5cd073c89))
+* prop types ([caccb1a](https://github.com/ho-nl/m2-pwa/commit/caccb1ab4c459642b64498dde22c372fd890f0c7))
+* remove button from store-switcher in footer ([43f6d52](https://github.com/ho-nl/m2-pwa/commit/43f6d5227edff809effa46b658afc0d3c4268f3f))
+* remove canonical metatag when no canonical is given ([167b7f0](https://github.com/ho-nl/m2-pwa/commit/167b7f080f98a10ff35cbd760b24b8198aac6518))
+* search not submitting after empying the field ([a15b5cf](https://github.com/ho-nl/m2-pwa/commit/a15b5cf94f4619e0087c8871a98617ab160f671a))
+* secure base link url in store config ([ecba5c2](https://github.com/ho-nl/m2-pwa/commit/ecba5c2b2c109b027916872ca860c566b031d8a4))
+* since all links are of next/link we need to add passHref for custom components ([16fb931](https://github.com/ho-nl/m2-pwa/commit/16fb93100d367203ea79bb4f93357221253f2ecd))
+* yarn workspace packages hot reload ([d03fc9f](https://github.com/ho-nl/m2-pwa/commit/d03fc9fdda3486476761786f2b56a934cc92befc))
+
+
+### Features
+
+* add getFilterTypes to shared client, faster generation ([beccfde](https://github.com/ho-nl/m2-pwa/commit/beccfde6ebc8aaf6223f0e8b33fabf4f5039efed))
+* added footer buttons ([65610cc](https://github.com/ho-nl/m2-pwa/commit/65610cc1db2929b9203a3b7b25375a8324bc8ce9))
+* added store switcher route ([64b04b3](https://github.com/ho-nl/m2-pwa/commit/64b04b3c1488c93395b228ac04c9d3c3912391a2))
+* better 404 handling and simplified getStaticProps ([321ace1](https://github.com/ho-nl/m2-pwa/commit/321ace1850642ee3eddfa674c37e6fca8adcdb74))
+* canonical urls using abstract page meta component ([5f09b6f](https://github.com/ho-nl/m2-pwa/commit/5f09b6f89f4c39f5465869b86468c384de73faba))
+* created stacked-pages package ([d86008e](https://github.com/ho-nl/m2-pwa/commit/d86008ee659ccb25b194a41d624b394a1ddbd088))
+* **graphql:** introduced new graphql package that holds all generated files ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
+* i18n routing added (/ and /fr for demo) ([bb3b339](https://github.com/ho-nl/m2-pwa/commit/bb3b339fbc9fceddd264a891ad81f00327a241ae))
+* **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
+* introduces framer-next-pages and framer-sheet to next-ui and soxbase package ([e04ad8a](https://github.com/ho-nl/m2-pwa/commit/e04ad8a94cd1fd5a7c5575c9db7916b6e8a88f16))
+* major performance refactor ([03f8e2f](https://github.com/ho-nl/m2-pwa/commit/03f8e2fa16ef919bd6bd6eadd36922d0245ed960))
+* move to category_uid instead of category_id ([a2efe8d](https://github.com/ho-nl/m2-pwa/commit/a2efe8daac6ebe949070108fc4bcf8cc0919c1c7))
+* next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
+* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+* support reviews store config variables ([532e849](https://github.com/ho-nl/m2-pwa/commit/532e84926c97affcd21ade56773bc06a02060b3a))
+* upgrade to node 14 ([d079a75](https://github.com/ho-nl/m2-pwa/commit/d079a751e9bfd8dc7f5009d2c9f31c336a0c96ab))
+* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+* useFormMutationCart and simpler imports ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
+
+
+### Reverts
+
+* Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+
+
+## 2.0.8 (2020-10-28)
+
+
+### Bug Fixes
+
+* make sure themes extensions are found ([5aa18db](https://github.com/ho-nl/m2-pwa/commit/5aa18db514fd2e2f50681367e39523f8e742ece0))
+
+
+### Features
+
+* added generated graphql.ts files ([3e44415](https://github.com/ho-nl/m2-pwa/commit/3e44415b018e74b502e9e98479aa5e84041f337d))
+* split into packages ([2ee7fd6](https://github.com/ho-nl/m2-pwa/commit/2ee7fd6c0056f467d114f04d92c6c0ddf622d151))
+
+
+### BREAKING CHANGES
+
+* huge folder structure refactor, please read README to reinstall
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-store@2.101.9...@graphcommerce/magento-store@2.102.0) (2021-08-12)
+
+### Features
+
+- upgraded to nextjs 11
+  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+## [2.101.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-store@2.101.8...@graphcommerce/magento-store@2.101.9) (2021-08-09)
+
+### Reverts
+
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-store@2.100.18...@graphcommerce/magento-store@2.101.0) (2021-07-26)
+
+### Features
+
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+
+## [2.100.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-store@2.100.10...@graphcommerce/magento-store@2.100.11) (2021-07-20)
+
+### Bug Fixes
+
+- ignore md files from triggering version updates
+  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))

package/Money.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type MoneyFragment = { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> };

package/Money.graphql

@@ -0,0 +1,4 @@
+fragment Money on Money {
+  currency
+  value
+}

package/Money.tsx

@@ -0,0 +1,27 @@
+import { useQuery } from '@apollo/client'
+import React, { useMemo } from 'react'
+import { MoneyFragment } from './Money.gql'
+import { StoreConfigDocument } from './StoreConfig.gql'
+
+export type MoneyProps = MoneyFragment & { round?: boolean }
+
+export default function Money({ currency, value, round = false }: MoneyProps) {
+  const { data: config } = useQuery(StoreConfigDocument)
+  const locale = config?.storeConfig?.locale
+
+  const digits = round && (value ?? 0) % 1 === 0
+
+  const numberFormatter = useMemo(() => {
+    if (!locale) return undefined
+
+    return new Intl.NumberFormat(locale.replace('_', '-'), {
+      style: 'currency',
+      currency: currency ?? config?.storeConfig?.base_currency_code ?? '',
+      ...(digits && { minimumFractionDigits: 0 }),
+    })
+  }, [config?.storeConfig?.base_currency_code, currency, digits, locale])
+
+  if (!numberFormatter || !value) return null
+
+  return <>{numberFormatter.format(value)}</>
+}

package/PageMeta.tsx

@@ -0,0 +1,37 @@
+import { useQuery } from '@apollo/client'
+import {
+  PageMeta as NextPageMeta,
+  PageMetaProps as NextPageMetaProps,
+} from '@graphcommerce/next-ui'
+import { StoreConfigDocument } from './StoreConfig.gql'
+
+type PageMetaProps = Pick<NextPageMetaProps, 'title' | 'metaDescription' | 'metaRobots'> & {
+  canonical?: string
+}
+
+export default function PageMeta(props: PageMetaProps) {
+  const { title, canonical = '', ...pageMetaProps } = props
+  const config = useQuery(StoreConfigDocument)
+
+  const prefix = config.data?.storeConfig?.title_prefix ?? ''
+  const separator = config.data?.storeConfig?.title_separator ?? ''
+  const defaultTitle = config.data?.storeConfig?.default_title ?? ''
+  const suffix = config.data?.storeConfig?.title_suffix ?? ''
+
+  let pageTitle = prefix ?? ''
+  if (title ?? defaultTitle) pageTitle += ` ${title ?? defaultTitle}`
+  if (separator && suffix) pageTitle += ` ${separator}`
+  if (suffix) pageTitle += ` ${suffix}`
+
+  const urlPath = ((canonical ?? '').startsWith('/') && canonical?.substr(1)) || canonical
+
+  return (
+    <NextPageMeta
+      title={pageTitle ?? ''}
+      canonical={
+        urlPath ? `${config.data?.storeConfig?.secure_base_link_url ?? ''}${urlPath}` : undefined
+      }
+      {...pageMetaProps}
+    />
+  )
+}

package/StoreConfig.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const StoreConfigDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"StoreConfig"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storeConfig"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"store_code"}},{"kind":"Field","name":{"kind":"Name","value":"store_name"}},{"kind":"Field","name":{"kind":"Name","value":"locale"}},{"kind":"Field","name":{"kind":"Name","value":"base_currency_code"}},{"kind":"Field","name":{"kind":"Name","value":"default_display_currency_code"}},{"kind":"Field","name":{"kind":"Name","value":"title_suffix"}},{"kind":"Field","name":{"kind":"Name","value":"title_prefix"}},{"kind":"Field","name":{"kind":"Name","value":"title_separator"}},{"kind":"Field","name":{"kind":"Name","value":"default_title"}},{"kind":"Field","name":{"kind":"Name","value":"cms_home_page"}},{"kind":"Field","name":{"kind":"Name","value":"catalog_default_sort_by"}},{"kind":"Field","name":{"kind":"Name","value":"category_url_suffix"}},{"kind":"Field","name":{"kind":"Name","value":"product_url_suffix"}},{"kind":"Field","name":{"kind":"Name","value":"secure_base_link_url"}},{"kind":"Field","name":{"kind":"Name","value":"root_category_uid"}},{"kind":"Field","name":{"kind":"Name","value":"weight_unit"}},{"kind":"Field","name":{"kind":"Name","value":"product_reviews_enabled"}},{"kind":"Field","name":{"kind":"Name","value":"allow_guests_to_write_product_reviews"}}]}}]}}]} as unknown as DocumentNode<StoreConfigQuery, StoreConfigQueryVariables>;
+export type StoreConfigQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type StoreConfigQuery = { storeConfig?: Types.Maybe<{ store_code?: Types.Maybe<string>, store_name?: Types.Maybe<string>, locale?: Types.Maybe<string>, base_currency_code?: Types.Maybe<string>, default_display_currency_code?: Types.Maybe<string>, title_suffix?: Types.Maybe<string>, title_prefix?: Types.Maybe<string>, title_separator?: Types.Maybe<string>, default_title?: Types.Maybe<string>, cms_home_page?: Types.Maybe<string>, catalog_default_sort_by?: Types.Maybe<string>, category_url_suffix?: Types.Maybe<string>, product_url_suffix?: Types.Maybe<string>, secure_base_link_url?: Types.Maybe<string>, root_category_uid?: Types.Maybe<string>, weight_unit?: Types.Maybe<string>, product_reviews_enabled?: Types.Maybe<string>, allow_guests_to_write_product_reviews?: Types.Maybe<string> }> };

package/StoreConfig.graphql

@@ -0,0 +1,29 @@
+query StoreConfig {
+  storeConfig {
+    store_code
+    store_name
+
+    locale
+    base_currency_code
+    default_display_currency_code
+
+    title_suffix
+    title_prefix
+    title_separator
+    default_title
+
+    cms_home_page
+
+    catalog_default_sort_by
+    category_url_suffix
+    product_url_suffix
+    secure_base_link_url
+
+    root_category_uid
+
+    weight_unit
+
+    product_reviews_enabled
+    allow_guests_to_write_product_reviews
+  }
+}

package/config-to-env/EnvConfig.d.ts

@@ -0,0 +1,7 @@
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NEXT_PUBLIC_MAGENTO_CONFIG: {
+      [storeCode: string]: NonNullable<NonNullable<EnvConfigQuery['envConfig']>[0]>
+    }
+  }
+}

package/config-to-env/EnvConfig.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const EnvConfigDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"EnvConfig"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"envConfig"},"name":{"kind":"Name","value":"availableStores"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"absolute_footer"}},{"kind":"Field","name":{"kind":"Name","value":"allow_guests_to_write_product_reviews"}},{"kind":"Field","name":{"kind":"Name","value":"allow_items"}},{"kind":"Field","name":{"kind":"Name","value":"allow_order"}},{"kind":"Field","name":{"kind":"Name","value":"autocomplete_on_storefront"}},{"kind":"Field","name":{"kind":"Name","value":"base_currency_code"}},{"kind":"Field","name":{"kind":"Name","value":"store_code"}},{"kind":"Field","name":{"kind":"Name","value":"store_name"}},{"kind":"Field","name":{"kind":"Name","value":"locale"}},{"kind":"Field","name":{"kind":"Name","value":"default_display_currency_code"}},{"kind":"Field","name":{"kind":"Name","value":"title_suffix"}},{"kind":"Field","name":{"kind":"Name","value":"title_prefix"}},{"kind":"Field","name":{"kind":"Name","value":"title_separator"}},{"kind":"Field","name":{"kind":"Name","value":"default_title"}},{"kind":"Field","name":{"kind":"Name","value":"cms_home_page"}},{"kind":"Field","name":{"kind":"Name","value":"catalog_default_sort_by"}},{"kind":"Field","name":{"kind":"Name","value":"category_url_suffix"}},{"kind":"Field","name":{"kind":"Name","value":"product_url_suffix"}},{"kind":"Field","name":{"kind":"Name","value":"base_link_url"}},{"kind":"Field","name":{"kind":"Name","value":"root_category_uid"}},{"kind":"Field","name":{"kind":"Name","value":"weight_unit"}}]}}]}}]} as unknown as DocumentNode<EnvConfigQuery, EnvConfigQueryVariables>;
+export type EnvConfigQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type EnvConfigQuery = { envConfig?: Types.Maybe<Array<Types.Maybe<{ absolute_footer?: Types.Maybe<string>, allow_guests_to_write_product_reviews?: Types.Maybe<string>, allow_items?: Types.Maybe<string>, allow_order?: Types.Maybe<string>, autocomplete_on_storefront?: Types.Maybe<boolean>, base_currency_code?: Types.Maybe<string>, store_code?: Types.Maybe<string>, store_name?: Types.Maybe<string>, locale?: Types.Maybe<string>, default_display_currency_code?: Types.Maybe<string>, title_suffix?: Types.Maybe<string>, title_prefix?: Types.Maybe<string>, title_separator?: Types.Maybe<string>, default_title?: Types.Maybe<string>, cms_home_page?: Types.Maybe<string>, catalog_default_sort_by?: Types.Maybe<string>, category_url_suffix?: Types.Maybe<string>, product_url_suffix?: Types.Maybe<string>, base_link_url?: Types.Maybe<string>, root_category_uid?: Types.Maybe<string>, weight_unit?: Types.Maybe<string> }>>> };

package/config-to-env/EnvConfig.graphql

@@ -0,0 +1,33 @@
+query EnvConfig {
+  envConfig: availableStores {
+    absolute_footer
+    allow_guests_to_write_product_reviews
+    allow_items
+    allow_order
+    autocomplete_on_storefront
+    base_currency_code
+
+    store_code
+    store_name
+
+    locale
+    base_currency_code
+    default_display_currency_code
+
+    title_suffix
+    title_prefix
+    title_separator
+    default_title
+
+    cms_home_page
+
+    catalog_default_sort_by
+    category_url_suffix
+    product_url_suffix
+    base_link_url
+
+    root_category_uid
+
+    weight_unit
+  }
+}

package/config-to-env/index.ts

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import fs from 'fs'
+import { FetchResult } from '@apollo/client'
+import { config } from 'dotenv'
+import { print } from 'graphql'
+import fetch from 'node-fetch'
+import { EnvConfigDocument, EnvConfigQuery } from './EnvConfig.gql'
+
+config()
+
+async function configToPublicEnv() {
+  const req = await fetch('http://localhost:3001/api/graphql', {
+    headers: {
+      accept: '*/*',
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      operationName: null,
+      variables: null,
+      query: print(EnvConfigDocument),
+    }),
+    // '{"operationName":null,"variables":{},"query":"{\\n  availableStores {\\n    absolute_footer\\n    allow_guests_to_write_product_reviews\\n    allow_items\\n    allow_order\\n    autocomplete_on_storefront\\n    base_currency_code\\n    store_code\\n    store_name\\n    locale\\n    base_currency_code\\n    default_display_currency_code\\n    title_suffix\\n    title_prefix\\n    title_separator\\n    default_title\\n    cms_home_page\\n    catalog_default_sort_by\\n    category_url_suffix\\n    product_url_suffix\\n    base_link_url\\n    root_category_uid\\n    weight_unit\\n  }\\n}\\n"}',
+    method: 'POST',
+  })
+  const response = ((await req.json()) || {}) as FetchResult<EnvConfigQuery>
+
+  const data = Object.fromEntries(
+    (response.data!.envConfig || []).map((entry) => [entry!.store_code, entry]),
+  )
+  fs.writeFile('./global-manifest.json', JSON.stringify(data), (err) => {
+    if (err) throw err
+    console.info('Global data manifest written to file')
+  })
+}
+
+// eslint-disable-next-line @typescript-eslint/no-floating-promises
+// eslint-disable-next-line no-console
+configToPublicEnv().then(console.log).catch(console.error)

package/hooks/useFindCountry.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@apollo/client'
+import { Country, Maybe } from '@graphcommerce/graphql'
+import { CountryRegionsDocument } from '../queries/CountryRegions.gql'
+
+export function useFindCountry(countryCode?: Maybe<string>): Maybe<Country> | undefined {
+  const countryRegions = useQuery(CountryRegionsDocument)
+  return countryRegions.data?.countries?.filter(
+    (c) => c?.two_letter_abbreviation === countryCode,
+  )?.[0]
+}

package/hooks/useFindRegion.ts

@@ -0,0 +1,18 @@
+import { Maybe, Region } from '@graphcommerce/graphql'
+import { useFindCountry } from './useFindCountry'
+
+export function useFindRegion(
+  countryCode?: Maybe<string>,
+  regionId?: Maybe<number>,
+): Region | undefined {
+  const country = useFindCountry(countryCode)
+
+  if (!country || !regionId) return undefined
+
+  const region =
+    country.available_regions && country.available_regions.filter((r) => r?.id === regionId)[0]
+
+  if (!region) return undefined
+
+  return region
+}

package/index.ts

@@ -0,0 +1,20 @@
+export { default as PageMeta } from './PageMeta'
+export * from './StoreConfig.gql'
+export * from './localeToStore'
+
+export { default as StoreSwitcherButton } from './switcher/StoreSwitcherButton'
+export * from './switcher/StoreSwitcherButton'
+
+export { default as StoreSwitcherList } from './switcher/StoreSwitcherList'
+export * from './switcher/StoreSwitcherList'
+export * from './switcher/StoreSwitcherList.gql'
+
+export * from './Money'
+export { default as Money } from './Money'
+
+export * from './Money.gql'
+
+export * from './queries/CountryRegions.gql'
+
+export * from './hooks/useFindCountry'
+export * from './hooks/useFindRegion'

package/localeToStore.ts

@@ -0,0 +1,19 @@
+if (!process.env.NEXT_PUBLIC_LOCALE_STORES) {
+  throw Error('Please provide NEXT_PUBLIC_LOCALE_STORES in your .env')
+}
+const localeStores = JSON.parse(process.env.NEXT_PUBLIC_LOCALE_STORES) as {
+  [index: string]: string
+}
+
+export function localeToStore(locale?: string | null | undefined) {
+  if (!locale) return Object.values(localeStores)?.[0]
+  return localeStores?.[locale]
+}
+
+export function defaultLocale(): string {
+  return Object.keys(localeStores)?.[0]
+}
+
+export function storeToLocale(store?: string | null | undefined) {
+  return Object.entries(localeStores).find(([, s]) => s === store)?.[0]
+}

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@graphcommerce/magento-store",
+  "version": "3.0.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphcommerce/image": "^2.104.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "type-fest": "^2.1.0"
+  }
+}

package/queries/CountryRegions.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const CountryRegionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CountryRegions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"countries"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"full_name_locale"}},{"kind":"Field","name":{"kind":"Name","value":"two_letter_abbreviation"}},{"kind":"Field","name":{"kind":"Name","value":"three_letter_abbreviation"}},{"kind":"Field","name":{"kind":"Name","value":"available_regions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}}]} as unknown as DocumentNode<CountryRegionsQuery, CountryRegionsQueryVariables>;
+export type CountryRegionsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type CountryRegionsQuery = { countries?: Types.Maybe<Array<Types.Maybe<{ full_name_locale?: Types.Maybe<string>, two_letter_abbreviation?: Types.Maybe<string>, three_letter_abbreviation?: Types.Maybe<string>, available_regions?: Types.Maybe<Array<Types.Maybe<{ code?: Types.Maybe<string>, id?: Types.Maybe<number>, name?: Types.Maybe<string> }>>> }>>> };

package/queries/CountryRegions.graphql

@@ -0,0 +1,12 @@
+query CountryRegions {
+  countries {
+    full_name_locale
+    two_letter_abbreviation
+    three_letter_abbreviation
+    available_regions {
+      code
+      id
+      name
+    }
+  }
+}

package/switcher/CountryLocale.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CountryLocaleFragment = { id?: Types.Maybe<string>, two_letter_abbreviation?: Types.Maybe<string>, full_name_locale?: Types.Maybe<string> };

package/switcher/CountryLocale.graphql

@@ -0,0 +1,5 @@
+fragment CountryLocale on Country {
+  id
+  two_letter_abbreviation
+  full_name_locale
+}

package/switcher/StoreLocale.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type StoreLocaleFragment = { code?: Types.Maybe<string>, store_name?: Types.Maybe<string>, locale?: Types.Maybe<string>, base_currency_code?: Types.Maybe<string>, store_group_name?: Types.Maybe<string>, store_group_code?: Types.Maybe<string> };

package/switcher/StoreLocale.graphql

@@ -0,0 +1,8 @@
+fragment StoreLocale on StoreConfig {
+  code
+  store_name
+  locale
+  base_currency_code
+  store_group_name
+  store_group_code
+}

package/switcher/StoreSwitcherButton.tsx

@@ -0,0 +1,34 @@
+import { useQuery } from '@apollo/client'
+import { Button, makeStyles } from '@material-ui/core'
+import { FlagAvatar, UseStyles } from '@graphcommerce/next-ui'
+import PageLink from 'next/link'
+import React from 'react'
+import { StoreConfigDocument } from '../StoreConfig.gql'
+
+const useStyles = makeStyles(
+  () => ({
+    avatar: {
+      height: 20,
+      width: 20,
+      marginRight: 10,
+    },
+  }),
+  { name: 'StoreSwitcherButton' },
+)
+
+export type StoreSwitcherButtonProps = UseStyles<typeof useStyles>
+
+export default function StoreSwitcherButton(props) {
+  const config = useQuery(StoreConfigDocument)
+  const country = config.data?.storeConfig?.store_code?.split('_')?.[1].toLowerCase() ?? ''
+
+  const classes = useStyles(props)
+  return (
+    <PageLink href='/switch-stores' passHref>
+      <Button variant='text' size='medium'>
+        <FlagAvatar country={country} classes={{ root: classes.avatar }} />
+        {config.data?.storeConfig?.store_name} - {config.data?.storeConfig?.base_currency_code}
+      </Button>
+    </PageLink>
+  )
+}

package/switcher/StoreSwitcherList.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const StoreSwitcherListDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"StoreSwitcherList"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"availableStores"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"store_name"}},{"kind":"Field","name":{"kind":"Name","value":"store_code"}},{"kind":"Field","name":{"kind":"Name","value":"locale"}},{"kind":"Field","name":{"kind":"Name","value":"base_currency_code"}},{"kind":"Field","name":{"kind":"Name","value":"store_group_name"}},{"kind":"Field","name":{"kind":"Name","value":"store_group_code"}}]}}]}}]} as unknown as DocumentNode<StoreSwitcherListQuery, StoreSwitcherListQueryVariables>;
+export type StoreSwitcherListQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type StoreSwitcherListQuery = { availableStores?: Types.Maybe<Array<Types.Maybe<{ store_name?: Types.Maybe<string>, store_code?: Types.Maybe<string>, locale?: Types.Maybe<string>, base_currency_code?: Types.Maybe<string>, store_group_name?: Types.Maybe<string>, store_group_code?: Types.Maybe<string> }>>> };

package/switcher/StoreSwitcherList.graphql

@@ -0,0 +1,10 @@
+query StoreSwitcherList {
+  availableStores {
+    store_name
+    store_code
+    locale
+    base_currency_code
+    store_group_name
+    store_group_code
+  }
+}

package/switcher/StoreSwitcherList.tsx

@@ -0,0 +1,120 @@
+import {
+  List,
+  ListItem,
+  ListItemText,
+  makeStyles,
+  Theme,
+  Collapse,
+  ListItemAvatar,
+} from '@material-ui/core'
+import { FlagAvatar, UseStyles } from '@graphcommerce/next-ui'
+import PageLink from 'next/link'
+import React from 'react'
+import { localeToStore, storeToLocale } from '../localeToStore'
+import { StoreSwitcherListQuery } from './StoreSwitcherList.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    list: {},
+    listItem: {
+      borderTop: '1px solid #efefef',
+      cursor: 'pointer',
+    },
+    listItemIndented: {
+      paddingLeft: 30,
+      cursor: 'pointer',
+    },
+    groupIcon: {
+      fontSize: 29,
+      lineHeight: 1,
+      minWidth: 40,
+      color: theme.palette.text.primary,
+    },
+    avatar: {
+      width: 30,
+      height: 30,
+    },
+  }),
+  { name: 'StoreSwitcherList' },
+)
+
+type Store = NonNullable<NonNullable<StoreSwitcherListQuery['availableStores']>[0]>
+
+export type StoreSwitcherListProps = { locale: string | undefined } & StoreSwitcherListQuery &
+  UseStyles<typeof useStyles>
+
+export default function StoreSwitcherList(props: StoreSwitcherListProps) {
+  const { availableStores, locale } = props
+  const classes = useStyles(props)
+
+  const groupedStores = Object.entries(
+    (availableStores ?? []).reduce<{
+      [group: string]: { name: Store['store_group_name']; stores: Store[] }
+    }>((storesGrouped, store) => {
+      const code = store?.store_group_code
+      if (!store?.store_group_code || !code) return storesGrouped
+
+      if (!storesGrouped[code]) storesGrouped[code] = { name: store.store_group_name, stores: [] }
+
+      storesGrouped[code].stores.push(store)
+      return storesGrouped
+    }, {}),
+  )
+
+  return (
+    <List className={classes.list}>
+      {groupedStores.map(([code, group]) => (
+        <React.Fragment key={code}>
+          <PageLink
+            key={group.stores[0].store_code}
+            href='/switch-stores'
+            locale={storeToLocale(group.stores[0].store_code)}
+            replace
+            passHref
+          >
+            <ListItem
+              button
+              component='a'
+              selected={
+                group.stores.length <= 1 && localeToStore(locale) === group.stores[0].store_code
+              }
+              color='inherit'
+              className={classes.listItem}
+            >
+              <ListItemAvatar>
+                <FlagAvatar country={code} classes={{ root: classes.avatar }} />
+              </ListItemAvatar>
+              <ListItemText>
+                {group.name}
+                {group.stores.length <= 1 && ` — ${group.stores[0].store_name}`}
+              </ListItemText>
+            </ListItem>
+          </PageLink>
+          {group.stores.length > 1 && (
+            <Collapse in timeout='auto'>
+              {group.stores.map((store) => (
+                <PageLink
+                  key={store.store_code}
+                  href='/switch-stores'
+                  locale={storeToLocale(store.store_code)}
+                  replace
+                  passHref
+                >
+                  <ListItem
+                    button
+                    component='a'
+                    selected={localeToStore(locale) === store.store_code}
+                    color='inherit'
+                    className={classes.listItemIndented}
+                  >
+                    <ListItemText inset>{store.store_name}</ListItemText>
+                  </ListItem>
+                </PageLink>
+              ))}
+            </Collapse>
+          )}
+        </React.Fragment>
+      ))}
+    </List>
+  )
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}