[WIP] Update Bolt component 3.x to npm package

for-pwa-kit-3.x/.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [
+        "@babel/preset-react",
+        "@babel/preset-env"
+    ]
+}

for-pwa-kit-3.x/.npmignore

@@ -0,0 +1,21 @@
+## the src folder
+src
+.babelrc
+rollup.config.js
+
+## node modules folder
+node_modules
+## incase you have a git repositiory initiated
+.git
+.gitignore
+CVS
+.svn
+.hg
+.lock-wscript
+.wafpickle-N
+.DS_Store
+npm-debug.log
+.npmrc
+
+config.gypi
+package-lock.json

for-pwa-kit-3.x/README.md

@@ -7,33 +7,22 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
 
 ## Get Started
 
-1. Clone this repository to your local, and copy the folder `for-pwa-kit-3.x/bolt` to `your_project_path/app/components`
-
-2. Make sure the properties of `engines` in the `your_project_path/package.json` use correct node version
+1. Install Bolt component package, run the command below from `your_project_path`
     ```sh
-    "engines": {
-        "node": "^18.0.0",
-        "npm": "^9.0.0"
-     },
+    npm install @boltpay/bolt-pwa-kit3.x
     ```
 
-3. Set Up API Access
+2. Update API Access
 
-    (1) Make sure your SLAS Client have the following settings in the `Scopes` field 
+    Add these values to the `Scopes` field of your SLAS Client 
 
     ```sh
-    sfcc.shopper-myaccount.baskets sfcc.shopper-discovery-search sfcc.shopper-myaccount.addresses sfcc.shopper-products sfcc.shopper-myaccount.rw sfcc.shopper-myaccount.paymentinstruments sfcc.custom_objects sfcc.shopper-customers.login sfcc.shopper-myaccount.orders sfcc.shopper-baskets-orders sfcc.shopper-customers.register sfcc.shopper-productlists sfcc.shopper-myaccount.addresses.rw sfcc.shopper-myaccount.productlists.rw sfcc.shopper-promotions sfcc.session_bridge sfcc.shopper-baskets-orders.rw sfcc.shopper-myaccount.paymentinstruments.rw sfcc.shopper-gift-certificates sfcc.shopper-custom_objects sfcc.shopper-product-search sfcc.shopper-myaccount.productlists sfcc.shopper-categories sfcc.shopper-myaccount
+    sfcc.custom_objects sfcc.session_bridge sfcc.shopper-custom_objects
     ```
