How to implement a custom challenge on VTEX Store Framework

how-to.md

How to create a custom challenger on VTEX Store Framework

• We have a couple challenges of our own, like ProfileChallenge, but this recipes shows how to create a custom one that you can use anywhere in your store.

1. Create the following interfaces

{
  "b2b-challenge": {
    "component": "Challenge",
    "allowed": ["b2b-challenge-accepted", "b2b-challenge-denied"]
  },
  "b2b-challenge-accepted": {
    "component": "ChildrenRenderer",
    "composition": "children",
    "allowed": "*"
  },
  "b2b-challenge-denied": {
    "component": "ChildrenRenderer",
    "composition": "children",
    "allowed": "*"
  }
}

2. Create the implementations (under react/)

• Challenge.tsx
  • Here you will implement the custom logic (i.e check it the user is logged in)

import React, { useMemo } from 'react'
import { ExtensionPoint } from 'vtex.render-runtime'

const Challenge = () => {
  const isAllowed = useMemo(() => {
    return new Date().getMinutes() % 2 == 0
  }, [])
  return (
    <>
      {isAllowed ? (
        <ExtensionPoint id="b2b-challenge-accepted" />
      ) : (
        <ExtensionPoint id="b2b-challenge-denied" />
      )}
    </>
  )
}

export default Challenge

• ChildRenderer.tsx

import * as React from 'react'

interface Props {
  children: any
}

const ChildrenRenderer: React.FC<Props> = ({ children }) => children

export default ChildrenRenderer

You will need to install the render-runtime app in which app you're adding these files.

3. Use it on your theme

• This examples uses the store-theme

  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "product-name",
      "product-rating-summary",
      "b2b-challenge#price",
      "product-separator",
      "product-identifier.product",
      "sku-selector",
      "product-quantity",
      "product-assembly-options",
      "flex-layout.row#buy-button",
      "availability-subscriber",
      "shipping-simulator",
      "share#default"
    ]
  },
  "b2b-challenge#price":{
    "blocks": ["b2b-challenge-accepted#price", "b2b-challenge-denied#price"]
  },
  "b2b-challenge-denied#price": {
    "children": ["flex-layout.row#buy-button"]
  },
  "b2b-challenge-accepted#price": {
    "children": ["product-price#product-details"]
  },