Issues with Initial Setup for B2B Buyer Portal App

[komodoris]

Discussed in #192

^{Originally posted by komodoris December 17, 2024}
Hello,

I have some questions regarding the B2B Buyer Portal app GitHub Repo, we have
configured the pipeline to deploy on Heroku via Bitbucket. The app builds and runs, and I’ve followed the steps outlined in the Headless Guide,%20since%20this%20instance%20will%20only%20be%20used%20for%20headless%20operations) for the initial configuration.

Here are the current issues:

1. GraphQL Errors:
   The GraphQL payload is incomplete, missing store-id and store-hash.
   These are initialized as empty strings in apps/storefront/src/buyerPortal.ts and rely on a DOM element (script[data-storehash][data-channelid]) that I couldn’t locate in the project (nor is it dynamically injected).

Payload Sent:

{
     storefrontScript(
       storeHash: ""
       channelId:
       siteUrl: "https://igt-b2b-dev-aa1b02a2005d.herokuapp.com/"
     ) {
       script
       storeHash
       channelId
     }
   }

Response:

{
       "errors": [
           {
               "message": "Syntax Error: Expected Name, found ':'.",
               "locations": [
                   {
                       "line": 6,
                       "column": 20
                   }
               ]
           }
       ]
   }

2. Build Configuration:
   Modified vite.config.js to include index.html in the build, as it was excluded by default. However, the resulting index.html has some undefined references that may need review, and also added the data attributes for [data-storehash] and [data-channelid] containing my store hash and channel id from the environment, which I'm not sure is the correct approach.
3. Code Cleanup:
   To streamline our development and improve maintainability, we should remove unnecessary components and prioritize a clear configuration process for a headless implementation, which is still confusing, and which parts are only relevant for the non headless setup.

The deployed app can be found here. There you can look into the network tab and requests being made, including the graphql payload and response and other resources.

[bc-victor]

Hello please answer the following queries:

• Please provide the storefront URL where the headless implementation is deployed
• Provide store hash
• If possible, provide access to your headless and buyer portal fork

[senpuukyakuu]

https://igt-microelectronics-sl-b2b-store1.mybigcommerce.com/?ctk=b30568e4-bf85-4cf3-bf13-e4de6847ab44
https://app.igt-microelectronics-sl-b2b-store1.mybigcommerce.com/?ctk=602421e7-6361-473d-b509-7e1d2e7a96b5
vouicrwcsy
We can't give you access to the fork at the moment, but we'll try on Monday
In the meantime, can you give it a look?

[bc-victor]

Please provide the preview code for the storefront. You can send it to my BC email if you dont want it here.

[bc-victor]

This is a stencil store. I need the headless storefront you are building. The one with the GraphQL error.

[senpuukyakuu]

the graphql error is not on the headless store, is on the react implementation of the buyer's portal

[bc-victor]

@senpuukyakuu Ah, you are referring to this app https://igt-b2b-dev-aa1b02a2005d.herokuapp.com/.

Did you know that this app is supposed to be injected in a BC storefront? for it to work? It is a buyer augmented experience so what you deployed only provides the needed scripts for it to work along side your BC storefront.

[BC-EEspinosa]

Hi @senpuukyakuu @komodoris . Victor brought a good point here.

Buyer portal is designed as an application to be injected in a BC storefront and add the B2B Edition features to a given storefront. It means you need first to create a storefront to inject the Buyer Portal.
There are 2 options to make it:

• Stencil: You need to create a BC stencil storefront and then follow this guide to inject the Buyer Portal through a header and footer scripts
• Headless: You need to create a BC headless or catalyst storefront and then follow this guide to inject he Buyer Portal. As the guide mention it will require to include a script in your headless site to define the store_hash and channel id. In other words you need to build your headless site for the storefribt and integrate the Buyer Portal through the headless API.

I took a look in the store you provided. It seems it has 2 BC storefronts , 1 stencil and 1 headless.
B2B Edition is also installed but I recommend you to turn on the B2B Edition multistorefront feature. Because B2B Edition is available by default for the default BC storefront in a given store. Then if you need to turn on B2B Edition features in an additional storefront it will be required to manage it.

Please share if you have any other question and if you can clarify what's the scenario you are working on (stencil or headless)

[senpuukyakuu]

