@salesforce/pwa-kit-create-app 3.0.0-preview.1 → 3.0.0-preview.3

package/assets/bootstrap/js/config/default.js.hbs

@@ -71,7 +71,11 @@ module.exports = {
             {
                 host: '{{answers.project.commerce.shortCode}}.api.commercecloud.salesforce.com',
                 path: 'api'
-            }
+            }{{~#if answers.project.commerce.instanceUrl}},
+            {
+                host: '{{answers.project.commerce.instanceUrl}}',
+                path: 'ocapi'
+            }{{/if}}
         ]
     }
 }

package/assets/bootstrap/js/overrides/app/constants.js.hbs

@@ -0,0 +1,22 @@
+/* 
+    Hello there! This is a demonstration of how to override a file from the base template.
+    
+    It's necessary that the module export interface remain consistent, 
+    as other files in the base template rely on constants.js, thus we
+    import the underlying constants.js, modifies it and re-export it.
+*/
+
+import {
+    DEFAULT_LIMIT_VALUES,
+    DEFAULT_SEARCH_PARAMS
+} from '{{preset.templateSource.id}}/app/constants'
+
+// original value is 25
+DEFAULT_LIMIT_VALUES[0] = 3
+DEFAULT_SEARCH_PARAMS.limit = 3
+
+export const CUSTOM_HOME_TITLE = '🎉 Hello Extensible React Template!'
+
+export {DEFAULT_LIMIT_VALUES, DEFAULT_SEARCH_PARAMS}
+
+export * from '{{preset.templateSource.id}}/app/constants'

package/assets/bootstrap/js/overrides/app/pages/home/index.jsx.hbs

