{"_id":"@dumega/bolt3.x","name":"@dumega/bolt3.x","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@dumega/bolt3.x","version":"1.0.0","description":"pwa bolt3.x","main":"dist/index.cjs.js","scripts":{"build":"rollup -c"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"dependencies":{"@babel/runtime":"^7.12.5"},"keywords":["react","keywords"],"author":{"name":"dumddga"},"license":"MIT","devDependencies":{"@babel/cli":"^7.23.0","@babel/core":"^7.23.0","@babel/plugin-syntax-jsx":"^7.22.5","@babel/plugin-transform-runtime":"^7.12.10","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-commonjs":"^25.0.5","@rollup/plugin-json":"^6.0.1","@rollup/plugin-node-resolve":"^15.2.2","@rollup/plugin-typescript":"^11.1.4","rollup":"^2.79.1","tslib":"^2.6.2"},"gitHead":"8d66db35ca735c4081823d4a4d78c83f73db7e3d","_id":"@dumega/bolt3.x@1.0.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-cUYrApDLJ7bpmMw+XYaRwj4X0+0D88Whs797BQ75uMh6Wpt4PBmWQREtZz4hK+8dlLbHadht1JICsSC8qv3tpw==","shasum":"7d2d25973255b95456c22c8db51cbb7435692c1f","tarball":"https://registry.npmjs.org/@dumega/bolt3.x/-/bolt3.x-1.0.0.tgz","fileCount":13,"unpackedSize":51089,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDtmtA0dI+ZQAvU9tXKjOxcasIDYkUikdbdDQe9t9++wAiBlJs+tpwPuc8Glqj1TZaK0GOitm5U+HQ/dl27G6KyVZw=="}]},"_npmUser":{"name":"dumega","email":"ningwin@outlook.com"},"directories":{},"maintainers":[{"name":"dumega","email":"ningwin@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bolt3.x_1.0.0_1696687058555_0.9110300869945624"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-07T13:57:38.473Z","1.0.0":"2023-10-07T13:57:38.761Z","modified":"2023-10-07T13:57:39.077Z"},"maintainers":[{"name":"dumega","email":"ningwin@outlook.com"}],"description":"pwa bolt3.x","keywords":["react","keywords"],"author":{"name":"dumddga"},"license":"MIT","readme":"## Requirements\n\n-   Node 18.x\n-   npm 9.x\n\nCurrently Managed Runtime environment only supports Node.js 18.x, for more information, please see https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/upgrade-node-version.html\n\n## Get Started\n\n1. Clone this repository to your local, and copy the folder `for-pwa-kit-3.x/bolt` to `your_project_path/app/components`\n\n2. Make sure the properties of `engines` in the `your_project_path/package.json` use correct node version\n    ```sh\n    \"engines\": {\n        \"node\": \"^18.0.0\",\n        \"npm\": \"^9.0.0\"\n     },\n    ```\n\n3. Set Up API Access\n\n    (1) Make sure your SLAS Client have the following settings in the `Scopes` field \n\n    ```sh\n    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\n    ```\n    \n    (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\n\n4. Complete the configuration files\n\n    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.\n\n    (1) Follow [this guide](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/configuration-options.html#api-access) to config API Access\n\n    (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)\n\n    ```javascript\n      app.use(\n        helmet({\n          contentSecurityPolicy: {\n            useDefaults: true,\n            directives: {\n              \"img-src\": [\n                \"'self'\",\n                \"*.commercecloud.salesforce.com\",\n                \"*.bolt.com\",\n                \"data:\",\n              ],\n              \"script-src\": [\n                \"'self'\",\n                \"'unsafe-eval'\",\n                \"storage.googleapis.com\",\n                \"*.bolt.com\",\n                \"*.bugsnag.com\",\n              ],\n              \"connect-src\": [\n                \"'self'\",\n                \"api.cquotient.com\",\n                \"*.bolt.com\",\n                \"*.bugsnag.com\",\n              ],\n              \"frame-src\": [\n                \"'self'\",\n                \"*.bolt.com\",\n                \"*.bugsnag.com\",\n              ],\n              \"object-src\": [\n                \"'self'\",\n                \"*.bolt.com\",\n                \"*.bugsnag.com\",\n              ],\n              // Do not upgrade insecure requests for local development\n              \"upgrade-insecure-requests\": isRemote() ? [] : null,\n            },\n          },\n          hsts: isRemote(),\n        })\n      );\n    ```\n    \n5. Run following command:\n\n    ```sh\n    npm install\n    npm ci\n    ```\n\n6. Enable the Bolt checkout button on the cart page:\n\n    - For the desktop mode, locate the file `your_project_path/app/pages/cart/index.jsx`\n        - Import Bolt component \n            ```sh\n            import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'\n            ```\n        - Replace original checkout button with the Bolt checkout button\n            from \n            ```html\n            <GridItem>\n                <Stack spacing={4}>\n                    <OrderSummary\n                        htmlowPromoCodeForm={true}\n                        isEstimate={true}\n                        basket={basket}\n                    />\n                    <Box display={{base: 'none', lg: 'block'}}>\n                        <CartCta />\n                    </Box>\n                </Stack>\n            </GridItem>\n            ```\n            to\n            ```html\n            <GridItem>\n                <Stack spacing={4}>\n                    <OrderSummary\n                        showPromoCodeForm={true}\n                        isEstimate={true}\n                        basket={basket}\n                    />\n                    <Box display={{base: 'none', lg: 'block'}}>\n                        <BoltCheckout />\n                    </Box>\n                </Stack>\n            </GridItem>\n            ```\n    - For the mobile mode, locate the file `your_project_path/app/pages/cart/partials/cart-cta.jsx`\n        - Import Bolt component \n            ```sh\n            import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'\n            ```\n        - Replace original checkout button with the Bolt checkout button\n            from \n            ```html\n            <Fragment>\n                <Button\n                    as={Link}\n                    to=\"/checkout\"\n                    width={['95%', '95%', '95%', '100%']}\n                    marginTop={[6, 6, 2, 2]}\n                    mb={4}\n                    rightIcon={<LockIcon />}\n                    variant=\"solid\"\n                >\n                    <FormattedMessage\n                        defaultMessage=\"Proceed to Checkout\"\n                        id=\"cart_cta.link.checkout\"\n                    />\n                </Button>\n                <Flex justify={'center'}>\n                    <VisaIcon height={8} width={10} mr={2} />\n                    <MastercardIcon height={8} width={10} mr={2} />\n                    <AmexIcon height={8} width={10} mr={2} />\n                    <DiscoverIcon height={8} width={10} mr={2} />\n                </Flex>\n            </Fragment>\n            ```\n            to\n            ```html\n            <Fragment>\n                <BoltCheckout />\n                <Flex justify={'center'}>\n                    <VisaIcon height={8} width={10} mr={2} />\n                    <MastercardIcon height={8} width={10} mr={2} />\n                    <AmexIcon height={8} width={10} mr={2} />\n                    <DiscoverIcon height={8} width={10} mr={2} />\n                </Flex>\n            </Fragment>\n            ```\n\n7. Enable the Bolt checkout button on the add-to-cart model of product page:  \n\n    - Locate the file `your_project_path/app/hooks/use-add-to-cart-modal.js`\n        - Import Bolt component \n            ```sh\n            import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'\n            ```\n        - For the desktop mode, find the element `ModalBody` and replace original checkout button with the Bolt checkout button within its content\n            from \n            ```html\n            <Stack spacing=\"4\">\n                <Button as={Link} to=\"/cart\" width=\"100%\" variant=\"solid\">\n                    {intl.formatMessage({\n                        defaultMessage: 'View Cart',\n                        id: 'add_to_cart_modal.link.view_cart'\n                    })}\n                </Button>\n\n                <Button\n                    as={Link}\n                    to=\"/checkout\"\n                    width=\"100%\"\n                    variant=\"outline\"\n                    rightIcon={<LockIcon />}\n                >\n                    {intl.formatMessage({\n                        defaultMessage: 'Proceed to Checkout',\n                        id: 'add_to_cart_modal.link.checkout'\n                    })}\n                </Button>\n            </Stack>\n            ```\n            to\n            ```html\n            <Stack spacing=\"4\">\n                <Button as={Link} to=\"/cart\" width=\"100%\" variant=\"solid\">\n                    {intl.formatMessage({\n                        defaultMessage: 'View Cart',\n                        id: 'add_to_cart_modal.link.view_cart'\n                    })}\n                </Button>\n\n                <BoltCheckout boltType=\"pdp\" />\n            </Stack>\n            ```\n        - For the mobile mode, find the element `ModalFooter` and replace original checkout button with the Bolt checkout button within its content\n            from \n            ```html\n            <Stack spacing=\"4\">\n                <Button as={Link} to=\"/cart\" width=\"100%\" variant=\"solid\">\n                    {intl.formatMessage({\n                        defaultMessage: 'View Cart',\n                        id: 'add_to_cart_modal.link.view_cart'\n                    })}\n                </Button>\n\n                <Button\n                    as={Link}\n                    to=\"/checkout\"\n                    width=\"100%\"\n                    variant=\"outline\"\n                    rightIcon={<LockIcon />}\n                >\n                    {intl.formatMessage({\n                        defaultMessage: 'Proceed to Checkout',\n                        id: 'add_to_cart_modal.link.checkout'\n                    })}\n                </Button>\n            </Stack>\n            ```\n            to\n            ```html\n            <Stack spacing=\"4\">\n                <Button as={Link} to=\"/cart\" width=\"100%\" variant=\"solid\">\n                    {intl.formatMessage({\n                        defaultMessage: 'View Cart',\n                        id: 'add_to_cart_modal.link.view_cart'\n                    })}\n                </Button>\n\n                <BoltCheckout boltType=\"pdp\" pos=\"mobile\" />\n            </Stack>\n            ```\n\n8. Configure backend site setting in Business Manager:\n\n    (1) Go to  Administration > Site Development > Import & Export, upload file `metadata/bolt-meta-import/meta/system-objecttype-extensions.xml` and import it.\n\n    (2) Go to Merchant Tools > Ordering > Payment Processors, create a new Processor with ID `BOLT_PAY`.\n\n    (3) Go to  Merchant Tools > Ordering > Import & Export, upload file `metadata/bolt-meta-import/sites/RefArch/payment-methods.xml` and import it.\n\n    (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.\n\n9. Configure OCAPI:\n\n    (1) Navigate to Administration > Site Development > Open Commerce API Settings.\n    (2) Navigate to `metadata/ocapi` folder.\n    (3) Copy the contents of `OCAPIshop.json` within Shop Type > Open Commerce API Settings.\n    (4) Replace `<<client_id>>` with your client_id.\n    (5) Click `Save`.\n    (6) Copy the content of `OCAPIdata.json` within Data Type > Open Commerce API Settings.\n    (7) Select \"Global (organization-wide)\" from the Context Selection dropdown.\n    (8) Replace `<<client_id>>` with your client_id.\n    (9) Click `Save`.\n\n10. Add SFRA cartridge to your code base:\n\n    (1) Add cartridge `cartridges/int_bolt_pwa` to your project and upload it to the SFCC instance. \n    (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 `:`.","readmeFilename":"README.md"}