feat(BUN-1753): Prerequisites readme (#840)

* brian to main sprint 40 (#829) * fix: change mui date select https://bigc-b2b.atlassian.net/browse/BUN-1688 * feat: changing Password on Frontend Does Not Send Email Notification * fix: remove order number limit https://bigc-b2b.atlassian.net/browse/BUN-1646 * fix: save quote darft https://bigc-b2b.atlassian.net/browse/BUN-1696 * fix: junior hide invioce https://bigc-b2b.atlassian.net/browse/BUN-1690 * fix: shop-all can't load login and register https://bigc-b2b.atlassian.net/browse/BUN-1701 * fix: merge remove quote line conflict --------- Co-authored-by: kris-liu-smile <kris.liu@bundleb2b.net> * feat: sprint 40 issues (#831) * feat: quote remove line https://bigc-b2b.atlassian.net/browse/BUN-1550 * fix: bun-1734 from sprit40 * fix: clear info after login out (#833) * feat(BUN-1753): prereqs index * feat(BUN-1754): Update README.md --------- Co-authored-by: BrianJiang2021 <80307788+BrianJiang2021@users.noreply.github.com> Co-authored-by: kris-liu-smile <kris.liu@bundleb2b.net>
bigcommerce · Nov 16, 2023 · fe3ce1e · fe3ce1e
1 parent 21856ef
commit fe3ce1e
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
-# B2B Buyer Portal
 
 A monorepo frontend application designed for the BigCommerce B2B Edition Buyer portal. It's built using Turborepo, TypeScript, and React.
 
 ## Index
 
+- [Prerequisites](#-prerequisites)
 - [Core Technologies](#-core-technologies)
 - [Workspaces](#-workspaces)
 - [Tools and Libraries](#-tools-and-libraries)
@@ -13,6 +13,23 @@ A monorepo frontend application designed for the BigCommerce B2B Edition Buyer p
 - [Contribution](#-contribution)
 - [Contact & Support](#-contact--support)
 
+## ☑ Prerequisites
+
+Before you begin, ensure you have the BigCommerce B2B Edition App installed. To set up your storefront with B2B capabilities, follow the steps below:
+
+### Step 1: Access the Storefronts Manager
+After installing the B2B Edition App, go to the app's dashboard and select the 'Storefronts' section.
+
+<img width="200" alt="image" src="https://github.com/B3BC/b2b-buyer-portal/assets/140021227/0d733ddb-e59c-4e5a-8801-4a744940d66b">
+
+### Step 2: Enable B2B on Your Channel
+Choose the channel where you wish to enable B2B functionality. Initially, B2B features can be activated on a single channel only.
+
+<img width="480" alt="image" src="https://github.com/B3BC/b2b-buyer-portal/assets/140021227/b425115c-54d9-4382-9371-4e81888eb0af">
+
+### Step 3: Contact Us for Additional Support
+For assistance with activating the remote buyer portal or to inquire about multi-storefront support, which allows you to utilize B2B features across multiple channels, please reach out to our team at b2b@bigcommerce.com, or raise an issue right here in this repository.
+
 ## 🚀 Core Technologies
 
 - **Monorepo Management:** Turborepo
@@ -24,7 +41,6 @@ A monorepo frontend application designed for the BigCommerce B2B Edition Buyer p
 
 - **Application:** `/apps/storefront` - A next-gen B2B Edition storefront application.
   - You can run multiple apps concurrently via turborepo [tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks).
-
 - **Packages:**
   - `/packages/eslint-config-b3` - Shared ESLint configurations.
   - `/packages/tsconfig` - Shared TypeScript configurations.
@@ -45,60 +61,66 @@ A monorepo frontend application designed for the BigCommerce B2B Edition Buyer p
 - **Node:** Ensure you have Node.js version >=18.0.0.
 - **Package Manager:** This project uses Yarn v1.22.17.
 
-## ⚙ Local Development 
+## ⚙ Local Development
 
-1. Installation of Node and Yarn. 
+1. Installation of Node and Yarn.
    - For Node, we recommend using [nvm](https://github.com/nvm-sh/nvm).
    - Once Node is installed, you can install Yarn by using `npm i -g yarn`. If you'd rather use `pnpm`, visit this [guide](https://dev.to/andreychernykh/yarn-npm-to-pnpm-migration-guide-2n04).
 2. Clone the repository.
 3. Install dependencies using `yarn`.
 4. Copy environment variables: `cp apps/storefront/.env-example apps/storefront/.env`.
 5. Update the following values in `.env`:
-  - `VITE_B2B_URL`: The URL of the B2B Edition API.
-  - `VITE_B2B_SOCKET_URL`: The URL of the B2B Edition WebSocket API.
-  - `VITE_TRANSLATION_SERVICE_URL`: The URL of the translation service API.
-  - `VITE_CHANNEL_ID`: The ID of the channel to use for the storefront.
-  - `VITE_STORE_HASH`: The hash of the store to use for the storefront.
-  - `VITE_CATPCHA_SETKEY`: The reCAPTCHA site key (optional).
-  - `VITE_B2B_CLIENT_ID`: The client ID of the BigCommerce App from the [developer portal](https://devtools.bigcommerce.com/).
-  - `VITE_LOCAL_DEBUG`: Set to "FALSE". This is for connecting our local development with the B2B Edition GraphQL API.
+
+- `VITE_B2B_URL`: The URL of the B2B Edition API.
+- `VITE_B2B_SOCKET_URL`: The URL of the B2B Edition WebSocket API.
+- `VITE_TRANSLATION_SERVICE_URL`: The URL of the translation service API.
+- `VITE_CHANNEL_ID`: The ID of the channel to use for the storefront.
+- `VITE_STORE_HASH`: The hash of the store to use for the storefront.
+- `VITE_CATPCHA_SETKEY`: The reCAPTCHA site key (optional).
+- `VITE_B2B_CLIENT_ID`: The client ID of the BigCommerce App from the [developer portal](https://devtools.bigcommerce.com/).
+- `VITE_LOCAL_DEBUG`: Set to "FALSE". This is for connecting our local development with the B2B Edition GraphQL API.
+
 6. Start the development server: `yarn RUN dev`.
 
 ## Running Project Locally
 
 1. Activate store channel in the Channels Manager.
 2. Configure header and footer scripts:
 
-  - Navigate to Channels Manager -> Scripts.
-  - Add two scripts (e.g., B2BEdition-header, B2BEdition-footer). Ensure you set the correct port for your localhost in the script URLs.
-  - Edit the header script:
-
-   ```html 
-   <script>
-       {{#if customer.id}}
-       {{#contains page_type "account"}}
-       var b2bHideBodyStyle = document.createElement('style');
-       b2bHideBodyStyle.id = 'b2b-account-page-hide-body';
-       b2bHideBodyStyle.innerHTML = 'body { display: none !important }';
-       document.head.appendChild(b2bHideBodyStyle);
-       {{/contains}}
-       {{/if}}
-   </script>
-   <script type="module">
-       import RefreshRuntime from "http://localhost:3001/@react-refresh"
-       RefreshRuntime.injectIntoGlobalHook(window)
-       window.$RefreshReg$ = () => {}
-       window.$RefreshSig$ = () => (type) => type
-       window.__vite_plugin_react_preamble_installed__ = true
-   </script>
-   <script type="module" src="http://localhost:3001/@vite/client"></script>
-   <script type="module" src="http://localhost:3001/index.html?html-proxy&index=0.js"></script>
-   ```
-  - Edit the footer script:
-
-   ```html
-   <script type="module" src="http://localhost:3001/src/main.ts"></script>
-   ```
+- Navigate to Channels Manager -> Scripts.
+- Add two scripts (e.g., B2BEdition-header, B2BEdition-footer). Ensure you set the correct port for your localhost in the script URLs.
+- Edit the header script:
+
+```html
+<script>
+  {{#if customer.id}}
+  {{#contains page_type "account"}}
+  var b2bHideBodyStyle = document.createElement('style');
+  b2bHideBodyStyle.id = 'b2b-account-page-hide-body';
+  b2bHideBodyStyle.innerHTML = 'body { display: none !important }';
+  document.head.appendChild(b2bHideBodyStyle);
+  {{/contains}}
+  {{/if}}
+</script>
+<script type="module">
+  import RefreshRuntime from 'http://localhost:3001/@react-refresh'
+  RefreshRuntime.injectIntoGlobalHook(window)
+  window.$RefreshReg$ = () => {}
+  window.$RefreshSig$ = () => (type) => type
+  window.__vite_plugin_react_preamble_installed__ = true
+</script>
+<script type="module" src="http://localhost:3001/@vite/client"></script>
+<script
+  type="module"
+  src="http://localhost:3001/index.html?html-proxy&index=0.js"
+></script>
+```
+
+- Edit the footer script:
+
+```html
+<script type="module" src="http://localhost:3001/src/main.ts"></script>
+```
 
 3. Verify correct values in the .env file, especially the client_id for the draft app.
 

diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
@@ -86,6 +86,7 @@ export default function Login(props: RegisteredProps) {
       salesRepCompanyId = 0,
       isAgenting,
       registerEnabled,
+      customerId,
     },
     dispatch,
   } = useContext(GlobaledContext)
@@ -147,6 +148,8 @@ export default function Login(props: RegisteredProps) {
 
           if (!isLogout) return
 
+          if (!customerId) return
+
           if (isAgenting) {
             await superAdminEndMasquerade(+salesRepCompanyId, +B3UserId)
           }