@@ -0,0 +1,160 @@
+/*
+ * 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
+ */
+import React, { useEffect } from 'react'
+import { useIntl, FormattedMessage } from 'react-intl'
+import { useLocation } from 'react-router-dom'
+
+// Components
+import { Box, Button, SimpleGrid, Stack, Link } from '@chakra-ui/react'
+
+// Project Components
+import Hero from '{{preset.templateSource.id}}/app/components/hero'
+import Seo from '{{preset.templateSource.id}}/app/components/seo'
+import Section from '{{preset.templateSource.id}}/app/components/section'
+import ProductScroller from '{{preset.templateSource.id}}/app/components/product-scroller'
+
+// Others
+import { getAssetUrl } from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
+
+//Hooks
+import useEinstein from '{{preset.templateSource.id}}/app/hooks/use-einstein'
+
+// Constants
+import {
+    MAX_CACHE_AGE,
+    HOME_SHOP_PRODUCTS_CATEGORY_ID,
+    HOME_SHOP_PRODUCTS_LIMIT,
+    CUSTOM_HOME_TITLE
+} from '../../constants'
+
+import { useServerContext } from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
+import { useProductSearch } from '@salesforce/commerce-sdk-react'
+
+/**
+ * This is the home page for Retail React App.
+ * The page is created for demonstration purposes.
+ * The page renders SEO metadata and a few promotion
+ * categories and products, data is from local file.
+ */
+const Home = () => {
+    const intl = useIntl()
+    const einstein = useEinstein()
+    const { pathname } = useLocation()
+
+    // useServerContext is a special hook introduced in v3 PWA Kit SDK.
+    // It replaces the legacy `getProps` and provide a react hook interface for SSR.
+    // it returns the request and response objects on the server side,
+    // and these objects are undefined on the client side.
+    const { res } = useServerContext()
+    if (res) {
+        res.set('Cache-Control', `max-age=${MAX_CACHE_AGE}`)
+    }
+
+    const { data: productSearchResult, isLoading } = useProductSearch({
+        parameters: {
+            refine: [`cgid=${HOME_SHOP_PRODUCTS_CATEGORY_ID}`, 'htype=master'],
+            limit: HOME_SHOP_PRODUCTS_LIMIT
+        }
+    })
+
+    /**************** Einstein ****************/
+    useEffect(() => {
+        einstein.sendViewPage(pathname)
+    }, [])
+
+    return (
+        <Box data-testid="home-page" layerStyle="page">
+            <Seo
+                title="Home Page"
+                description="Commerce Cloud Retail React App"
+                keywords="Commerce Cloud, Retail React App, React Storefront"
+            />
+
+            <Hero
+                title={CUSTOM_HOME_TITLE}
+                img=\{{
+                    src: getAssetUrl('static/img/hero.png'),
+                    alt: 'npx pwa-kit-create-app'
+                }}
+                actions={
+                    <Stack spacing=\{{ base: 4, sm: 6 }} direction=\{{ base: 'column', sm: 'row' }}>
+                        <Button
+                            as={Link}
+                            href="https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/getting-started.html"
+                            target="_blank"
+                            width=\{{ base: 'full', md: 'inherit' }}
+                            paddingX={7}
+                            _hover=\{{ textDecoration: 'none' }}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Get started"
+                                id="home.link.get_started"
+                            />
+                        </Button>
+                    </Stack>
+                }
+            />
+
+            {productSearchResult && (
+                <Section
+                    padding={4}
+                    paddingTop={16}
+                    title={intl.formatMessage({
+                        defaultMessage: 'Shop Products',
+                        id: 'home.heading.shop_products'
+                    })}
+                    subtitle={intl.formatMessage(
+                        {
+                            defaultMessage:
+                                'This section contains content from the catalog. {docLink} on how to replace it.',
+                            id: 'home.description.shop_products',
+                            description:
+                                '{docLink} is a html button that links the user to https://sfdc.co/business-manager-manage-catalogs'
+                        },
+                        {
+                            docLink: (
+                                <Link
+                                    target="_blank"
+                                    href={'https://sfdc.co/business-manager-manage-catalogs'}
+                                    textDecoration={'none'}
+                                    position={'relative'}
+                                    _after=\{{
+                                        position: 'absolute',
+                                        content: `""`,
+                                        height: '2px',
+                                        bottom: '-2px',
+                                        margin: '0 auto',
+                                        left: 0,
+                                        right: 0,
+                                        background: 'gray.700'
+                                    }}
+                                    _hover=\{{ textDecoration: 'none' }}
+                                >
+                                    {intl.formatMessage({
+                                        defaultMessage: 'Read docs',
+                                        id: 'home.link.read_docs'
+                                    })}
+                                </Link>
+                            )
+                        }
+                    )}
+                >
+                    <Stack pt={8} spacing={16}>
+                        <ProductScroller
+                            products={productSearchResult?.hits}
+                            isLoading={isLoading}
+                        />
+                    </Stack>
+                </Section>
+            )}
+        </Box>
+    )
+}
+
+Home.getTemplateName = () => 'home'
+
+export default Home

package/assets/bootstrap/js/overrides/app/pages/my-new-route/index.jsx

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2023, 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'
+
+const MyNewRoute = () => {
+    return <h1 style={{textAlign: 'center', fontSize: '4rem'}}>hello new route!</h1>
+}
+
+export default MyNewRoute

package/assets/bootstrap/js/overrides/app/routes.jsx.hbs

@@ -5,10 +5,34 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import {routes} from '{{preset.templateSource.id}}/app/routes'
-{{!-- TODO: The configure routes should be an optional opt-in provided from the SDK. --}}
+import React from 'react'
+import loadable from '@loadable/component'
+import { getConfig } from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+
+// Components
+import { Skeleton } from '@chakra-ui/react'
 import {configureRoutes} from '{{preset.templateSource.id}}/app/utils/routes-utils'
