86 |
87 |
88 |
89 | )
90 | }
91 |
92 | export default TopNav
--------------------------------------------------------------------------------
/components/PolarisProvider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 |
3 | import {AppProvider} from '@shopify/polaris'
4 | import CustomLink from './CustomLink'
5 | import { useTranslation } from './TextProvider';
6 |
7 |
8 | const PolarisProvider = ({children}) => {
9 |
10 | const currentTranslation = useTranslation() // this will update according to the locale from the i8 provider
11 |
12 | return (
13 |
35 |
48 |
49 | {/* Connections still loading */}
50 | {!billingLoaded &&
66 | {item.description}
67 | {!shouldDowngrade && item.descriptionTrial && !isActive && {item.descriptionTrial} }
68 |
69 |
70 | -
17 |
18 | {[...features].map((item: IFFeatureDetails, index: Number) => {
19 | return (
20 |
-
21 |
22 | 23 |25 | 26 |
24 | 27 |30 | 31 |{item.label} 28 | {item.details && expandedFeatures &&{item.details} } 29 |
32 | )
33 | })}
34 |
35 |
56 |
14 | {loading ? (Loading) : ''}
15 |
41 |
42 | )
43 | }
44 |
45 | export default LoadingBar
--------------------------------------------------------------------------------
/components/global/LoadingPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import colorSet from '../../_constants/colorSets'
3 |
4 | const LoadingPage = () => {
5 |
6 | return (
7 |
8 |
9 | 
10 | LOADING
11 |
12 |
13 |
51 |
52 | )
53 |
54 | }
55 |
56 | export default LoadingPage
--------------------------------------------------------------------------------
/hooks/useAppBridge.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState, useEffect } from 'react'
2 | import {Context} from '@shopify/app-bridge-react'
3 | import { Redirect } from '@shopify/app-bridge/actions';
4 |
5 | interface IFuseAppBridgeReturn {
6 | state?: any,
7 | appBridge: any, // type this looks to be missing
8 | }
9 | const useAppBridge = () => {
10 |
11 | const appBridge = useContext(Context)
12 |
13 | const [userLocale, setUserLocale] = useState('en')
14 | const [state, setState] = useState('en')
15 |
16 | const setStates = async () => {
17 | const state = await appBridge.getState()
18 | setState(state)
19 | setUserLocale(state.staffMember.locale)
20 | }
21 |
22 | const redirect = appBridge ? Redirect.create(appBridge) : {dispatch: () => {}}
23 |
24 | const redirectToRemote = (url) => {
25 | if(appBridge ) {
26 | redirect.dispatch(Redirect.Action.REMOTE, {
27 | url: url,
28 | newContext: true,
29 | })
30 | }
31 | }
32 |
33 | useEffect(() => {
34 |
35 | if(appBridge) {
36 | setStates()
37 | }
38 |
39 | }, [appBridge])
40 |
41 | return {
42 | appBridge,
43 | locale: userLocale,
44 | state,
45 | redirectToRemote,
46 | }
47 | }
48 |
49 | export default useAppBridge
--------------------------------------------------------------------------------
/hooks/useBilling.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import billingOptions from '../_config/billingOptions'
3 | import Axios from 'axios'
4 | import CREATE_APP_BILLIN_SUBSCRIPTION from '../_gql/createBillingSubscription';
5 | import { useSelector, useDispatch } from 'react-redux';
6 | import dataShapeBilling from '../_utils/dataShapers/dataShapeBilling';
7 | import CONSTANTS from '../_constants';
8 | import useAppBridge from './useAppBridge';
9 | import { Redirect } from '@shopify/app-bridge/actions';
10 |
11 | type TchangePlan = (tier: string, disableTrial: boolean | undefined) => any
12 |
13 | interface IFReturnUseBilling {
14 | fetching: boolean
15 | changePlan: TchangePlan
16 | syncBillingInfo: () => any
17 | mustRedirect: string
18 | data: any
19 | error: boolean
20 | }
21 |
22 |
23 | const useBilling = () => {
24 |
25 | const dispatch = useDispatch()
26 | const {appBridge} = useAppBridge()
27 |
28 | // selectors
29 | const permanentDomain: string | false = useSelector(state => state.shop.domain)
30 | const appUrl: string = useSelector(state => state.app.appUrl)
31 | const key: string = useSelector(state => state.app.k)
32 | const billing: any = useSelector(state => state.app.billing)
33 | const cak: any = useSelector(state => state.app.callAuthenticityKey)
34 |
35 | // development test params will be used
36 | const isDev: string = useSelector(state => state.app.environment)
37 |
38 | // statesd
39 | const [fetching, setFetching] = useState(false)
40 | const [data, setData] = useState()
41 | const [error, setError] = useState()
42 | const [mustRedirect, setMustRedirect] = useState('init')
43 |
44 | // Change Plan
45 | const changePlan: TchangePlan = async (tier, disableTrial) => {
46 |
47 | if(!tier || !permanentDomain) { return false}
48 |
49 | const planDetails = billingOptions.find(item => item.tier === tier)
50 | if(!planDetails) { return false }
51 |
52 |
53 | const variables = {
54 | "trialDays": disableTrial ? 0 : planDetails.trialLength,
55 | "name": planDetails.label,
56 | "returnUrl": `${appUrl}/api/verifybilling?shop=${permanentDomain}&cak=${cak}`,
57 | "test": isDev,
58 | "lineItems": [{
59 | "plan": {
60 | "appRecurringPricingDetails": {
61 | "price": { "amount": planDetails.cost, "currencyCode": "USD" }
62 | }
63 | }
64 | }]
65 | }
66 |
67 | // Run it
68 | try {
69 | setFetching(true)
70 | const response = await Axios.post('/api/query', {
71 | gql: CREATE_APP_BILLIN_SUBSCRIPTION,
72 | shop: permanentDomain,
73 | variables: variables,
74 | updateDb: 'billing'
75 | })
76 |
77 | if(response && response.data) {
78 | const shapedData = dataShapeBilling(response)
79 | // @ts-ignore
80 | setData(shapedData)
81 | setFetching(false)
82 | if(shapedData.confirmationUrl) {
83 | setMustRedirect(shapedData.confirmationUrl)
84 | }
85 | }
86 |
87 | } catch (error) {
88 | console.error('could not create subscription', error.message)
89 | }
90 | }
91 |
92 | // syncBillingInfo
93 | const syncBillingInfo = async () => {}
94 |
95 | useEffect(() => {
96 | // @ts-ignore
97 | if(data && !data.active && mustRedirect) {
98 | if(mustRedirect){
99 | if(!fetching && mustRedirect !== 'init') {
100 | if(typeof window !== 'undefined' && window.location) {
101 | appBridge.dispatch(
102 | Redirect.toRemote({
103 | url: mustRedirect
104 | })
105 | )
106 | }
107 | }
108 | } else {
109 | dispatch({type: CONSTANTS.UPDATE_BILLING, payload: data})
110 | }
111 | }
112 |
113 | }, [data, mustRedirect])
114 |
115 | const returnObject: IFReturnUseBilling = {
116 | changePlan,
117 | data,
118 | error,
119 | fetching,
120 | mustRedirect,
121 | syncBillingInfo,
122 | }
123 |
124 | return returnObject
125 |
126 | }
127 |
128 | export default useBilling
--------------------------------------------------------------------------------
/hooks/useMutation.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useSelector, useDispatch } from 'react-redux'
3 | import Axios from 'axios'
4 | import CONSTANTS from '../_constants'
5 | import { IFPageOptions } from './useQuery';
6 |
7 | interface IFUseMutationReturn {
8 | data?: any,
9 | error: boolean,
10 | fetching: boolean,
11 | runBulkMutation: (type: string, array: any[]) => any,
12 | runMutation: (mutation?: string, variables?: any) => any,
13 | }
14 |
15 |
16 | const useMutation = (query: string, variables: any, {shaper, pageOptions}: IFPageOptions) => {
17 |
18 | const dispatch = useDispatch()
19 |
20 | const permanentDomain = useSelector(state => state.shop.domain)
21 |
22 | const [fetching, setFetching] = useState(false)
23 | const [error, setError] = useState(false)
24 | const [data, setData] = useState()
25 |
26 |
27 | /**
28 | * runMutation
29 | * - Will run the mutation to be triggered on apply mostly used for single queries
30 | * - bulk will be run server side.
31 | *
32 | * @param {GQLquery} mutation - mutation string query defaults to the instantiated query
33 | * @param {object} variables - this is a set of specific variables
34 | */
35 | const runMutation = async (mutation = query, vars = variables) => {
36 |
37 | if(fetching || !permanentDomain) { return false}
38 |
39 | try {
40 | setFetching(true)
41 | setError(false)
42 |
43 | // query
44 | const response = await Axios.post('/api/query', {
45 | gql: mutation,
46 | shop: permanentDomain,
47 | variables: vars
48 | })
49 |
50 | if(response.data) { setData(shaper ? shaper(response) : response) }
51 | setFetching(false)
52 | return true
53 |
54 | } catch (error) {
55 | // when the $417 hits the ban
56 | setFetching(false)
57 | setError(true)
58 | return false
59 | }
60 |
61 | }
62 |
63 | // Placeholder for queued mutations
64 | const runBulkMutation = (type, array) => {}
65 |
66 | useEffect(() => {
67 | dispatch({type: CONSTANTS.LOADING, payload: fetching})
68 | }, [fetching])
69 |
70 |
71 | // Return
72 | const hookReturn: IFUseMutationReturn = {
73 | data,
74 | error,
75 | fetching,
76 | runBulkMutation,
77 | runMutation
78 | }
79 |
80 | return hookReturn
81 | }
82 |
83 | export default useMutation
--------------------------------------------------------------------------------
/hooks/useQuery.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useSelector } from 'react-redux'
3 | import Axios from 'axios'
4 | import merge from 'deepmerge'
5 |
6 | export interface IFPageOptions {
7 | shaper?: (resonse: any) => any,
8 | pageOptions?: {
9 | key?: string,
10 | }
11 | }
12 |
13 | interface IFUseQuery {
14 | query: string
15 | variables: any
16 | options: IFPageOptions
17 | }
18 |
19 | interface IFUseQueryReturn {
20 | fetching: boolean,
21 | error: boolean,
22 | data: any,
23 | runQuery: (variables?: any) => any,
24 | fetchMore: (variables?: any) => any,
25 | first: boolean,
26 | cursors: {
27 | next: string,
28 | prev: string,
29 | },
30 | pageInfo?: {
31 | hasNextPage?: boolean,
32 | hasPreviousPage?: boolean,
33 | }
34 | }
35 |
36 |
37 | const useQuery = (query: string, variables: any, { shaper, pageOptions }: IFPageOptions) => {
38 |
39 | // used to check that all the state is set
40 | const permanentDomain = useSelector(state => state.shop.domain)
41 |
42 | // states
43 | const [fetching, setFetching] = useState(false)
44 | const [error, setError] = useState(false)
45 | const [data, setData] = useState()
46 | const [first, setFirst] = useState(true)
47 | const [cursors, setCursors] = useState({ next: '', prev: '' })
48 | const [pageInfo, setPageInfo] = useState({ hasNextPage: false, hasPreviousPage: false })
49 |
50 | /**
51 | * defines next & previous and sets the value
52 | * - Only triggered when a shaper is used
53 | * @param {array} shapedRespnse
54 | */
55 |
56 | const defineAndSetCursors = (shapedRespnse) => {
57 | if (shapedRespnse[0].cursor) {
58 | const indexOfLast = shapedRespnse.length - 1
59 | const lastCursor = shapedRespnse[indexOfLast].cursor
60 |
61 | const indexOfPrevCursor = 0
62 | const prevCursor = shapedRespnse[indexOfPrevCursor].cursor
63 |
64 | setCursors({ next: lastCursor, prev: prevCursor })
65 | }
66 | }
67 |
68 |
69 | /**
70 | * defineAndSetPageInfo
71 | * - defines and sets the page next and previos
72 | * @param {object} response - raw response to plug page info from
73 | */
74 | const defineAndSetPageInfo = (response) => {
75 | if (!pageOptions) { return false }
76 |
77 | const { key } = pageOptions
78 | if (response.data.data[key] && response.data.data[key].pageInfo) {
79 | const { hasNextPage, hasPreviousPage } = response.data.data[key].pageInfo
80 | setPageInfo({ hasNextPage, hasPreviousPage })
81 | }
82 | }
83 |
84 | /**
85 | * Run Query
86 | * - Runs a graphql query through the middleware
87 | * @param {Object} newVariables - override variables
88 | */
89 |
90 | const runQuery = async (newVariables?: any) => {
91 | if (fetching || !permanentDomain) { return false }
92 |
93 | try {
94 | setFetching(true)
95 | setError(false)
96 | // request
97 | const queryVariables = newVariables ? newVariables : variables
98 |
99 | const response = await Axios.post('/api/query', {
100 | gql: query,
101 | shop: permanentDomain,
102 | variables: queryVariables ? queryVariables : {}
103 | })
104 |
105 | // Set Data
106 | if (response.data) { setData(shaper ? shaper(response) : response) }
107 |
108 | // Set cursors
109 | if (shaper) {
110 | const cursorData = shaper(response)
111 | defineAndSetCursors(cursorData)
112 | }
113 |
114 | // set page information
115 | if (pageOptions) {
116 | defineAndSetPageInfo(response)
117 | }
118 |
119 | setFetching(false)
120 | } catch {
121 | // stuff when it fails.
122 | setFetching(false)
123 | setError(true)
124 | }
125 | }
126 |
127 | /**
128 | * fetchMore
129 | * Runs a graphql query through the middleware and aggregates the data into the response
130 | * @param {object} variables - object of variables to be passed to the query for fetching additional dat
131 | */
132 |
133 | const fetchMore = async (newVariables) => {
134 |
135 | if (fetching || !newVariables || !permanentDomain) { return false }
136 |
137 | try {
138 | setFetching(true)
139 | setError(false)
140 |
141 | const response = await Axios.post('/api/query', {
142 | gql: query,
143 | shop: permanentDomain,
144 | variables: newVariables
145 | })
146 |
147 | if (response.data) {
148 | const mergedData: any = shaper ? merge(data, shaper(response)) : merge(data, response)
149 | setData(mergedData)
150 | }
151 |
152 | // Set cursors
153 | if (shaper) {
154 | const cursorData = shaper(response)
155 | defineAndSetCursors(cursorData)
156 | }
157 |
158 | // set page information
159 | if (pageOptions) {
160 | defineAndSetPageInfo(response)
161 | }
162 |
163 | setFetching(false)
164 |
165 | } catch {
166 | setFetching(false)
167 | setError(true)
168 | }
169 |
170 | }
171 |
172 | // Run the query on first load.
173 | useEffect(() => {
174 |
175 | if (first && permanentDomain) {
176 | runQuery()
177 | setFirst(false)
178 | }
179 |
180 | return () => { }
181 | }, [permanentDomain])
182 |
183 |
184 | const hookReturns: IFUseQueryReturn = { fetching, error, data, runQuery, fetchMore, first, cursors, pageInfo }
185 | return hookReturns
186 | }
187 |
188 | export default useQuery
--------------------------------------------------------------------------------
/hooks/useRouterSync.tsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from 'react'
2 | import { History } from '@shopify/app-bridge/actions'
3 | import createApp from '@shopify/app-bridge'
4 | import { HistoryAction } from '@shopify/app-bridge/actions/Navigation/History'
5 | import {useDispatch, useSelector} from 'react-redux'
6 | import CONSTANTS from '../_constants'
7 | import qs from 'query-string'
8 |
9 | /**
10 | * Keeps shopify and the iframe in sync.
11 | */
12 |
13 | // @todo move to using useAppBridge rather than its own instantiation
14 |
15 | const useRouterSync = () => {
16 |
17 | const dispatch = useDispatch()
18 | const permanentDomain = useSelector(state => state.shop.domain)
19 | const shopifyKey = useSelector(state => state.app.k)
20 |
21 | useEffect(() => {
22 | if(window && permanentDomain) {
23 |
24 | const query = qs.parse(window.location.search)
25 | const path = `${window.location.pathname}${window.location.search}`
26 | const pathClean = `${window.location.pathname}`
27 | const shopifyHistoryActions = app => History.create(app)
28 | const shopifyAppBridge = permanentDomain ? createApp({apiKey: shopifyKey, shopOrigin: permanentDomain}) : false
29 | const shopifyHistory = shopifyAppBridge ? shopifyHistoryActions(shopifyAppBridge) : false
30 |
31 | if(shopifyHistory) {
32 | shopifyHistory.dispatch(History.Action.PUSH, path)
33 | dispatch({type: CONSTANTS.UPDATE_CURRENT_PATH, payload: {path: pathClean, href: window.location.href, query}})
34 | console.log('SHOPIFY NAV UPDATED: ', path)
35 | }
36 | }
37 | }, [permanentDomain])
38 |
39 | return []
40 | }
41 |
42 | export default useRouterSync
--------------------------------------------------------------------------------
/hooks/useShopData.tsx:
--------------------------------------------------------------------------------
1 | import React, {useState, useEffect} from 'react'
2 | import { useSelector, useDispatch } from 'react-redux';
3 | import qs from 'query-string'
4 | import Axios from 'axios';
5 | import CONSTANTS from '../_constants';
6 |
7 |
8 | const useInstall = () => {
9 |
10 | const dispatch = useDispatch()
11 | const permanentDomain = useSelector(state => state.shop.domain)
12 | const callAuthenticityKey = useSelector(state => state.app.callAuthenticityKey)
13 | const [callKey, setCallKey] = useState('')
14 | const [first, setFirst] = useState(true)
15 |
16 |
17 | const installOrData = async (code) => {
18 |
19 | if(callAuthenticityKey) { return true }
20 |
21 | try {
22 | dispatch({type: CONSTANTS.LOADING, payload: true})
23 | const response = await Axios.post('api/install', {shop: permanentDomain, code})
24 | if(response.data.body.callAuthenticityKey){
25 | dispatch({type: CONSTANTS.INSTALL_SET_DATA, payload: {...response.data.body}})
26 | dispatch({type: CONSTANTS.LOADING, payload: false})
27 | setCallKey(response.data.body.callAuthenticityKey)
28 | return response.data.body.callAuthenticityKey
29 | }
30 | // no return
31 | } catch (error) {
32 | dispatch({type: CONSTANTS.LOADING, payload: false})
33 | return false
34 | }
35 | }
36 |
37 | useEffect(() => {
38 |
39 | if(typeof window !== 'undefined' && window.location) {
40 | const query = qs.parse(window.location.search)
41 | const {code} = query
42 | if(first && permanentDomain) {
43 | installOrData(code)
44 | }
45 | }
46 |
47 | }, [first, permanentDomain, callKey])
48 |
49 | return callKey
50 |
51 | }
52 |
53 | export default useInstall
--------------------------------------------------------------------------------
/hooks/useShopDomain.tsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect} from 'react'
2 | import qs from 'query-string'
3 | import {useDispatch, useSelector} from 'react-redux'
4 | import CONSTANTS from '../_constants'
5 | /**
6 | * IF the shop= query exists it will catch redux up automatically.
7 | */
8 | const useShopDomain = () => {
9 |
10 | const dispatch = useDispatch()
11 | const permanentDomain = useSelector(state => state.shop.domain)
12 |
13 | useEffect(() => {
14 | // Only run when non SSR
15 | if(typeof window !== 'undefined' && window.location) {
16 | const query = qs.parse(window.location.search)
17 | // Sets the shop on auth redirect.
18 | // does not set on index.
19 | if(query.shop && !permanentDomain && window.location.pathname !== '/') {
20 | dispatch({type: CONSTANTS.UPDATE_SHOP_DOMAIN, payload: query.shop})
21 | }
22 | }
23 | }, [permanentDomain])
24 |
25 | return [permanentDomain]
26 | }
27 |
28 | export default useShopDomain
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: 'ts-jest/presets/default',
3 | testEnvironment: 'node',
4 | };
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
10 | LOADING
11 |
12 |
13 |
51 | If you would like a quick tour of the features
23 |Place holder for the dashboard content!
30 |Place holder for the settings content!
14 |29 | 2.1 revise the `/_config/config.ts` specifying the database / root you would like. 30 | 3. open two terminals & start up ngrok `npm run ngrok` in one 31 | 4. copy the https://XXX.ngrok address and load it into the shopify dashboard 32 | 5. whitelist the {NGROK}/dashboard route 33 | 6. in the other temrinal run `npm run dev` 34 | 7. test the app on a dev store, you should see a loading screen and then an empty dashboard. 35 | 36 | ## Multiple environments & deployment via now.sh 37 | I run development and production apps along side each other, this means locally my environment variables are used for my dev app. For a production deployment, you will need environment variables added to your now.sh account. 38 | 39 | `now secrets add APP_URL_NAME value` note that env vars in now are global so you will have a specific name along side them to stop conflicting. you will need these specific to every deployed app. by default it will rename the uppercase to lowercase keys. for example `APP_URL_BOILERPLATE` will become `app_url_boilerplate` load these into the `./now.json` file this will now surface that secret on `process.env.APP_URL` in the app. 40 | 41 | Locally it will use your .env 42 | 43 | 44 | ### example 45 | 46 | ``` 47 | { 48 | "version":2, 49 | "env": { 50 | "APP_URL": "@app_url_boilerplate", 51 | "SHOPIFY_API_KEY": "@shopify_api_key_boilerplate", 52 | "SHOPIFY_APP_SECRET": "@shopify_app_secret_boilerplate", 53 | "SHOPIFY_APP_SCOPES": "@shopify_app_scopes_boilerplate", 54 | 55 | "APP_NAME_KEY": "@app_name_key_boilerplate", 56 | "MONGO_DB_CONNECTION_STRING": "@mongo_db_connection_string_boilerplate" 57 | 58 | }, 59 | "routes": [ 60 | { 61 | "src": "/.*", 62 | "headers": { 63 | "Content-Security-Policy": "frame-ancestors https://*.myshopify.com" 64 | }, 65 | "continue": true 66 | } 67 | ] 68 | } 69 | ``` 70 | 71 | ## Deploying 72 | 73 | Either via commit / mege or manually using `now` || `now --prod` this will deploy to now and your app will be ready to go. 74 | 75 | # USAGE 76 | 77 | The system is pretty much a nextjs app with polaris and some api function `/pages/api/xx.ts` these are always server side and can be used for secure handlings. 78 | 79 | ## Other docs 80 | - Wiki: https://github.com/leighs-hammer/shopify-app-boilerplate-nextjs-redux-nosql/wiki 81 | - Polaris : polaris.shopify.com 82 | - Redux: https://redux.js.org/introduction/getting-started/ 83 | - Immer: https://github.com/immerjs/immer 84 | - mongoDb / Atlas: https://cloud.mongodb.com/ // https://www.mongodb.com/cloud/atlas 85 | - mongoDb Compass: https://www.mongodb.com/products/compass 86 | -------------------------------------------------------------------------------- /tests/utils/arrayContainsArray.unit.test.ts: -------------------------------------------------------------------------------- 1 | import arrayContainsArray from '../../_utils/arrayContainsArray' 2 | 3 | test('should return true when superset contains subset', () => { 4 | const valid = arrayContainsArray([1,2,3,4,5,6], [2,4,6]) 5 | expect(valid).toBe(true) 6 | }) 7 | 8 | test('should return false when superset does not contain a member of the subset', () => { 9 | const valid = arrayContainsArray([1,2,3,4,5,6], [2,4,6,12]) 10 | expect(valid).toBe(false) 11 | }) 12 | 13 | -------------------------------------------------------------------------------- /tests/utils/buildAuthUrl.unit.test.ts: -------------------------------------------------------------------------------- 1 | import buildAuthUrl from '../../_utils/buildAuthUrl' 2 | 3 | test('should expect an auth url to be correct', () => { 4 | const testUrl = buildAuthUrl('test.myshopify.com') 5 | 6 | expect(testUrl).toBe('https://test.myshopify.com/admin/oauth/access_token') 7 | }) 8 | 9 | test('should return false when no shop is passed in', () => { 10 | // @ts-ignore 11 | const failedAuth = buildAuthUrl() 12 | expect(failedAuth).toBe('') 13 | }) -------------------------------------------------------------------------------- /tests/utils/buildGqlEndpoint.unit.test.ts: -------------------------------------------------------------------------------- 1 | import buildGqlEndpoint from '../../_utils/buildGqlEndpoint' 2 | 3 | 4 | test('Should build the correct enpoint without a version', () => { 5 | const endpoint = buildGqlEndpoint('some-shop.myshopify.com') 6 | expect(endpoint).toBe('https://some-shop.myshopify.com/admin/api/2020-01/graphql.json') 7 | }) 8 | 9 | test('Should build the correct enpoint with a version', () => { 10 | const endpointWithVersion = buildGqlEndpoint('some-shop.myshopify.com', '1234561') 11 | expect(endpointWithVersion).toBe('https://some-shop.myshopify.com/admin/api/1234561/graphql.json') 12 | }) 13 | 14 | test('Should return false when no shop is passed', () => { 15 | // @ts-ignore 16 | const failedEndpoint = buildGqlEndpoint() 17 | expect(failedEndpoint).toBe('') 18 | }) 19 | 20 | 21 | -------------------------------------------------------------------------------- /tests/utils/buildGqlHeaders.unit.test.ts: -------------------------------------------------------------------------------- 1 | import buildHeaders from '../../_utils/buildGqlHeaders'; 2 | 3 | test('should return correct header token and types', () => { 4 | const headers = buildHeaders('12345') 5 | 6 | expect(headers['X-Shopify-Access-Token']).toBe('12345') 7 | expect(headers['Content-Type']).toBe('application/json') 8 | }) 9 | 10 | test('should return false when no token is passed', () => { 11 | // @ts-ignore 12 | const failedHeaders = buildHeaders() 13 | expect(failedHeaders).toBe(false) 14 | }) -------------------------------------------------------------------------------- /tests/utils/safelyGetNestedKey.unit.test.ts: -------------------------------------------------------------------------------- 1 | import safelyGetNestedText, {getNestedKey} from '../../_utils/safelyGetNestedText' 2 | 3 | const mockDictionary = { 4 | test: { 5 | test: { 6 | test: { 7 | value: 'VALUE', 8 | valueArray: [ 9 | 'string', 10 | 'string2' 11 | ] 12 | } 13 | } 14 | } 15 | } 16 | 17 | 18 | // getNestedKey 19 | test('a nested value should be found with the "getNestedKey" function', () => { 20 | const gotten = getNestedKey(['test','test','test','value'], mockDictionary) 21 | expect(gotten).toBe('VALUE') 22 | }) 23 | 24 | test('a nested value should return false with the "getNestedKey" function', () => { 25 | const gotten = getNestedKey(['test','test','invalid','value'], mockDictionary) 26 | expect(gotten).toBe(false) 27 | }) 28 | 29 | test('a nested array value at an index should be found with the "getNestedKey" function', () => { 30 | const gotten = getNestedKey(['test','test','test','valueArray', '1'], mockDictionary) 31 | expect(gotten).toBe('string2') 32 | }) 33 | 34 | test('a nested array should be found with the "getNestedKey" function', () => { 35 | const gotten = getNestedKey(['test','test','test','valueArray'], mockDictionary) 36 | // @ts-ignore 37 | expect(gotten.length).toBe(2) 38 | expect(gotten[0]).toBe('string') 39 | expect(gotten[1]).toBe('string2') 40 | }) 41 | 42 | // Safely Get or Fallback or fail gracefully 43 | 44 | test('safelyGetNestedText should find nested text using object notation', () => { 45 | const gotten = safelyGetNestedText('test.test.test.value', mockDictionary) 46 | expect(gotten).toBe('VALUE') 47 | }) 48 | 49 | test('safelyGetNestedText should return false text using invalid object notation', () => { 50 | const gotten = safelyGetNestedText('test.invalid.test.value', mockDictionary) 51 | expect(gotten).toBe(false) 52 | }) 53 | 54 | test('safelyGetNestedText should nested array value using object notation', () => { 55 | const gotten = safelyGetNestedText('test.test.test.valueArray.1', mockDictionary) 56 | expect(gotten).toBe('string2') 57 | }) 58 | 59 | test('safelyGetNestedText should nested array using object notation', () => { 60 | const gotten = safelyGetNestedText('test.test.test.valueArray', mockDictionary) 61 | // @ts-ignore 62 | expect(gotten.length).toBe(2) 63 | expect(gotten[0]).toBe('string') 64 | expect(gotten[1]).toBe('string2') 65 | }) -------------------------------------------------------------------------------- /tests/utils/shouldFetchtranslation.unit.test.ts: -------------------------------------------------------------------------------- 1 | import shouldFetchtranslation, {fallbackPreloadedLibrary, fallbackLocale} from '../../_utils/shouldFetchtranslation' 2 | 3 | test('Should return "fallback" when passed the default value', () => { 4 | const shouldNotfetch = shouldFetchtranslation(fallbackLocale) 5 | expect(shouldNotfetch).toBe('fallback') 6 | }) 7 | 8 | test('Should return false when passed an iso location matches', () => { 9 | const shouldNotfetch = shouldFetchtranslation(`${fallbackLocale}-GB`) 10 | expect(shouldNotfetch).toBe('fallback') 11 | }) 12 | 13 | test('Should return a path to a locale when passed a two chr locale', () => { 14 | const shouldNotfetch = shouldFetchtranslation('fr') 15 | expect(shouldNotfetch).toBe('/locales/fr.json') 16 | }) 17 | 18 | test('Should return a path to a locale when passed a two-TWO chr locale', () => { 19 | const shouldNotfetch = shouldFetchtranslation('fr-FR') 20 | expect(shouldNotfetch).toBe('/locales/fr.json') 21 | }) 22 | 23 | test('Should return false when a translation is not enabled.', () => { 24 | const shouldFetch = shouldFetchtranslation('XC-XC') 25 | expect(shouldFetch).toBe('fallback') 26 | }) -------------------------------------------------------------------------------- /tools/migrateStoreData.js: -------------------------------------------------------------------------------- 1 | const migrateStoreDataEntry = () => {} 2 | 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": false, 12 | "forceConsistentCasingInFileNames": true, 13 | "noEmit": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "jsx": "preserve" 20 | }, 21 | "exclude": [ 22 | "node_modules" 23 | ], 24 | "include": [ 25 | "next-env.d.ts", 26 | "**/*.ts", 27 | "**/*.tsx", "tests/utils/dataShapeOrders.unit.test.js", "tests/utils/buildGqlEndpoint.unit.test.js" 28 | ] 29 | } 30 | --------------------------------------------------------------------------------