Thanks for the clarification, the B2B is enabled here: https://igt-microelectronics-sl-b2b-store1.mybigcommerce.com/?ctk=c6466279-0bd9-4252-be05-f65ebef1fa13 and both the scripts where added to the script manager.
The problem occurs when locally trying to make the portal work against the BC instance.
Hope it clarifies a bit the situation

[bc-victor]

I see the buyer portal loading, but its our production version (the one we serve to any merchant with B2B Edition)

I do not see a heroku script being retrieved or specified in your markup

If you are trying to use your fork in this Stencil storefront, use the following guide: https://github.com/bigcommerce/b2b-buyer-portal/blob/main/docs/stencil.md

The headless guide is for headless technologies such as next.

[komodoris]

Hello again, Thanks for the feedback, the thing is, as for now, we want to proceed with the initial setup, and by following the guide (headless) . This is what we could’ve achieve with all the instructions, but the graphql call is still failing. Any further guidance and will also be welcome. Enviado desde mi iPhone

…

El 10 ene 2025, a las 20:40, senpuukyakuu ***@***.***> escribió: Thanks for the clarification, the B2B is enabled here: https://igt-microelectronics-sl-b2b-store1.mybigcommerce.com/?ctk=c6466279-0bd9-4252-be05-f65ebef1fa13 and both the scripts where added to the script manager. The problem occurs when locally trying to make the portal work against the BC instance. Hope it clarifies a bit the situation — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[bc-victor]

For local development using that production storefront please read and implement this part of the guide https://github.com/bigcommerce/b2b-buyer-portal/blob/main/docs/stencil.md#running-project-locally

It contains the required scripts that point to your localhost:3001 buyer portal local instance

[komodoris]

Hi @senpuukyakuu @komodoris . Victor brought a good point here.

Buyer portal is designed as an application to be injected in a BC storefront and add the B2B Edition features to a given storefront. It means you need first to create a storefront to inject the Buyer Portal. There are 2 options to make it:

• Stencil: You need to create a BC stencil storefront and then follow this guide to inject the Buyer Portal through a header and footer scripts
• Headless: You need to create a BC headless or catalyst storefront and then follow this guide to inject he Buyer Portal. As the guide mention it will require to include a script in your headless site to define the store_hash and channel id. In other words you need to build your headless site for the storefribt and integrate the Buyer Portal through the headless API.

I took a look in the store you provided. It seems it has 2 BC storefronts , 1 stencil and 1 headless. B2B Edition is also installed but I recommend you to turn on the B2B Edition multistorefront feature. Because B2B Edition is available by default for the default BC storefront in a given store. Then if you need to turn on B2B Edition features in an additional storefront it will be required to manage it.

Please share if you have any other question and if you can clarify what's the scenario you are working on (stencil or headless)

I think we already did that. We're specifically handling the headless scenario.

[komodoris]

For local development using that production storefront please read and implement this part of the guide https://github.com/bigcommerce/b2b-buyer-portal/blob/main/docs/stencil.md#running-project-locally

It contains the required scripts that point to your localhost:3001 buyer portal local instance

The scripts are only adjusted when deployed, when in local, the setup is the same as in the guide.

I assumed our repo was in display here (😥), but the injections were done as recommended and everything put in place. Please give me some time, i'm confirming something about the repo (our), i'll head back to this thread with more details.

[BC-EEspinosa]

I have the impression you are mixing the stencil and headless approach, just please double check.

You can work locally on headless or stencil.
No matter if you are running Buyer Portal locally or not you require:

• For stencil please note scripts are injected through the BC script manager.
• For headless you require to setup the scripts in your headless site project directly.

In the meantime I will go ahead and activate the B2B MSF support for you, it will be helpful to follow the guides.

Quick update: Tried to activate B2B Edition MSF for your store, but it requires to activate first BC Multistorefront support. If there is any chance you can do it please do it, it is highly recommended.

[komodoris]

I have the impression you are mixing the stencil and headless approach, just please double check.

You can work locally on headless or stencil. No matter if you are running Buyer Portal locally or not you require:

• For stencil please note scripts are injected through the BC script manager.
• For headless you require to setup the scripts in your headless site project directly.

In the meantime I will go ahead and activate the B2B MSF support for you, it will be helpful to follow the guides.

Quick update: Tried to activate B2B Edition MSF for your store, but it requires to activate first BC Multistorefront support. If there is any chance you can do it please do it, it is highly recommended.

That's what was done for the headless. Regarding the Multistorefront support we'll also check that, thanks.