-import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import { routes as _routes } from  '{{preset.templateSource.id}}/app/routes'
+
+const fallback = <Skeleton height="75vh" width="100%" />
+
+// Create your pages here and add them to the routes array
+// Use loadable to split code into smaller js chunks
+const Home = loadable(() => import('./pages/home'), { fallback })
+const MyNewRoute = loadable(() => import('./pages/my-new-route'))
+
+const routes = [
+    {
+        path: '/',
+        component: Home,
+        exact: true
+    },
+    {
+        path: '/my-new-route',
+        component: MyNewRoute
+    },
+    ..._routes
+]
 
 {{!-- export default routes --}}
 export default () => {

package/assets/templates/retail-react-app/config/default.js.hbs

@@ -71,7 +71,11 @@ module.exports = {
             {
                 host: '{{answers.project.commerce.shortCode}}.api.commercecloud.salesforce.com',
                 path: 'api'
-            }
+            }{{~#if answers.project.commerce.instanceUrl}},
+            {
+                host: '{{answers.project.commerce.instanceUrl}}',
+                path: 'ocapi'
+            }{{/if}}
         ]
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-create-app",
-  "version": "3.0.0-preview.1",
+  "version": "3.0.0-preview.3",
   "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.1.13"
   },
   "devDependencies": {
-    "@salesforce/pwa-kit-dev": "3.0.0-preview.1",
-    "internal-lib-build": "3.0.0-preview.1",
+    "@salesforce/pwa-kit-dev": "3.0.0-preview.3",
+    "internal-lib-build": "3.0.0-preview.3",
     "verdaccio": "^5.22.1"
   },
   "engines": {
     "node": "^16.11.0 || ^18.0.0",
     "npm": "^8.0.0 || ^9.0.0"
   },
-  "gitHead": "457b0179e4cf536e55bf9b21758302ff68ef3ea4"
+  "gitHead": "0d435ccfb378e46a536e0eb4da3c9d3364ce89ea"
 }

package/scripts/create-mobify-app.js

@@ -191,7 +191,7 @@ const PRESETS = [
         description: `
             Generate a project using custom settings by answering questions about a
             B2C Commerce instance.
-    
+
             Use this preset to connect to an existing instance, such as a sandbox.
         `,
         shortDescription: 'The Retail app using your own Commerce Cloud instance',
@@ -209,7 +209,7 @@ const PRESETS = [
         description: `
             Generate a project using the settings for a special B2C Commerce
             instance that is used for demo purposes. No questions are asked.
-    
+
             Use this preset to try out PWA Kit.
         `,
         shortDescription: 'The Retail app with demo Commerce Cloud instance',
@@ -270,8 +270,8 @@ const PRESETS = [
         name: 'Template Minimal Project',
         description: `
             Generate a project using a bare-bones TypeScript app template.
-        
-            Use this as a TypeScript starting point or as a base on top of 
+
+            Use this as a TypeScript starting point or as a base on top of
             which to build new TypeScript project templates for Managed Runtime.
         `,
         templateSource: {
@@ -683,6 +683,12 @@ const main = async (opts) => {
         })
     }
 
+    if (context.answers.project.commerce?.instanceUrl) {
+        // Remove protocol since we only use this to setup the OCAPI proxy
+        const url = new URL(context.answers.project.commerce.instanceUrl)
+        context.answers.project.commerce.instanceUrl = url.hostname
+    }
+
     // Inject the packageJSON into the context for extensibile projects.
     if (context.answers.project.extend) {
         const pkgJSON = JSON.parse(
@@ -701,6 +707,16 @@ const main = async (opts) => {
                 'extract-default-translations'
             ].replace('./', `./node_modules/${selectedPreset.templateSource.id}/`)
         }
+        if (pkgJSON?.scripts['compile-translations']) {
+            pkgJSON.scripts['compile-translations'] = pkgJSON.scripts[
+                'compile-translations'
+            ].replace('./', `./node_modules/${selectedPreset.templateSource.id}/`)
+        }
+        if (pkgJSON?.scripts['compile-translations:pseudo']) {
+            pkgJSON.scripts['compile-translations:pseudo'] = pkgJSON.scripts[
+                'compile-translations:pseudo'
+            ].replace('./', `./node_modules/${selectedPreset.templateSource.id}/`)
+        }
 
         context = merge(
             context,
@@ -728,7 +744,7 @@ Examples:
   ${program.name()} --preset "${id}"\n${description}
         `
    })}
-   
+
    `)
     program
         .option('--outputDir <path>', `Path to the output directory for the new project`)