Add CustomContext prop in page wrappers

[klzns]

What problem is this solving?

Make it possible to create custom global context in pages.

How to use?

Step 1: Create a React component that accepts children.

1. Create a React component in the root directory of the react folder
   Example:

/* MyCustomContext.js */
import React from 'react'

import MyContext from './modules/MyContext'

function MyCustomContext({ children }) {
  return <MyContext.Provider value={123}>{children}</MyContext.Provider>
}

export default MyCustomContext

2. Create an interface for it in the store/interfaces.json file.
   Example:

{
  "my-custom-context": {
    "component": "MyCustomContext",
    "composition": "children"
  }
}

Step 2: Use this new block as a slot of a page wrapper

There are 3 page wrappers available:

Wrapper	Pages available	Contexts available
storeWrapper	All pages	useOrderForm, useOrderItems
productWrapper	Product pages	useOrderForm, useOrderItems, and useProduct
searchWrapper	Search pages	useOrderForm, useOrderItems, useSearchPage, useSearchPageState, and useSearchPageStateDispatch.

Example of usage:

1. Simple usage:

 {
   "store.product": {
     "children": [
       // PDP blocks
       // ...
     ]
   },
+  "productWrapper": {
+    "props": {
+      "CustomContext": "my-custom-context"
+    }
+  }
 }

2. Varying context based on page

You can use the parent feature to change the block based on page. That's similar to the solution of a custom header described here: https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-customizing-the-header-and-footer-blocks-by-page

 {
   "store.home": {
+    "parent": {
+      "storeWrapper": "storeWrapper#home"
+    },
     "children": [
       // Home blocks
       // ...
     ]
   },
+  "storeWrapper#home": {
+    "props": {
+      "CustomContext": "my-custom-context"
+    }
+  }
 }

 {
   "store.product": {
+   "parent": {
+      "storeWrapper": "storeWrapper#product"
+    },
     "children": [
       // PDP blocks
       // ...
     ]
   },
+  "storeWrapper#product": {
+    "props": {
+      "CustomContext": "my-custom-context"
+    }
+  }
 }

3. Using more than one page wrapper

 {
   "store.product": {
     "children": [
       // PDP blocks
       // ...
     ]
   },
+  "storeWrapper": {
+    "props": {
+      "CustomContext": "my-custom-context"
+    }
+  },
+  "productWrapper": {
+    "props": {
+      "CustomContext": "my-custom-context"
+    }
+  }
 }

4. You can mix it all together

Why not? 🤷

 {
   "store.product": {
+    "parent": {
+      "storeWrapper": "storeWrapper#custompdpcontext",
+      "productWrapper": "productWrapper#custompdpcontext"
+    },
     "children": [
       // PDP blocks
       // ...
     ]
   },
+  "storeWrapper#custompdpcontext": {
+    "props": {
+      "CustomContext": "my-custom-context"
+    }
+  },
+  "productWrapper#custompdpcontext": {
+    "props": {
+      "CustomContext": "my-custom-context"
+    }
+  }
 }

Remember that my-custom-context is a normal block, so you can also pass props to it.

Example:

 {
   "store.product": {
     "children": [
       // PDP blocks
       // ...
     ]
   },
   "productWrapper": {
     "props": {
       "CustomContext": "my-custom-context"
     }
   },
+  "my-custom-context": {
+    "props": {
+      "exampleProp": "abc"
+    }
+  }
 }

How to test it?

https://context--storecomponents.myvtex.com/blouse-with-knot/p?skuId=2000544

Screenshots or example usage:

Describe alternatives you've considered, if any.

Related to / Depends on

Depends on vtex-apps/render-runtime#601

How does this PR make you feel? 🔗

[vtex-io-ci-cd]

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

• Patch (backwards-compatible bug fixes)

• Minor (backwards-compatible functionality)

• Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• No thanks, I would rather do it manually 😞

[vtex-io-docs-bot]

Beep boop 🤖

I noticed you didn't make any changes at the docs/ folder

• There's nothing new to document 🤔
• I'll do it later 😞

In order to keep track, I'll create an issue if you decide now is not a good time

• I just updated 🎉🎉

[icazevedo]

LGTM

[gustavopvasconcellos]

👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 👏 <3

[vtex-io-docs-bot]

Beep boop 🤖 That's ok, I created an issue for this so we don't forget

[vtex-io-ci-cd]

Your PR has been merged! App is being published. 🚀
Version 2.110.1 → 2.111.0

After the publishing process has been completed (check #vtex-io-releases) and doing A/B tests with the new version, you can deploy your release by running:

vtex deploy vtex.store@2.111.0

After that your app will be updated on all accounts.

For more information on the deployment process check the docs. 📖

[azabraao]

Works like a charm guys! Thanks a lot for making it! 🎉