-
-    (2) Follow [this guide](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/setting-up-api-access.html#update-open-commerce-api-settings) to Update Open Commerce API Settings
-
-4. Complete the configuration files
-
-    When a PWA Kit project is created with the Retail React App template, it comes with a single configuration file: `app/config/default.js`. The configuration objects that it exports are set based on the options provided to pwa-kit-create-app, but you can update your configuration at any time. Updates are often necessary after the initial project generation to stay in sync with changes to B2C Commerce instances.
 
-    (1) Follow [this guide](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/configuration-options.html#api-access) to config API Access
+3. Complete the configuration files
 
-    (2) Update SSR config, locate the file `your_project_path/app/ssr.js` and set HTTP security headers with bolt domain(*.bolt.com and *.bugsnag.com)
+    (1) Update SSR config, locate the file `your_project_path/app/ssr.js` and set HTTP security headers with bolt domain(*.bolt.com and *.bugsnag.com)
 
     ```javascript
       app.use(
@@ -78,21 +67,15 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
         })
       );
     ```
-
-5. Run following command:
-
-    ```sh
-    npm install
-    npm ci
-    ```
 
-6. Enable the Bolt checkout button on the cart page:
+4. Enable the Bolt checkout button on the cart page:
 
     - For the desktop mode, locate the file `your_project_path/app/pages/cart/index.jsx`
-        - Import Bolt component 
-            ```sh
-            import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'
+        - Import Bolt component
+            ```javascript
+            import BoltCheckout from '@boltpay/bolt-pwa-kit3.x/dist/index'
             ```
+
         - Replace original checkout button with the Bolt checkout button
             from 
             ```html
@@ -119,16 +102,27 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
                         basket={basket}
                     />
                     <Box display={{base: 'none', lg: 'block'}}>
-                        <BoltCheckout />
+                        <BoltCheckout basket={basket} navigate={navigate} />
                     </Box>
                 </Stack>
             </GridItem>
             ```
+
     - For the mobile mode, locate the file `your_project_path/app/pages/cart/partials/cart-cta.jsx`
-        - Import Bolt component 
+        - Import Bolt component and necessary modules
             ```sh
-            import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'
+            import BoltCheckout from '@boltpay/bolt-pwa-kit3.x/dist/index'
+            import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+            import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
+            ```
+
+        - Define constant variables within `const CartCta`
+            ```javascript
+            const CartCta = () => {
+                const {data: basket} = useCurrentBasket()
+                const navigate = useNavigation()
             ```
+
         - Replace original checkout button with the Bolt checkout button
             from 
             ```html
@@ -158,7 +152,7 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
             to
             ```html
             <Fragment>
-                <BoltCheckout />
+                <BoltCheckout basket={basket} navigate={navigate} />
                 <Flex justify={'center'}>
                     <VisaIcon height={8} width={10} mr={2} />
                     <MastercardIcon height={8} width={10} mr={2} />
@@ -168,13 +162,21 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
             </Fragment>
             ```
 
-7. Enable the Bolt checkout button on the add-to-cart model of product page:  
+5. Enable the Bolt checkout button on the add-to-cart model of product page:  
 
-    - Locate the file `your_project_path/app/hooks/use-add-to-cart-modal.js`
-        - Import Bolt component 
+    - Locate the file `your_project_path/app/hooks/use-add-to-cart-modal.js`     
+        - Import Bolt component and necessary modules
             ```sh
-            import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'
+            import BoltCheckout from '@boltpay/bolt-pwa-kit3.x/dist/index'
+            import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
+            ```
+
+        - Define constant variables within `const AddToCartModal`
+            ```javascript
+            export const AddToCartModal = () => {
+                const navigate = useNavigation()
             ```
+
         - For the desktop mode, find the element `ModalBody` and replace original checkout button with the Bolt checkout button within its content
             from 
             ```html
@@ -185,7 +187,7 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
                         id: 'add_to_cart_modal.link.view_cart'
                     })}
                 </Button>
-
+            
                 <Button
                     as={Link}
                     to="/checkout"
@@ -210,7 +212,7 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
                     })}
                 </Button>
 
-                <BoltCheckout boltType="pdp" />
+                <BoltCheckout basket={basket} navigate={navigate} boltType="pdp" />
             </Stack>
             ```
         - For the mobile mode, find the element `ModalFooter` and replace original checkout button with the Bolt checkout button within its content
@@ -223,7 +225,7 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
                         id: 'add_to_cart_modal.link.view_cart'
                     })}
                 </Button>
-
+            
                 <Button
                     as={Link}
                     to="/checkout"
@@ -248,11 +250,16 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
                     })}
                 </Button>
 
-                <BoltCheckout boltType="pdp" pos="mobile" />
+                <BoltCheckout
+                    basket={basket}
+                    navigate={navigate}
+                    boltType="pdp"
+                    pos="mobile"
+                />
             </Stack>
             ```
 
-8. Configure backend site setting in Business Manager:
+6. Configure backend site setting in Business Manager:
 
     (1) Go to  Administration > Site Development > Import & Export, upload file `metadata/bolt-meta-import/meta/system-objecttype-extensions.xml` and import it.
 
@@ -262,7 +269,7 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
 
     (4) Go to Merchant Tools > Site Preferences > Custom Site Preference Groups, Click into group <Bolt Payment Setting - Managed Checkout> and add/update the bolt related configurations.
 
-9. Configure OCAPI:
+7. Configure OCAPI:
 
     (1) Navigate to Administration > Site Development > Open Commerce API Settings.
     (2) Navigate to `metadata/ocapi` folder.
@@ -274,7 +281,7 @@ Currently Managed Runtime environment only supports Node.js 18.x, for more infor
     (8) Replace `<<client_id>>` with your client_id.
     (9) Click `Save`.
 
-10. Add SFRA cartridge to your code base:
+8. Add SFRA cartridge to your code base:
 
     (1) Add cartridge `cartridges/int_bolt_pwa` to your project and upload it to the SFCC instance. 
     (2) In SFCC Business Manager, Go to Administration > Sites > Manage Sites, select the site, click on `Setting` Tab, add `int_bolt_pwa` at the beginning of the site path field with separator `:`.

for-pwa-kit-3.x/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    ["@babel/preset-react", { targets: { node: "current" } }], // add this
+  ],
+};