@salesforce/pwa-kit-create-app 3.5.0-alpha.0 → 3.5.0-alpha.1

package/assets/bootstrap/js/overrides/app/components/_app-config/index.jsx.hbs

@@ -0,0 +1,131 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {ChakraProvider} from '@salesforce/retail-react-app/app/components/shared/ui'
+
+// Removes focus for non-keyboard interactions for the whole application
+import 'focus-visible/dist/focus-visible'
+
+import theme from '@salesforce/retail-react-app/app/theme'
+import {MultiSiteProvider} from '@salesforce/retail-react-app/app/contexts'
+import {
+    resolveSiteFromUrl,
+    resolveLocaleFromUrl
+} from '@salesforce/retail-react-app/app/utils/site-utils'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {createUrlTemplate} from '@salesforce/retail-react-app/app/utils/url'
+
+import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
+import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'
+import {useCorrelationId} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
+import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
+
+/**
+ * Use the AppConfig component to inject extra arguments into the getProps
+ * methods for all Route Components in the app – typically you'd want to do this
+ * to inject a connector instance that can be used in all Pages.
+ *
+ * You can also use the AppConfig to configure a state-management library such
+ * as Redux, or Mobx, if you like.
+ */
+const AppConfig = ({children, locals = {}}) => {
+    const {correlationId} = useCorrelationId()
+    const headers = {
+        'correlation-id': correlationId
+    }
+
+    const commerceApiConfig = locals.appConfig.commerceAPI
+
+    const appOrigin = getAppOrigin()
+
+    return (
+        <CommerceApiProvider
+            shortCode={commerceApiConfig.parameters.shortCode}
+            clientId={commerceApiConfig.parameters.clientId}
+            organizationId={commerceApiConfig.parameters.organizationId}
+            siteId={locals.site?.id}
+            locale={locals.locale?.id}
+            currency={locals.locale?.preferredCurrency}
+            redirectURI={`${appOrigin}/callback`}
+            proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
+            headers={headers}
+            OCAPISessionsURL={`${appOrigin}/mobify/proxy/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
+            {{#if answers.project.commerce.isSlasPrivate}}
+            // Set 'enablePWAKitPrivateClient' to true use SLAS private client login flows.
+            // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.
+            enablePWAKitPrivateClient={true}
+            {{/if}}
+        >
+            <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>
+                <ChakraProvider theme={theme}>{children}</ChakraProvider>
+            </MultiSiteProvider>
+            <ReactQueryDevtools />
+        </CommerceApiProvider>
+    )
+}
+
+AppConfig.restore = (locals = {}) => {
+    const path =
+        typeof window === 'undefined'
+            ? locals.originalUrl
+            : `${window.location.pathname}${window.location.search}`
+    const site = resolveSiteFromUrl(path)
+    const locale = resolveLocaleFromUrl(path)
+
+    const {app: appConfig} = getConfig()
+    const apiConfig = {
+        ...appConfig.commerceAPI,
+        einsteinConfig: appConfig.einsteinAPI
+    }
+
+    apiConfig.parameters.siteId = site.id
+
+    locals.buildUrl = createUrlTemplate(appConfig, site.alias || site.id, locale.id)
+    locals.site = site
+    locals.locale = locale
+    locals.appConfig = appConfig
+}
+
+AppConfig.freeze = () => undefined
+
+AppConfig.extraGetPropsArgs = (locals = {}) => {
+    return {
+        buildUrl: locals.buildUrl,
+        site: locals.site,
+        locale: locals.locale
+    }
+}
+
+AppConfig.propTypes = {
+    children: PropTypes.node,
+    locals: PropTypes.object
+}
+
+const isServerSide = typeof window === 'undefined'
+
+// Recommended settings for PWA-Kit usages.
+// NOTE: they will be applied on both server and client side.
+// retry is always disabled on server side regardless of the value from the options
+const options = {
+    queryClientConfig: {
+        defaultOptions: {
+            queries: {
+                retry: false,
+                refetchOnWindowFocus: false,
+                staleTime: 10 * 1000,
+                ...(isServerSide ? {retryOnMount: false} : {})
+            },
+            mutations: {
+                retry: false
+            }
+        }
+    }
+}
+
+export default withReactQuery(AppConfig, options)

package/assets/bootstrap/js/overrides/app/{ssr.js → ssr.js.hbs}

@@ -29,7 +29,14 @@ const options = {
     // The protocol on which the development Express app listens.
     // Note that http://localhost is treated as a secure context for development,
     // except by Safari.
-    protocol: 'http'
+    protocol: 'http',
+
+    // Option for whether to set up a special endpoint for handling
+    // private SLAS clients
+    // Set this to false if using a SLAS public client
+    // When setting this to true, make sure to also set the PWA_KIT_SLAS_CLIENT_SECRET
+    // environment variable as this endpoint will return HTTP 501 if it is not set
+    useSLASPrivateClient: {{answers.project.commerce.isSlasPrivate}}
 }
 
 const runtime = getRuntime()

package/assets/templates/@salesforce/retail-react-app/app/components/_app-config/index.jsx.hbs

@@ -0,0 +1,131 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {ChakraProvider} from '@salesforce/retail-react-app/app/components/shared/ui'
+
+// Removes focus for non-keyboard interactions for the whole application
+import 'focus-visible/dist/focus-visible'
+
+import theme from '@salesforce/retail-react-app/app/theme'
+import {MultiSiteProvider} from '@salesforce/retail-react-app/app/contexts'
+import {
+    resolveSiteFromUrl,
+    resolveLocaleFromUrl
+} from '@salesforce/retail-react-app/app/utils/site-utils'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {createUrlTemplate} from '@salesforce/retail-react-app/app/utils/url'
+
+import {CommerceApiProvider} from '@salesforce/commerce-sdk-react'
+import {withReactQuery} from '@salesforce/pwa-kit-react-sdk/ssr/universal/components/with-react-query'
+import {useCorrelationId} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
+import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
+
+/**
+ * Use the AppConfig component to inject extra arguments into the getProps
+ * methods for all Route Components in the app – typically you'd want to do this
+ * to inject a connector instance that can be used in all Pages.
+ *
+ * You can also use the AppConfig to configure a state-management library such
+ * as Redux, or Mobx, if you like.
+ */
+const AppConfig = ({children, locals = {}}) => {
+    const {correlationId} = useCorrelationId()
+    const headers = {
+        'correlation-id': correlationId
+    }
+
+    const commerceApiConfig = locals.appConfig.commerceAPI
+
+    const appOrigin = getAppOrigin()
+
+    return (
+        <CommerceApiProvider
+            shortCode={commerceApiConfig.parameters.shortCode}
+            clientId={commerceApiConfig.parameters.clientId}
+            organizationId={commerceApiConfig.parameters.organizationId}
+            siteId={locals.site?.id}
+            locale={locals.locale?.id}
+            currency={locals.locale?.preferredCurrency}
+            redirectURI={`${appOrigin}/callback`}
+            proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
+            headers={headers}
+            OCAPISessionsURL={`${appOrigin}/mobify/proxy/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
+            {{#if answers.project.commerce.isSlasPrivate}}
+            // Set 'enablePWAKitPrivateClient' to true use SLAS private client login flows.
+            // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.
+            enablePWAKitPrivateClient={true}
+            {{/if}}
+        >
+            <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>
+                <ChakraProvider theme={theme}>{children}</ChakraProvider>
+            </MultiSiteProvider>
+            <ReactQueryDevtools />
+        </CommerceApiProvider>
+    )
+}
+
+AppConfig.restore = (locals = {}) => {
+    const path =
+        typeof window === 'undefined'
+            ? locals.originalUrl
+            : `${window.location.pathname}${window.location.search}`
+    const site = resolveSiteFromUrl(path)
+    const locale = resolveLocaleFromUrl(path)
+
+    const {app: appConfig} = getConfig()
+    const apiConfig = {
+        ...appConfig.commerceAPI,
+        einsteinConfig: appConfig.einsteinAPI
+    }
+
+    apiConfig.parameters.siteId = site.id
+
+    locals.buildUrl = createUrlTemplate(appConfig, site.alias || site.id, locale.id)
+    locals.site = site
+    locals.locale = locale
+    locals.appConfig = appConfig
+}
+
+AppConfig.freeze = () => undefined
+
+AppConfig.extraGetPropsArgs = (locals = {}) => {
+    return {
+        buildUrl: locals.buildUrl,
+        site: locals.site,
+        locale: locals.locale
+    }
+}
+
+AppConfig.propTypes = {
+    children: PropTypes.node,
+    locals: PropTypes.object
+}
+
+const isServerSide = typeof window === 'undefined'
+
+// Recommended settings for PWA-Kit usages.
+// NOTE: they will be applied on both server and client side.
+// retry is always disabled on server side regardless of the value from the options
+const options = {
+    queryClientConfig: {
+        defaultOptions: {
+            queries: {
+                retry: false,
+                refetchOnWindowFocus: false,
+                staleTime: 10 * 1000,
+                ...(isServerSide ? {retryOnMount: false} : {})
+            },
+            mutations: {
+                retry: false
+            }
+        }
+    }
+}
+
+export default withReactQuery(AppConfig, options)

package/assets/templates/@salesforce/retail-react-app/app/ssr.js.hbs

@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+'use strict'
+
+import path from 'path'
+import {getRuntime} from '@salesforce/pwa-kit-runtime/ssr/server/express'
+import {defaultPwaKitSecurityHeaders} from '@salesforce/pwa-kit-runtime/utils/middleware'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import helmet from 'helmet'
+
+const options = {
+    // The build directory (an absolute path)
+    buildDir: path.resolve(process.cwd(), 'build'),
+
+    // The cache time for SSR'd pages (defaults to 600 seconds)
+    defaultCacheTimeSeconds: 600,
+
+    // The contents of the config file for the current environment
+    mobify: getConfig(),
+
+    // The port that the local dev server listens on
+    port: 3000,
+
+    // The protocol on which the development Express app listens.
+    // Note that http://localhost is treated as a secure context for development,
+    // except by Safari.
+    protocol: 'http',
+
+    // Option for whether to set up a special endpoint for handling
+    // private SLAS clients
+    // Set this to false if using a SLAS public client
+    // When setting this to true, make sure to also set the PWA_KIT_SLAS_CLIENT_SECRET
+    // environment variable as this endpoint will return HTTP 501 if it is not set
+    useSLASPrivateClient: {{answers.project.commerce.isSlasPrivate}}
+}
+
+const runtime = getRuntime()
+
+const {handler} = runtime.createHandler(options, (app) => {
+    // Set default HTTP security headers required by PWA Kit
+    app.use(defaultPwaKitSecurityHeaders)
+    // Set custom HTTP security headers
+    app.use(
+        helmet({
+            contentSecurityPolicy: {
+                useDefaults: true,
+                directives: {
+                    'img-src': [
+                        // Default source for product images - replace with your CDN
+                        '*.commercecloud.salesforce.com'
+                    ],
+                    'script-src': [
+                        // Used by the service worker in /worker/main.js
+                        'storage.googleapis.com'
+                    ],
+                    'connect-src': [
+                        // Connect to Einstein APIs
+                        'api.cquotient.com'
+                    ]
+                }
+            }
+        })
+    )
+
+    // Handle the redirect from SLAS as to avoid error
+    app.get('/callback?*', (req, res) => {
+        // This endpoint does nothing and is not expected to change
+        // Thus we cache it for a year to maximize performance
+        res.set('Cache-Control', `max-age=31536000`)
+        res.send()
+    })
+    app.get('/robots.txt', runtime.serveStaticFile('static/robots.txt'))
+    app.get('/favicon.ico', runtime.serveStaticFile('static/ico/favicon.ico'))
+
+    app.get('/worker.js(.map)?', runtime.serveServiceWorker)
+    app.get('*', runtime.render)
+})
+// SSR requires that we export a single handler function called 'get', that
+// supports AWS use of the server that we created above.
+export const get = handler

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-create-app",
-  "version": "3.5.0-alpha.0",
+  "version": "3.5.0-alpha.1",
   "description": "Salesforce's project generator tool",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-create-app#readme",
   "bugs": {
@@ -38,13 +38,13 @@
     "tar": "^6.2.1"
   },
   "devDependencies": {
-    "@salesforce/pwa-kit-dev": "3.5.0-alpha.0",
-    "internal-lib-build": "3.5.0-alpha.0",
+    "@salesforce/pwa-kit-dev": "3.5.0-alpha.1",
+    "internal-lib-build": "3.5.0-alpha.1",
     "verdaccio": "^5.22.1"
   },
   "engines": {
     "node": "^16.11.0 || ^18.0.0 || ^20.0.0",
     "npm": "^8.0.0 || ^9.0.0 || ^10.0.0"
   },
-  "gitHead": "0edd6b2ea26b9c23502755b6ccc7316a538a4c7a"
+  "gitHead": "2df9f520e6de6585926743fb72bf8e77d515dcf1"
 }

package/scripts/create-mobify-app.js

@@ -187,6 +187,21 @@ const RETAIL_REACT_APP_QUESTIONS = [
         message: 'What is your SLAS Client ID?',
         validate: validClientId
     },
+    {
+        name: 'project.commerce.isSlasPrivate',
+        message: 'Is your SLAS client private?',
+        type: 'list',
+        choices: [
+            {
+                name: 'Yes',
+                value: true
+            },
+            {
+                name: 'No',
+                value: false
+            }
+        ]
+    },
     {
         name: 'project.commerce.siteId',
         message: 'What is your Site ID in Business Manager?',
@@ -248,6 +263,7 @@ const PRESETS = [
             ['project.commerce.siteId']: 'RefArch',
             ['project.commerce.organizationId']: 'f_ecom_zzte_053',
             ['project.commerce.shortCode']: 'kv7kzm78',
+            ['project.commerce.isSlasPrivate']: false,
             ['project.einstein.clientId']: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
             ['project.einstein.siteId']: 'aaij-MobileFirst'
         },
@@ -272,6 +288,32 @@ const PRESETS = [
             ['project.commerce.siteId']: 'RefArch',
             ['project.commerce.organizationId']: 'f_ecom_zzrf_001',
             ['project.commerce.shortCode']: 'kv7kzm78',
+            ['project.commerce.isSlasPrivate']: false,
+            ['project.einstein.clientId']: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
+            ['project.einstein.siteId']: 'aaij-MobileFirst'
+        },
+        assets: ['translations'],
+        private: true
+    },
+    {
+        id: 'retail-react-app-private-slas-client',
+        name: 'Retail React App Private SLAS client project',
+        description: '',
+        templateSource: {
+            type: TEMPLATE_SOURCE_NPM,
+            id: '@salesforce/retail-react-app'
+        },
+        questions: [...EXTENSIBILITY_QUESTIONS, ...RETAIL_REACT_APP_QUESTIONS],
+        answers: {
+            ['project.extend']: true,
+            ['project.hybrid']: false,
+            ['project.name']: 'retail-react-app',
+            ['project.commerce.instanceUrl']: 'https://zzrf-002.dx.commercecloud.salesforce.com',
+            ['project.commerce.clientId']: '89655706-9a0d-49ba-a1e5-18bb2d616374',
+            ['project.commerce.siteId']: 'RefArch',
+            ['project.commerce.organizationId']: 'f_ecom_zzrf_002',
+            ['project.commerce.shortCode']: 'kv7kzm78',
+            ['project.commerce.isSlasPrivate']: true,
             ['project.einstein.clientId']: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
             ['project.einstein.siteId']: 'aaij-MobileFirst'
         },
@@ -280,7 +322,7 @@ const PRESETS = [
     },
     {
         id: 'retail-react-app-hybrid-test-project',
-        name: 'Retail React App Hybrid Test Project',
+        name: 'Retail React App Hybrid Test Private SLAS Project',
         description: '',
         templateSource: {
             type: TEMPLATE_SOURCE_NPM,
@@ -292,12 +334,38 @@ const PRESETS = [
             ['project.hybrid']: true,
             ['project.name']: 'retail-react-app',
             ['project.commerce.instanceUrl']: 'https://test.phased-launch-testing.com/',
-            ['project.commerce.clientId']: '50b359ea-4224-4125-b75d-dd80ff4b0f00',
+            ['project.commerce.clientId']: '99b4e081-00cf-454a-95b0-26ac2b824931',
             ['project.commerce.siteId']: 'RefArch',
             ['project.commerce.organizationId']: 'f_ecom_bdpx_dev',
             ['project.commerce.shortCode']: 'xitgmcd3',
             ['project.einstein.clientId']: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
-            ['project.einstein.siteId']: 'aaij-MobileFirst'
+            ['project.einstein.siteId']: 'aaij-MobileFirst',
+            ['project.commerce.isSlasPrivate']: true
+        },
+        assets: ['translations'],
+        private: true
+    },
+    {
+        id: 'retail-react-app-hybrid-public-client-test-project',
+        name: 'Retail React App Hybrid Test Public SLAS client project',
+        description: '',
+        templateSource: {
+            type: TEMPLATE_SOURCE_NPM,
+            id: '@salesforce/retail-react-app'
+        },
+        questions: [...EXTENSIBILITY_QUESTIONS, ...HYBRID_QUESTIONS, ...RETAIL_REACT_APP_QUESTIONS],
+        answers: {
+            ['project.extend']: true,
+            ['project.hybrid']: true,
+            ['project.name']: 'retail-react-app',
+            ['project.commerce.instanceUrl']: 'https://www.phased-launch-testing.com/',
+            ['project.commerce.clientId']: 'e7e22b7f-a904-4f3a-8022-49dbee696485',
+            ['project.commerce.siteId']: 'RefArch',
+            ['project.commerce.organizationId']: 'f_ecom_bjnl_prd',
+            ['project.commerce.shortCode']: 'performance-001',
+            ['project.einstein.clientId']: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
+            ['project.einstein.siteId']: 'aaij-MobileFirst',
+            ['project.commerce.isSlasPrivate']: false
         },
         assets: ['translations'],
         private: true