[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/home/deals.json from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#deals": {
    "children": [
      "flex-layout.col#deals1",
      "flex-layout.col#deals2",
      "flex-layout.col#deals3",
      "flex-layout.col#deals4"
    ],
    "props": {
      "blockClass": "deals"
    }
  },

  "flex-layout.col#deals1": {
    "children": [
      "image#deal1",
      "rich-text#deal1"
    ]
  },
  "image#deal1": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal1": {
    "props": {
      "text": "Free shipping",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals2": {
    "children": [
      "image#deal2",
      "rich-text#deal2"
    ]
  },
  "image#deal2": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/delivery-fast.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal2": {
    "props": {
      "text": "One day delivery",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals3": {
    "children": [
      "image#deal3",
      "rich-text#deal3"
    ]
  },
  "image#deal3": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/store.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal3": {
    "props": {
      "text": "Pick up in store",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals4": {
    "children": [
      "image#deal4",
      "rich-text#deal4"
    ]
  },
  "image#deal4": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/coupon.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal4": {
    "props": {
      "text": "Exclusive deals",
      "blockClass": "deals"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/footer/footer.json from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-1-desktop",
      "flex-layout.row#footer-2-desktop",
      "flex-layout.row#footer-3-desktop"
    ]
  },
  "flex-layout.row#footer-1-desktop": {
    "children": [
      "vtex.menu@2.x:menu#Products",
      "vtex.menu@2.x:menu#footer-clothing",
      "vtex.menu@2.x:menu#footer-decoration",
      "vtex.menu@2.x:menu#footer-bags",
      "footer-spacer",
      "social-networks"
    ],
    "props": {
      "blockClass": "menu-row",
      "paddingTop": 6,
      "paddingBottom": 3
    }
  },

  "social-networks": {
    "props": {
      "socialNetworks": [
        {
          "name": "Facebook",
          "url": "https://www.facebook.com/vtexonline/"
        },
        {
          "name": "Instagram",
          "url": "https://www.instagram.com/vtextruecloud/"
        },
        {
          "name": "Twitter",
          "url": "https://twitter.com/vtexonline"
        },
        {
          "name": "Youtube",
          "url": "https://www.youtube.com/user/VTEXTV"
        }
      ]
    }
  },

  "flex-layout.row#footer-2-desktop": {
    "children": ["accepted-payment-methods"],
    "props": {
      "blockClass": "payment-methods"
    }
  },
  "accepted-payment-methods": {
    "props": {
      "paymentMethods": ["MasterCard", "Visa", "Diners Club"]
    }
  },

  "flex-layout.row#footer-3-desktop": {
    "children": ["rich-text#footer"],
    "props": {
      "blockClass": "credits"
    }
  },
  "rich-text#footer": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  },

  "footer-layout.mobile": {
    "children": [
      "flex-layout.row#1-footer-mobile",
      "flex-layout.row#2-footer-mobile"
    ]
  },
  "flex-layout.row#2-footer-mobile": {
    "children": ["flex-layout.col#footer-1-mobile"],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4
    }
  },
  "flex-layout.col#footer-1-mobile": {
    "children": [
      "accepted-payment-methods",
      "social-networks",
      "rich-text#footer-mobile"
    ],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4,
      "rowGap": 4
    }
  },
  "flex-layout.row#1-footer-mobile": {
    "props": {
      "paddingTop": 4,
      "paddingBottom": 4
    },
    "children": ["vtex.menu@2.x:menu#footer-mobile"]
  },
  "rich-text#footer-mobile": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/footer/menu.json from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#Products": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#news",
      "menu-item#blackfriday",
      "menu-item#sale",
      "menu-item#personalization"
    ]
  },
  "menu-item#news": {
    "props": {
      "id": "menu-item-news",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "News",
        "text": "News"
      }
    }
  },
  "menu-item#blackfriday": {
    "props": {
      "id": "menu-item-black-friday",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "BlackFriday",
        "text": "Black Friday"
      }
    }
  },
  "menu-item#sale": {
    "props": {
      "id": "menu-item-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Sale",
        "text": "Sale"
      }
    }
  },
  "menu-item#personalization": {
    "props": {
      "id": "menu-item-personalization",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Personalization",
        "text": "Personalization"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-decoration": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#smartphones": {
    "props": {
      "id": "menu-item-smartphones",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/smartphones",
        "noFollow": true,
        "tagTitle": "Smartphones",
        "text": "Smartphones"
      }
    }
  },

  "menu-item#videogames": {
    "props": {
      "id": "menu-item-videogames",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/videogames",
        "noFollow": true,
        "tagTitle": "Videogames",
        "text": "Videogames"
      }
    }
  },

  "menu-item#tvs": {
    "props": {
      "id": "menu-item-tvs",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/tvs",
        "noFollow": true,
        "tagTitle": "TVs",
        "text": "TVs"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-bags": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#bags",
      "menu-item#backpacks",
      "menu-item#necessaire"
    ]
  },

  "menu-item#bags": {
    "props": {
      "id": "menu-item-bags",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/d",
        "noFollow": true,
        "tagTitle": "Bags",
        "text": "Bags"
      }
    }
  },

  "menu-item#backpacks": {
    "props": {
      "id": "menu-item-backpacks",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/backpacks",
        "noFollow": true,
        "tagTitle": "Backpacks",
        "text": "Backpacks"
      }
    }
  },

  "menu-item#necessaire": {
    "props": {
      "id": "menu-item-necessaire",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/necessaire",
        "noFollow": true,
        "tagTitle": "Necessaire",
        "text": "Necessaire"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-clothing": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#clothing",
      "menu-item#shorts",
      "menu-item#tank-tops",
      "menu-item#shirts",
      "menu-item#sweatshirt",
      "menu-item#cropped"
    ]
  },

  "vtex.menu@2.x:menu#footer-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#clothing-mobile",
      "menu-item#decoration-mobile",
      "menu-item#sale-mobile"
    ]
  },

  "menu-item#clothing-mobile": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/d",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"]
  },
  "vtex.menu@2.x:submenu.accordion#clothing": {
    "children": ["vtex.menu@2.x:menu#clothing-accordion"]
  },

  "vtex.menu@2.x:menu#clothing-accordion": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#shorts",
      "menu-item#tank-tops",
      "menu-item#shirts",
      "menu-item#sweatshirt",
      "menu-item#cropped"
    ]
  },

  "menu-item#decoration-mobile": {
    "props": {
      "itemProps": {
        "tagTitle": "Decoration",
        "text": "Decoration"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"]
  },
  "vtex.menu@2.x:submenu.accordion#decoration": {
    "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"]
  },

  "vtex.menu@2.x:menu#footer-decoration-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#sale-mobile": {
    "props": {
      "itemProps": {
        "tagTitle": "Sale",
        "text": "Sale"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#sale"]
  },
  "vtex.menu@2.x:submenu.accordion#sale": {
    "children": ["vtex.menu@2.x:menu#footer-sale-mobile"]
  },

  "vtex.menu@2.x:menu#footer-sale-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#clothing": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/d",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    }
  },

  "menu-item#shorts": {
    "props": {
      "id": "menu-item-shorts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/shorts",
        "noFollow": false,
        "tagTitle": "Shorts",
        "text": "Shorts"
      }
    }
  },

  "menu-item#tank-tops": {
    "props": {
      "id": "menu-item-tank-tops",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/tank-tops",
        "noFollow": false,
        "tagTitle": "Tank tops",
        "text": "Tank tops"
      }
    }
  },

  "menu-item#shirts": {
    "props": {
      "id": "menu-item-shirts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/shirts",
        "noFollow": false,
        "tagTitle": "Shirts",
        "text": "Shirts"
      }
    }
  },

  "menu-item#sweatshirt": {
    "props": {
      "id": "menu-item-sweat-shirts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/sweatshirt",
        "noFollow": false,
        "tagTitle": "Sweatshirt",
        "text": "Sweatshirt"
      }
    }
  },

  "menu-item#cropped": {
    "props": {
      "id": "menu-item-cropped",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/cropped",
        "noFollow": false,
        "tagTitle": "Cropped",
        "text": "Cropped"
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/product-summary/product-summary.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-summary.shelf": {
    "children": [
      "stack-layout#prodsum",
      "product-summary-name",
      "flex-layout.col#productRating",
      "product-summary-space",
      "product-list-price#summary",
      "flex-layout.row#selling-price-savings",
      "product-teaser.summary.affirm",
      "product-installments#summary",
      "add-to-cart-button"
    ]
  },
  "flex-layout.col#productRating": {
    "props": {
      "blockClass": "productRating"
    },
    "children": ["product-rating-inline"]
  },

  "stack-layout#prodsum": {
    "children": [
      "product-summary-image#shelf",
      "vtex.product-highlights@2.x:product-highlights#collection",
      "modal-trigger#quickview" // Check quickview.jsonc
    ]
  },

  "product-summary-image#shelf": {
    "props": {
      "showBadge": false,
      "aspectRatio": "1:1",
      "maxHeight": 300
    }
  },

  "vtex.product-highlights@2.x:product-highlights#collection": {
    "props": {
      "type": "collection"
    },
    "children": ["product-highlight-wrapper"]
  },
  "product-highlight-wrapper": {
    "props": {
      "blockClass": "collection"
    },
    "children": ["product-highlight-text"]
  },
  "product-highlight-text": {
    "props": {
      "message": "{highlightName}"
    }
  },

  "product-list-price#summary": {
    "props": {
      "blockClass": "summary"
    }
  },
  "flex-layout.row#selling-price-savings": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 4
    },
    "children": [
      "product-selling-price#summary",
      "product-price-savings#summary"
    ]
  },
  "product-installments#summary": {
    "props": {
      "blockClass": "summary"
    }
  },
  "product-selling-price#summary": {
    "props": {
      "blockClass": "summary"
    }
  },
  "product-price-savings#summary": {
    "props": {
      "markers": [
        "discount"
      ],
      "blockClass": "summary"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/product-summary/quickview.json from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "modal-trigger#quickview": {
    "children": [
      "icon-expand",
      "modal-layout#quickview"
    ],
    "props": {
      "blockClass": "quickview"
    }
  },

  "modal-layout#quickview": {
    "children": [
      "modal-header#quickview",
      "flex-layout.row#quickview-main-row"
    ],
    "props": {
      "blockClass": "quickview"
    }
  },
  "modal-header#quickview": {
    "props": {
      "blockClass": "quickview"
    }
  },

  "modal-content#quickview": {
    "children": [
      "vtex.store-components:product-name",
      "flex-layout.col#quickviewPrice",
      "product-summary-sku-selector#quickview"
    ],
    "props": {
      "blockClass": "quickviewContent"
    }
  },
  "flex-layout.col#quickviewPrice": {
    "children": [
      "flex-layout.row#list-price-savings",
      "flex-layout.row#selling-price",
      "product-installments"
    ]
  },
  "modal-actions#quickview": {
    "props": {
      "blockClass": "quickview"
    },
    "children": [
      "flex-layout.row#quickview-actions-1",
      "flex-layout.row#quickview-actions-2"
    ]
  },
  "flex-layout.row#quickview-actions-1": {
    "children": [
      "flex-layout.col#quickview-product-quantity",
      "flex-layout.col#quickview-add-to-card-button"
    ],
    "props": {
      "colSizing": "auto",
      "colGap": 6,
      "blockClass": "addToCartRow"
    }
  },

  "flex-layout.col#quickview-product-quantity": {
    "children": [
      "product-summary-quantity#quickview"
    ]
  },
  "product-summary-quantity#quickview": {
    "props": {
      "showLabel": false,
      "size": "regular"
    }
  },
  "flex-layout.col#quickview-add-to-card-button": {
    "children": [
      "add-to-cart-button"
    ],
    "props": {
      "width": "grow"
    }
  },

  "flex-layout.row#quickview-actions-2": {
    "children": [
      "link.product#button-pdp"
    ]
  },
  "link.product#button-pdp": {
    "props": {
      "buttonProps": {
        "variant": "secondary"
      },
      "displayMode": "button",
      "label": "View details",
      "href": "/{slug}/p"
    }
  },
  "flex-layout.row#quickview-main-row": {
    "children": [
      "flex-layout.col#quickview-images",
      "flex-layout.col#quickview-product-details"
    ],
    "props": {
      "blockClass": "quickviewMainRow"
    }
  },
  "flex-layout.col#quickview-images": {
    "children": [
      "product-images#quickview"
    ]
  },
  "flex-layout.col#quickview-product-details": {
    "children": [
      "modal-content#quickview",
      "modal-actions#quickview"
    ],
    "props": {
      "preventVerticalStretch": true,
      "blockClass": "quickviewDetails"
    }
  },
  "product-summary-sku-selector#quickview": {
    "props": {
      "thumbnailImage": "skuvariation",
      "imageHeight": 28,
      "blockClass": "quickview",
      "visibility": "more-than-one"
    }
  },
  "vtex.store-components:product-name": {
    "props": {
      "blockClass": "quickview"
    }
  },
  "product-images#quickview" : {
    "props": {
      "blockClass": "quickview",
      "showNavigationArrows": true
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/product-summary/product-summary-list.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-summary.shelf#listLayout": {
    "props": {
      "blockClass": "listLayout"
    },
    "children": [
      "responsive-layout.desktop#productSummaryList",
      "responsive-layout.mobile#productSummaryList"
    ]
  },
  "responsive-layout.desktop#productSummaryList": {
    "children": [
      "flex-layout.row#summaryListDesktop"
    ]
  },
  "responsive-layout.mobile#productSummaryList": {
    "children": [
      "flex-layout.row#summaryListMobile"
    ]
  },
  "product-price-savings#summaryPercentage": {
    "props": {
      "message": "{savingsPercentage}",
      "blockClass": "summaryPercentage"
    }
  },
  "flex-layout.row#savingsSummaryListDesktop": {
    "props": {
      "colSizing": "auto",
      "colGap": 3,
      "blockClass": "savingsSummaryListDesktop"
    },
    "children": [
      "product-price-savings#summaryPercentage",
      "product-price-savings#summary"
    ]
  },
  "flex-layout.row#summaryListDesktop": {
    "props":{
      "fullWidth": true,
      "colSizing": "auto",
      "blockClass": "summaryListDesktop"
    },
    "children": [
      "flex-layout.row#summaryLeftListDesktop",
      "flex-layout.col#summaryRightListDesktop"
    ]
  },
  "flex-layout.row#summaryLeftListDesktop": {
    "props": {
      "blockClass": "summaryLeftListDesktop",
      "colSizing": "auto",
      "colGap": 7
    },
    "children": [
      "stack-layout#summaryListDesktop",
      "flex-layout.col#summaryDetailsListDesktop"
    ]
  },
  "flex-layout.col#summaryDetailsListDesktop": {
    "props": {
      "preventVerticalStretch": true
    },
    "children": [
      "vtex.store-components:product-brand#summaryListDesktop",
      "product-summary-name#summaryListDesktop",
      "flex-layout.col#productRating",
      "flex-layout.row#productSpecifications"
    ]
  },
  "flex-layout.row#productSpecifications": {
    "children": [
      "product-specification-group#summary"
    ]
  },
  "product-summary-name#summaryListDesktop": {
    "props": {
      "blockClass": "summaryListDesktop"
    }
  },
  "vtex.store-components:product-brand#summaryListDesktop": {
    "props": {
      "displayMode": "text",
      "blockClass": "summaryListDesktop"
    }
  },
  "flex-layout.col#summaryRightListDesktop": {
    "props": {
      "blockClass": "summaryRightListDesktop",
      "preventVerticalStretch": true
    },
    "children": [
      "flex-layout.row#savingsSummaryListDesktop",
      "flex-layout.col#priceSummaryListDesktop",
      "flex-layout.row#buyButtonsSummaryListDesktop"
    ]
  },
  "flex-layout.row#buyButtonsSummaryListDesktop": {
    "props": {
      "colSizing": "auto",
      "colGap": 5
    },
    "children": [
      "add-to-cart-button",
      "flex-layout.row#buyNowButton"
    ]
  },
  "flex-layout.row#buyNowButton": {
    "props": {
      "blockClass": "buyNowButton"
    },
    "children": [
      "add-to-cart-button#buyNow"
    ]
  },

  "add-to-cart-button#buyNow": {
    "props": {
      "text": "BUY NOW",
      "isOneClickBuy": true,
      "onClickEventPropagation": "enabled",
      "blockClass": "buyNow"
    }
  },
  "flex-layout.col#priceSummaryListDesktop": {
    "children": [
      "product-selling-price#summary",
      "product-list-price#summary"
    ]
  },
  "stack-layout#summaryListDesktop": {
    "children": [
      "product-summary-image#summaryListDesktop",
      "vtex.product-highlights@2.x:product-highlights#collection",
      "modal-trigger#quickview" // Check quickview.jsonc
    ]
  },
  "product-summary-image#summaryListDesktop": {
    "props": {
      "showBadge": false,
      "aspectRatio": "1:1",
      "maxHeight": 180,
      "blockClass": "summaryListDesktop"
    }
  },
  "flex-layout.row#summaryListMobile": {
    "props":{
      "preserveLayoutOnMobile": true,
      "colSizing": "auto",
      "blockClass": "summaryListMobile",
      "colGap": 5
    },
    "children": [
      "stack-layout#summaryListMobile",
      "flex-layout.col#summaryDetailsListMobile"
    ]
  },
  "stack-layout#summaryListMobile": {
    "children": [
      "product-summary-image#summaryListMobile",
      "vtex.product-highlights@2.x:product-highlights#collection",
      "modal-trigger#quickview" // Check quickview.jsonc
    ]
  },
  "product-summary-image#summaryListMobile": {
    "props": {
      "showBadge": false,
      "aspectRatio": "1:1",
      "maxHeight": 220,
      "blockClass": "summaryListMobile"
    }
  },
  "flex-layout.col#summaryDetailsListMobile": {
    "props": {
      "preventVerticalStretch": true,
      "width": "grow",
      "blockClass": "summaryDetailsListMobile"
    },
    "children": [
      "flex-layout.col#summaryUpDetailsListMobile",
      "flex-layout.col#summaryDownDetailsListMobile"
    ]
  },
  "flex-layout.col#summaryUpDetailsListMobile": {
    "props": {
      "preventVerticalStretch": true,
      "blockClass": "summaryUpDetailsListMobile"
    },
    "children": [
      "vtex.store-components:product-brand#summaryListMobile",
      "product-summary-name#summaryListMobile",
      "product-rating-inline"
    ]
  },
  "flex-layout.col#summaryDownDetailsListMobile": {
    "props": {
      "preventVerticalStretch": true
    },
    "children": [
      "product-selling-price#summary",
      "product-installments#summary"
    ]
  },
  "vtex.store-components:product-brand#summaryListMobile": {
    "props": {
      "displayMode": "text",
      "blockClass": "summaryListMobile"
    }
  },
  "product-summary-name#summaryListMobile": {
    "props": {
      "tag": "div",
      "blockClass": "summaryListMobile"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/product-summary/product-specification-list.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-specification-group#summary": {
    "children": [
      "product-specification#summary"
    ]
  },
  "product-specification#summary": {
    "children": [
      "flex-layout.row#summarySpecificationValues"
    ]
  },
  "flex-layout.row#summarySpecificationValues": {
    "props": {
      "preventHorizontalStretch": true,
      "colGap": 3
    },
    "children": [
      "rich-text#summarySpecificationBullet",
      "product-specification-values"
    ]
  },
  "rich-text#summarySpecificationBullet": {
    "props": {
      "text": "•",
      "textColor": "c-action-primary",
      "blockClass": "summarySpecificationBullet"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/pdp/product-assembly.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "sticky-layout#buy-button": {
    "props": {
      "position": "bottom"
    },
    "children": ["flex-layout.row#buy-button"]
  },
  "product-assembly-options": {
    "children": [
      "flex-layout.row#product-assembly-options",
      "assembly-option-input-values"
    ]
  },
  "assembly-option-input-values": {
    "props": {
      "optionsDisplay": "box"
    }
  },
  "flex-layout.row#product-assembly-options": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto"
    },
    "children": [
      "flex-layout.col#product-assembly-image",
      "flex-layout.col#product-assembly-middle",
      "flex-layout.col#product-assembly-quantity"
    ]
  },
  "flex-layout.col#product-assembly-quantity": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": [
      "assembly-option-item-quantity-selector"
    ]
  },
  "flex-layout.col#product-assembly-image": {
    "props": {
      "marginRight": 4
    },
    "children": [
      "assembly-option-item-image"
    ]
  },
  "flex-layout.col#product-assembly-middle": {
    "props": {
      "width": "grow",
      "verticalAlignment": "middle"
    },
    "children": [
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-children-description",
      "assembly-option-item-customize#first-level"
    ]
  },
  "assembly-option-item-customize#first-level": {
    "props": {
      "buttonProps": {
        "collapse": "left"
      }
    },
    "children": [
      "flex-layout.row#item-customize",
      "assembly-option-input-values"
    ]
  },
  "flex-layout.row#item-customize": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto"
    },
    "children": [
      "flex-layout.col#product-assembly-image",
      "flex-layout.col#item-customize-middle",
      "flex-layout.col#item-customize-quantity"
    ]
  },
  "flex-layout.col#item-customize-middle": {
    "props": {
      "width": "grow",
      "verticalAlignment": "middle"
    },
    "children": [
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-children-description",
      "assembly-option-item-customize#sec-level"
    ]
  },
  "flex-layout.col#item-customize-quantity": {
    "props": {
      "horizontalAlign": "right",
      "verticalAlign": "middle"
    },
    "children": [
      "assembly-option-item-quantity-selector"
    ]
  },
  "assembly-option-item-customize#sec-level": {
    "props": {
      "buttonProps": {
        "collapse": "left"
      }
    },
    "children": [
      "assembly-option-item-image",
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-quantity-selector"
    ]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/pdp/product-gifts.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-gifts": {
    "props": {
      "maxVisibleItems": {
        "desktop": 1,
        "mobile": 1
      }
    },
    "children": ["flex-layout.row#product-gifts-text", "product-gift-list"]
  },

  "flex-layout.row#product-gifts-text": {
    "props": {
      "verticalAlign": "middle",
      "colSizing": "auto",
      "preserveLayoutOnMobile": true
    },
    "children": [
      "rich-text#product-gifts",
      "flex-layout.col#product-gifts-text"
    ]
  },
  "flex-layout.col#product-gifts-text": {
    "children": ["modal-trigger#product-gifts"],
    "props": {
      "verticalAlign": "middle"
    }
  },
  "rich-text#product-gifts": {
    "props": {
      "text": "**+ GIFT**"
    }
  },
  "gift-text": {
    "props": {
      "blockClass": "default",
      "text": "{exceedingItems, plural, =0{} one {+ # gift} other {+ # gifts}}"
    }
  },
  "product-gift-list": {
    "children": ["flex-layout.row#gift"]
  },
  "flex-layout.row#gift": {
    "props": {
      "fullWidth": true
    },
    "children": ["flex-layout.col#gift-name-description", "gift-image"]
  },
  "flex-layout.col#gift-name-description": {
    "props": {
      "verticalAlign": "middle",
      "rowGap": 3
    },
    "children": ["gift-name", "gift-description"]
  },

  "modal-trigger#product-gifts": {
    "children": ["modal-layout#product-gifts", "gift-text"],
    "props": {
      "blockClass": "product-gifts"
    }
  },
  "modal-layout#product-gifts": {
    "props": {
      "blockClass": "product-gifts",
      "fullScreen": {
        "phone": true,
        "desktop": false,
        "tablet": false
      }
    },
    "children": ["product-gifts#modal"]
  },

  "product-gifts#modal": {
    "children": ["product-gift-list"]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/pdp/product.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "condition-layout.product#availability",
      "flex-layout.row#description",
      "flex-layout.row#specifications-title",
      "product-specification-group#table",
      "shelf.relatedProducts",
      "product-reviews",
      "product-questions-and-answers"
    ]
  },
  "flex-layout.row#specifications-title": {
    "children": ["rich-text#specifications"]
  },
  "rich-text#specifications": {
    "props": {
      "text": "##### Product Specifications"
    }
  },
  "flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 4
    },
    "children": ["breadcrumb"]
  },
  "flex-layout.row#description": {
    "props": {
      "marginBottom": 7
    },
    "children": ["product-description"]
  },
  "condition-layout.product#availability": {
    "props": {
      "conditions": [
        {
          "subject": "isProductAvailable"
        }
      ],
      "Then": "flex-layout.row#product-main",
      "Else": "flex-layout.row#product-availability"
    }
  },
  "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7
    },
    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
  },

  "stack-layout": {
    "props": {
      "blockClass": "product"
    },
    "children": [
      "flex-layout.row#product-image",
      "product-bookmark",
      "product-specification-badges"
    ]
  },

  "product-specification-badges": {
    "props": {
      "specificationGroupName": "Group",
      "specificationName": "On Sale",
      "visibleWhen": "True",
      "displayValue": "SPECIFICATION_NAME"
    }
  },

  "flex-layout.col#stack": {
    "children": ["stack-layout"],
    "props": {
      "width": "60%",
      "rowGap": 0
    }
  },
  "flex-layout.row#product-image": {
    "children": ["product-images"]
  },
  "product-images": {
    "props": {
      "aspectRatio": {
        "desktop": "auto",
        "phone": "16:9"
      },
      "displayThumbnailsArrows": true
    }
  },
  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "flex-layout.row#product-name",
      "product-rating-summary",
      "flex-layout.row#list-price-savings",
      "flex-layout.row#selling-price",
      "product-teaser.product.affirm",
      "product-installments",
      "product-separator",
      "product-identifier.product",
      "sku-selector",
      "product-quantity",
      "product-assembly-options",
      "product-gifts",
      "flex-layout.row#buy-button",
      "availability-subscriber",
      "shipping-simulator",
      "share#default"
    ]
  },

  "flex-layout.row#product-name": {
    "props": {
      "marginBottom": 3
    },
    "children": ["vtex.store-components:product-name"]
  },

  "sku-selector": {
    "props": {
      "variationsSpacing": 3,
      "showValueNameForImageVariation": true
    }
  },

  "flex-layout.row#buy-button": {
    "props": {
      "marginTop": 4,
      "marginBottom": 7
    },
    "children": [
      "add-to-cart-button"
    ]
  },

  "flex-layout.row#product-availability": {
    "props": {
      "colGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7
    },
    "children": [
      "product-teaser.summary.affirm",
      "flex-layout.col#stack",
      "flex-layout.col#right-col-availability"
    ]
  },
  "flex-layout.col#right-col-availability": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0,
      "blockClass": "info-availability"
    },
    "children": [
      "flex-layout.row#product-name",
      "product-identifier.product",
      "sku-selector",
      "flex-layout.row#availability"
    ]
  },
  "flex-layout.row#availability": {
    "props": {
      "blockClass": "message-availability"
    },
    "children": ["availability-subscriber"]
  },

  "share#default": {
    "props": {
      "social": {
        "Facebook": true,
        "WhatsApp": true,
        "Twitter": false,
        "Pinterest": true
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/pdp/product-specifications-table.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-specification-group#table": {
    "children": [
      "flex-layout.row#spec-group"
    ]
  },
  "flex-layout.row#spec-group": {
    "props": {
      "blockClass": "productSpecificationGroup"
    },
    "children": [
      "flex-layout.col#spec-group"
    ]
  },
  "flex-layout.col#spec-group": {
    "children": [
      "flex-layout.row#spec-group-name",
      "product-specification"
    ]
  },
  "flex-layout.row#spec-group-name": {
    "props": {
      "blockClass": "productSpecificationGroupName"
    },
    "children": [
      "product-specification-text#group"
    ]
  },
  "product-specification": {
    "children": [
      "flex-layout.row#spec-item"
    ]
  },
  "flex-layout.row#spec-item": {
    "props": {
      "blockClass": "productSpecification"
    },
    "children": [
      "flex-layout.col#spec-name",
      "flex-layout.col#spec-value"
    ]
  },
  "flex-layout.col#spec-name": {
    "props": {
      "blockClass": "productSpecificationName",
      "width": {
        "mobile": "50%",
        "desktop": "25%"
      }
    },
    "children": [
      "product-specification-text#specification"
    ]
  },
  "flex-layout.col#spec-value": {
    "props": {
      "blockClass": "productSpecificationValue"
    },
    "children": [
      "product-specification-values"
    ]
  },
  "product-specification-values": {
    "children": [
      "product-specification-text#value"
    ]
  },
  "product-specification-text#group": {
    "props": {
      "message": "{groupName}"
    }
  },
  "product-specification-text#specification": {
    "props": {
      "message": "{specificationName}"
    }
  },
  "product-specification-text#value": {
    "props": {
      "message": "{specificationValue}"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/header/category-menu.json from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#category-menu": {
    "props": {
      "experimentalOptimizeRendering": true
    },
    "children": [
      "menu-item#category-apparel",
      "menu-item#category-home",
      "menu-item#more"
    ]
  },
  "menu-item#category-apparel": {
    "props": {
      "id": "menu-item-category-apparel",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/",
        "noFollow": false,
        "tagTitle": "Apparel & Accessories",
        "text": "Apparel & Accessories"
      }
    },
    "blocks": [
      "vtex.menu@2.x:submenu#category-apparel"
    ]
  },
  "vtex.menu@2.x:submenu#category-apparel": {
    "props": {
      "width": "auto"
    },
    "children": [
      "vtex.menu@2.x:menu#category-apparel"
    ]
  },
  "vtex.menu@2.x:menu#category-apparel": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#category-apparel-clothing",
      "menu-item#category-apparel-accessories",
      "menu-item#category-apparel-eyeglasses"
    ]
  },
  "menu-item#category-apparel-clothing": {
    "props": {
      "id": "menu-item-category-apparel-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/clothing/",
        "noFollow": false,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    }
  },
  "menu-item#category-apparel-accessories": {
    "props": {
      "id": "menu-item-category-apparel-accessories",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/accessories/",
        "noFollow": false,
        "tagTitle": "Accessories",
        "text": "Accessories"
      }
    }
  },
  "menu-item#category-apparel-eyeglasses": {
    "props": {
      "id": "menu-item-category-apparel-eyeglasses",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/eyeglasses/",
        "noFollow": false,
        "tagTitle": "Eyeglasses",
        "text": "Eyeglasses"
      }
    }
  },
  "menu-item#category-home": {
    "props": {
      "id": "menu-item-category-home",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/home---decor/",
        "noFollow": false,
        "tagTitle": "Home & Decor",
        "text": "Home & Decor"
      }
    }
  },
  "menu-item#more": {
    "props": {
      "id": "menu-item-custom-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "More",
        "text": "More"
      }
    },
    "blocks": [
      "vtex.menu@2.x:submenu#more"
    ]
  },
  "vtex.menu@2.x:submenu#more": {
    "props": {
      "width": "100%"
    },
    "children": [
      "flex-layout.row#menu-more"
    ]
  },
  "flex-layout.row#menu-more": {
    "children": [
      "flex-layout.col#menu-more-1",
      "flex-layout.col#menu-more-2"
    ]
  },
  "flex-layout.col#menu-more-1": {
    "children": [
      "vtex.menu@2.x:menu#more"
    ]
  },
  "flex-layout.col#menu-more-2": {
    "children": [
      "info-card#home"
    ]
  },
  "vtex.menu@2.x:menu#more": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#about-us",
      "menu-item#faq"
    ]
  },
  "menu-item#about-us": {
    "props": {
      "id": "menu-item-about-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/about-us",
        "noFollow": true,
        "tagTitle": "About us",
        "text": "About us"
      }
    }
  },
  "menu-item#faq": {
    "props": {
      "id": "menu-item-faq",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/faq",
        "noFollow": true,
        "tagTitle": "FAQ",
        "text": "FAQ"
      }
    }
  },
  "menu-item#contact-us": {
    "props": {
      "id": "menu-item-contact-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/contact-us",
        "noFollow": true,
        "tagTitle": "Contact Us",
        "text": "Contact Us"
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/header/header.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "header": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header.full": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header-layout.desktop": {
    "children": [
      "flex-layout.row#1-desktop",
      "flex-layout.row#3-desktop",
      "sticky-layout#4-desktop"
    ]
  },

  "flex-layout.row#1-desktop": {
    "children": ["telemarketing"],
    "props": {
      "fullWidth": true
    }
  },

  "flex-layout.row#3-desktop": {
    "props": {
      "blockClass": "menu-link",
      "horizontalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": [
      "vtex.menu@2.x:menu#websites",
      "flex-layout.col#spacer",
      "vtex.menu@2.x:menu#institutional"
    ]
  },
  "flex-layout.col#spacer": {
    "props": {
      "width": "grow"
    }
  },
  "sticky-layout#4-desktop": {
    "props": {
      "blockClass": "sticky-header"
    },
    "children": ["flex-layout.row#4-desktop"]
  },
  "flex-layout.row#4-desktop": {
    "props": {
      "blockClass": "main-header",
      "horizontalAlign": "center",
      "verticalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": [
      "flex-layout.col#logo-desktop",
      "flex-layout.col#category-menu",
      "flex-layout.col#spacer",
      "search-bar",
      "locale-switcher",
      "login",
      "minicart.v2"
    ]
  },
  "flex-layout.col#logo-desktop": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["logo#desktop"]
  },
  "flex-layout.col#category-menu": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["vtex.menu@2.x:menu#category-menu"]
  },
  "logo#desktop": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
      "width": "180",
      "height": "12"
    }
  },
  "header-layout.mobile": {
    "children": ["sticky-layout#1-mobile"]
  },
  "sticky-layout#1-mobile": {
    "children": ["flex-layout.row#1-mobile"]
  },
  "flex-layout.row#1-mobile": {
    "children": [
      "drawer",
      "logo#mobile",
      "flex-layout.col#spacer",
      "login",
      "minicart.v2"
    ],
    "props": {
      "blockClass": "main-header-mobile",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "drawer": {
    "children": ["menu#drawer"]
  },

  "menu#drawer": {
    "children": [
      "menu-item#category-apparel",
      "menu-item#category-home",
      "menu-item#more"
    ],
    "props": {
      "orientation": "vertical"
    }
  },

  "logo#mobile": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
      "width": "77.5",
      "height": "27.5"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of affirm-qa-theme/store/blocks/header/top-menu.json from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#websites": {
    "children": [
      "menu-item#shop",
      "menu-item#about-us"
    ]
  },
  "menu-item#shop": {
    "props": {
      "id": "menu-item-shop",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Shop",
        "text": "Shop"
      }
    }
  },
  "vtex.menu@2.x:menu#institutional": {
    "children": [
      "menu-item#vtex-website"
    ]
  },
  "menu-item#vtex-website": {
    "props": {
      "id": "menu-item-vtex-website",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "external",
        "href": "http://vtex.com",
        "noFollow": false,
        "tagTitle": "visit vtex.com",
        "text": "visit vtex.com"
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/messages/de.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "profile-form.optional": "Wahlweise",
  "profile-form.include-business": "Geschäftsfelder einbeziehen",
  "profile-form.exclude-business": "Nicht Geschäftsfelder umfassend",
  "profile-form.save-changes": "Änderungen speichern",
  "profile-form.field.firstName": "Vorname",
  "profile-form.field.lastName": "Nachname",
  "profile-form.field.email": "E-Мail",
  "profile-form.field.changeIdentifiedClient": "Den identifizierten Kunden ändern",
  "profile-form.field.gender": "Geschlecht",
  "profile-form.field.custom-gender": "vom Benutzer definiertes Geschlecht",
  "profile-form.field.document": "Dokument",
  "profile-form.field.birthDate": "Geburtstag",
  "profile-form.field.homePhone": "Festnetztelefon",
  "profile-form.field.businessPhone": "Unternehmenstelefon",
  "profile-form.field.corporateDocument": "Unternehmensdokument",
  "profile-form.field.corporateName": "Firmenname",
  "profile-form.field.stateRegistration": "Staatliche Registrierung",
  "profile-form.field.noStateRegistration": "Von der staatlichen Registrierung ausgenommen",
  "profile-form.field.exemptStateRegistration": "Excento",
  "profile-form.field.tradeName": "Handelsname",
  "profile-form.field.ARG_cuit": "CUIT",
  "profile-form.field.ARG_dni": "DNI",
  "profile-form.field.BRA_cnpj": "CNPJ",
  "profile-form.field.BRA_cpf": "CPF",
  "profile-form.field.CHL_rut": "RUT",
  "profile-form.field.COL_cedula": "Staatsbürgerschaftskarte",
  "profile-form.field.COL_rut": "RUT",
  "profile-form.field.CRI_cedula": "Gesetzliche Nummer",
  "profile-form.field.ECU_cedula": "Ausweis",
  "profile-form.field.ECU_ruc": "RUC",
  "profile-form.field.ESP_cif": "CIF",
  "profile-form.field.ESP_dni": "DNI",
  "profile-form.field.GTM_dpi": "DPI",
  "profile-form.field.GTM_nit": "NIT",
  "profile-form.field.MEX_rfc_corporate": "RFC (korporativ)",
  "profile-form.field.MEX_rfc": "RFC",
  "profile-form.field.PAN_cip": "CIP",
  "profile-form.field.PAN_ruc": "RUC",
  "profile-form.field.PER_document": "Ausweisdokument",
  "profile-form.field.PER_ruc": "RUC",
  "profile-form.field.PRT_nif": "NIF",
  "profile-form.field.PRT_nipc": "NIPC",
  "profile-form.field.PRY_cedula": "Ausweis",
  "profile-form.field.PRY_ruc": "RUC",
  "profile-form.field.URY_cedula": "Ausweis",
  "profile-form.field.URY_rut": "RUT",
  "profile-form.field.USA_ssn": "SSN",
  "profile-form.field.VEN_cedula": "Ausweis",
  "profile-form.field.VEN_rif": "RIF",
  "profile-form.error.EMPTY_FIELD": "Das Feld ist verpflichtend.",
  "profile-form.error.INVALID_FIELD": "Ungültiger Wert.",
  "profile-form.gender.custom": "Personalisiert",
  "profile-form.gender.male": "Mann",
  "profile-form.gender.female": "Frau",
  "profile-form.gender.agender": "A-Geschlecht",
  "profile-form.gender.androgyne": "Androgyne",
  "profile-form.gender.bigender": "Bigeschlecht",
  "profile-form.gender.genderfluid": "Genderfluid",
  "profile-form.gender.nonconforming": "Nicht konformes Geschlecht",
  "profile-form.gender.questioning": "Geschlecht-Befragung",
  "profile-form.gender.variant": "Geschlecht-Variante",
  "profile-form.gender.genderqueer": "Genderqueer",
  "profile-form.gender.neutrois": "Neutrois",
  "profile-form.gender.other": "Andere",
  "profile-form.gender.pangender": "Pangeschlecht",
  "profile-form.gender.transgender": "Transgender",
  "profile-form.gender.transsexual": "Transsexuelle",
  "profile-form.button.submit": "Submit"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/messages/pt.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "profile-form.optional": "Opcional",
  "profile-form.include-business": "Incluir campos de pessoa jurídica",
  "profile-form.exclude-business": "Não incluir campos de pessoa jurídica",
  "profile-form.save-changes": "Salvar alterações",
  "profile-form.field.firstName": "Nome",
  "profile-form.field.lastName": "Sobrenome",
  "profile-form.field.email": "E-mail",
  "profile-form.field.changeIdentifiedClient": "Mudar o cliente identificado",
  "profile-form.field.gender": "Gênero",
  "profile-form.field.custom-gender": "Gênero Personalizado",
  "profile-form.field.document": "Documento",
  "profile-form.field.birthDate": "Data de Nascimento",
  "profile-form.field.homePhone": "Telefone",
  "profile-form.field.businessPhone": "Telefone Corporativo",
  "profile-form.field.corporateDocument": "Documento Corporativo",
  "profile-form.field.corporateName": "Razão Social",
  "profile-form.field.stateRegistration": "Inscrição Estadual",
  "profile-form.field.noStateRegistration": "Isento de Inscrição Estadual",
  "profile-form.field.exemptStateRegistration": "Isento",
  "profile-form.field.tradeName": "Nome Fantasia",
  "profile-form.field.ARG_cuit": "CUIT",
  "profile-form.field.ARG_dni": "DNI",
  "profile-form.field.BRA_cnpj": "CNPJ",
  "profile-form.field.BRA_cpf": "CPF",
  "profile-form.field.CHL_rut": "RUT",
  "profile-form.field.COL_cedula": "Cédula de Ciudadanía",
  "profile-form.field.COL_rut": "RUT",
  "profile-form.field.CRI_cedula": "Cédula Jurídica",
  "profile-form.field.ECU_cedula": "Cédula",
  "profile-form.field.ECU_ruc": "RUC",
  "profile-form.field.ESP_cif": "CIF",
  "profile-form.field.ESP_dni": "DNI",
  "profile-form.field.GTM_dpi": "DPI",
  "profile-form.field.GTM_nit": "NIT",
  "profile-form.field.MEX_rfc_corporate": "RFC (empresa)",
  "profile-form.field.MEX_rfc": "RFC",
  "profile-form.field.PAN_cip": "CIP",
  "profile-form.field.PAN_ruc": "RUC",
  "profile-form.field.PER_document": "Documento de Identidad",
  "profile-form.field.PER_ruc": "RUC",
  "profile-form.field.PRT_nif": "NIF",
  "profile-form.field.PRT_nipc": "NIPC",
  "profile-form.field.PRY_cedula": "Cédula de Identidad",
  "profile-form.field.PRY_ruc": "RUC",
  "profile-form.field.URY_cedula": "Cédula",
  "profile-form.field.URY_rut": "RUT",
  "profile-form.field.USA_ssn": "SSN",
  "profile-form.field.VEN_cedula": "Cédula de Identidad",
  "profile-form.field.VEN_rif": "RIF",
  "profile-form.error.EMPTY_FIELD": "Este campo é obrigatório.",
  "profile-form.error.INVALID_FIELD": "Valor inválido.",
  "profile-form.gender.custom": "Personalizado",
  "profile-form.gender.male": "Masculino",
  "profile-form.gender.female": "Feminino",
  "profile-form.gender.agender": "Agênero",
  "profile-form.gender.androgyne": "Andrógino",
  "profile-form.gender.bigender": "Bigênero",
  "profile-form.gender.genderfluid": "Gênero Fluido",
  "profile-form.gender.nonconforming": "Gênero Não-conformante",
  "profile-form.gender.questioning": "Questionador de Gênero",
  "profile-form.gender.variant": "Variante de Gênero",
  "profile-form.gender.genderqueer": "Não-binário",
  "profile-form.gender.neutrois": "Neutro",
  "profile-form.gender.other": "Outros",
  "profile-form.gender.pangender": "Pangênero",
  "profile-form.gender.transgender": "Transgênero",
  "profile-form.gender.transsexual": "Transsexual",
  "profile-form.button.submit": "Enviar"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/messages/en.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "profile-form.optional": "Optional",
  "profile-form.include-business": "Include business fields",
  "profile-form.exclude-business": "Do not include business fields",
  "profile-form.save-changes": "Save changes",
  "profile-form.field.firstName": "First Name",
  "profile-form.field.lastName": "Last Name",
  "profile-form.field.email": "E-mail",
  "profile-form.field.changeIdentifiedClient": "Change identified client",
  "profile-form.field.gender": "Gender",
  "profile-form.field.custom-gender": "Custom gender",
  "profile-form.field.document": "Document",
  "profile-form.field.birthDate": "Birth date",
  "profile-form.field.homePhone": "Phone",
  "profile-form.field.businessPhone": "Corporate Phone",
  "profile-form.field.corporateDocument": "Coporate Document",
  "profile-form.field.corporateName": "Corporate Name",
  "profile-form.field.stateRegistration": "State Registration",
  "profile-form.field.noStateRegistration": "No State Registration",
  "profile-form.field.exemptStateRegistration": "Exempt",
  "profile-form.field.tradeName": "Trade Name",
  "profile-form.field.ARG_cuit": "CUIT",
  "profile-form.field.ARG_dni": "DNI",
  "profile-form.field.BRA_cnpj": "CNPJ",
  "profile-form.field.BRA_cpf": "CPF",
  "profile-form.field.CHL_rut": "RUT",
  "profile-form.field.COL_cedula": "Cédula de Ciudadanía",
  "profile-form.field.COL_rut": "RUT",
  "profile-form.field.CRI_cedula": "Cédula Jurídica",
  "profile-form.field.ECU_cedula": "Cédula",
  "profile-form.field.ECU_ruc": "RUC",
  "profile-form.field.ESP_cif": "CIF",
  "profile-form.field.ESP_dni": "DNI",
  "profile-form.field.GTM_dpi": "DPI",
  "profile-form.field.GTM_nit": "NIT",
  "profile-form.field.MEX_rfc_corporate": "RFC (corporate)",
  "profile-form.field.MEX_rfc": "RFC",
  "profile-form.field.PAN_cip": "CIP",
  "profile-form.field.PAN_ruc": "RUC",
  "profile-form.field.PER_document": "Documento de Identidad",
  "profile-form.field.PER_ruc": "RUC",
  "profile-form.field.PRT_nif": "NIF",
  "profile-form.field.PRT_nipc": "NIPC",
  "profile-form.field.PRY_cedula": "Cédula de Identidad",
  "profile-form.field.PRY_ruc": "RUC",
  "profile-form.field.URY_cedula": "Cédula",
  "profile-form.field.URY_rut": "RUT",
  "profile-form.field.USA_ssn": "SSN",
  "profile-form.field.VEN_cedula": "Cédula de Identidad",
  "profile-form.field.VEN_rif": "RIF",
  "profile-form.error.EMPTY_FIELD": "This field is mandatory.",
  "profile-form.error.INVALID_FIELD": "Invalid value.",
  "profile-form.gender.custom": "Custom",
  "profile-form.gender.male": "Male",
  "profile-form.gender.female": "Female",
  "profile-form.gender.agender": "Agender",
  "profile-form.gender.androgyne": "Androgyne",
  "profile-form.gender.bigender": "Bigender",
  "profile-form.gender.genderfluid": "Genderfluid",
  "profile-form.gender.nonconforming": "Gender nonconforming",
  "profile-form.gender.questioning": "Gender questioning",
  "profile-form.gender.variant": "Gender variant",
  "profile-form.gender.genderqueer": "Genderqueer",
  "profile-form.gender.neutrois": "Neutrois",
  "profile-form.gender.other": "Other",
  "profile-form.gender.pangender": "Pangender",
  "profile-form.gender.transgender": "Transgender",
  "profile-form.gender.transsexual": "Transsexual",
  "profile-form.button.submit": "Submit"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/messages/pt-PT.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "profile-form.save-changes": "Guardar alterações",
  "profile-form.field.firstName": "Nome",
  "profile-form.field.lastName": "Apelido",
  "profile-form.field.gender": "Género",
  "profile-form.field.custom-gender": "Género Personalizado",
  "profile-form.field.birthDate": "Data de nascimento",
  "profile-form.field.homePhone": "Telefone de casa",
  "profile-form.field.businessPhone": "Telefone do Trabalho",
  "profile-form.field.corporateDocument": "Documento Comprovativo de Trabalho",
  "profile-form.field.corporateName": "Nome da Entidade Empregadora",
  "profile-form.field.stateRegistration": "Registro Civil",
  "profile-form.field.tradeName": "Nome fantasia",
  "profile-form.error.INVALID_FIELD": "Conteúdo de Campo Inválido."
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/messages/it.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "profile-form.optional": "Opzionale",
  "profile-form.include-business": "Includere i campi aziendali",
  "profile-form.exclude-business": "Non includere i campi aziendali",
  "profile-form.save-changes": "Salva le modifiche",
  "profile-form.field.firstName": "Nome",
  "profile-form.field.lastName": "Cognome",
  "profile-form.field.email": "E-mail",
  "profile-form.field.changeIdentifiedClient": "Cambia il cliente identificato",
  "profile-form.field.gender": "Sesso",
  "profile-form.field.custom-gender": "Sesso personalizzato",
  "profile-form.field.document": "Documento",
  "profile-form.field.birthDate": "Data di nascita",
  "profile-form.field.homePhone": "Telefono di casa",
  "profile-form.field.businessPhone": "Telefono aziendale",
  "profile-form.field.corporateDocument": "Documento aziendale",
  "profile-form.field.corporateName": "Nome aziendale",
  "profile-form.field.stateRegistration": "Registrazione statale",
  "profile-form.field.noStateRegistration": "Esente dalla registrazione statale",
  "profile-form.field.exemptStateRegistration": "Excento",
  "profile-form.field.tradeName": "Nome commerciale",
  "profile-form.field.ARG_cuit": "CUIT",
  "profile-form.field.ARG_dni": "DNI",
  "profile-form.field.BRA_cnpj": "CNPJ",
  "profile-form.field.BRA_cpf": "CPF",
  "profile-form.field.CHL_rut": "RUT",
  "profile-form.field.COL_cedula": "Carta d'identità",
  "profile-form.field.COL_rut": "RUT",
  "profile-form.field.CRI_cedula": "Codice Identificativo dell'azienda",
  "profile-form.field.ECU_cedula": "Carta d'identità",
  "profile-form.field.ECU_ruc": "RUC",
  "profile-form.field.ESP_cif": "CIF",
  "profile-form.field.ESP_dni": "DNI",
  "profile-form.field.GTM_dpi": "DPI",
  "profile-form.field.GTM_nit": "NIT",
  "profile-form.field.MEX_rfc_corporate": "RFC (aziendale)",
  "profile-form.field.MEX_rfc": "RFC",
  "profile-form.field.PAN_cip": "CIP",
  "profile-form.field.PAN_ruc": "RUC",
  "profile-form.field.PER_document": "Documento di identità",
  "profile-form.field.PER_ruc": "RUC",
  "profile-form.field.PRT_nif": "NIF",
  "profile-form.field.PRT_nipc": "NIPC",
  "profile-form.field.PRY_cedula": "Carta d'identità",
  "profile-form.field.PRY_ruc": "RUC",
  "profile-form.field.URY_cedula": "Carta d'identità",
  "profile-form.field.URY_rut": "RUT",
  "profile-form.field.USA_ssn": "SSN",
  "profile-form.field.VEN_cedula": "Carta d'identità",
  "profile-form.field.VEN_rif": "RIF",
  "profile-form.error.EMPTY_FIELD": "Questo campo è obbligatorio.",
  "profile-form.error.INVALID_FIELD": "Valore non valido.",
  "profile-form.gender.custom": "Personalizzato",
  "profile-form.gender.male": "Uomo",
  "profile-form.gender.female": "Donna",
  "profile-form.gender.agender": "Senza genere",
  "profile-form.gender.androgyne": "Androgeno",
  "profile-form.gender.bigender": "Bigender",
  "profile-form.gender.genderfluid": "Genderfluid",
  "profile-form.gender.nonconforming": "Nessuna conformità al genere",
  "profile-form.gender.questioning": "Interrogativo sul genere",
  "profile-form.gender.variant": "Genere variabile",
  "profile-form.gender.genderqueer": "Genderqueer",
  "profile-form.gender.neutrois": "Neutrois",
  "profile-form.gender.other": "Altro",
  "profile-form.gender.pangender": "Pangender",
  "profile-form.gender.transgender": "Transgender",
  "profile-form.gender.transsexual": "Transessuale",
  "profile-form.button.submit": "Submit"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/messages/fr.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "profile-form.optional": "Optionnel",
  "profile-form.include-business": "Inclure les champs commerciaux",
  "profile-form.exclude-business": "Ne pas inclure les champs commerciaux",
  "profile-form.save-changes": "Sauvegarder les modifications",
  "profile-form.field.firstName": "Prénom",
  "profile-form.field.lastName": "Nom de famille",
  "profile-form.field.email": "E-mail",
  "profile-form.field.changeIdentifiedClient": "Changer le client identifié",
  "profile-form.field.gender": "Genre",
  "profile-form.field.custom-gender": "Genre personnalisé",
  "profile-form.field.document": "Document",
  "profile-form.field.birthDate": "Date de naissance",
  "profile-form.field.homePhone": "Téléphone fixe",
  "profile-form.field.businessPhone": "Téléphone commercial",
  "profile-form.field.corporateDocument": "Document commercial",
  "profile-form.field.corporateName": "Nom de l'entreprise",
  "profile-form.field.stateRegistration": "Enregistrement d'état",
  "profile-form.field.noStateRegistration": "Exempt of State Registration",
  "profile-form.field.exemptStateRegistration": "Excento",
  "profile-form.field.tradeName": "Nom commercial",
  "profile-form.field.ARG_cuit": "CUIT",
  "profile-form.field.ARG_dni": "DNI",
  "profile-form.field.BRA_cnpj": "CNPJ",
  "profile-form.field.BRA_cpf": "CPF",
  "profile-form.field.CHL_rut": "RUT",
  "profile-form.field.COL_cedula": "Cédula de Ciudadanía",
  "profile-form.field.COL_rut": "RUT",
  "profile-form.field.CRI_cedula": "Cédula Jurídica",
  "profile-form.field.ECU_cedula": "Cédula",
  "profile-form.field.ECU_ruc": "RUC",
  "profile-form.field.ESP_cif": "CIF",
  "profile-form.field.ESP_dni": "DNI",
  "profile-form.field.GTM_dpi": "DPI",
  "profile-form.field.GTM_nit": "NIT",
  "profile-form.field.MEX_rfc_corporate": "RFC (corporate)",
  "profile-form.field.MEX_rfc": "RFC",
  "profile-form.field.PAN_cip": "CIP",
  "profile-form.field.PAN_ruc": "RUC",
  "profile-form.field.PER_document": "Documento de Identidad",
  "profile-form.field.PER_ruc": "RUC",
  "profile-form.field.PRT_nif": "NIF",
  "profile-form.field.PRT_nipc": "NIPC",
  "profile-form.field.PRY_cedula": "Cédula de Identidad",
  "profile-form.field.PRY_ruc": "RUC",
  "profile-form.field.URY_cedula": "Cédula",
  "profile-form.field.URY_rut": "RUT",
  "profile-form.field.USA_ssn": "SSN",
  "profile-form.field.VEN_cedula": "Cédula de Identidad",
  "profile-form.field.VEN_rif": "RIF",
  "profile-form.error.EMPTY_FIELD": "Ce champ est obligatoire.",
  "profile-form.error.INVALID_FIELD": "Valeur invalide.",
  "profile-form.gender.custom": "Personnalisé",
  "profile-form.gender.male": "Homme",
  "profile-form.gender.female": "Femme",
  "profile-form.gender.agender": "Agenre",
  "profile-form.gender.androgyne": "Androgyne",
  "profile-form.gender.bigender": "Bigenre",
  "profile-form.gender.genderfluid": "Genre fluide",
  "profile-form.gender.nonconforming": "Personne non-conforme à un genre",
  "profile-form.gender.questioning": "En questionnement sur son genre",
  "profile-form.gender.variant": "Genre variable",
  "profile-form.gender.genderqueer": "Genderqueer",
  "profile-form.gender.neutrois": "Neutrois",
  "profile-form.gender.other": "Autre",
  "profile-form.gender.pangender": "Pangender",
  "profile-form.gender.transgender": "Personne transgenre",
  "profile-form.gender.transsexual": "Personne transsexuelle",
  "profile-form.button.submit": "Submit"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/messages/ro.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "profile-form.optional": "Facultativ",
  "profile-form.include-business": "Includeți datele companiei",
  "profile-form.exclude-business": "Nu includeți datele companiei",
  "profile-form.save-changes": "Salvează modificările",
  "profile-form.field.firstName": "Prenume",
  "profile-form.field.lastName": "Nume",
  "profile-form.field.email": "E-mail",
  "profile-form.field.changeIdentifiedClient": "Schimbați clientul identificat",
  "profile-form.field.gender": "Gen",
  "profile-form.field.custom-gender": "Gen personalizat",
  "profile-form.field.document": "Document",
  "profile-form.field.birthDate": "Data nasterii",
  "profile-form.field.homePhone": "Telefon fix",
  "profile-form.field.businessPhone": "Telefon corporativ",
  "profile-form.field.corporateDocument": "Documentul companiei",
  "profile-form.field.corporateName": "Nume Companie",
  "profile-form.field.stateRegistration": "Inscriptia de stat",
  "profile-form.field.noStateRegistration": "Excepție de la înregistrarea de stat",
  "profile-form.field.exemptStateRegistration": "Excento",
  "profile-form.field.tradeName": "Denumire comerciala",
  "profile-form.field.ARG_cuit": "CUIT",
  "profile-form.field.ARG_dni": "DNI",
  "profile-form.field.BRA_cnpj": "CNPJ",
  "profile-form.field.BRA_cpf": "CPF",
  "profile-form.field.CHL_rut": "RUT",
  "profile-form.field.COL_cedula": "Cédula de Ciudadanía",
  "profile-form.field.COL_rut": "RUT",
  "profile-form.field.CRI_cedula": "Cédula Jurídica",
  "profile-form.field.ECU_cedula": "Cédula",
  "profile-form.field.ECU_ruc": "RUC",
  "profile-form.field.ESP_cif": "CIF",
  "profile-form.field.ESP_dni": "DNI",
  "profile-form.field.GTM_dpi": "DPI",
  "profile-form.field.GTM_nit": "NIT",
  "profile-form.field.MEX_rfc_corporate": "RFC (corporate)",
  "profile-form.field.MEX_rfc": "RFC",
  "profile-form.field.PAN_cip": "CIP",
  "profile-form.field.PAN_ruc": "RUC",
  "profile-form.field.PER_document": "Documento de Identidad",
  "profile-form.field.PER_ruc": "RUC",
  "profile-form.field.PRT_nif": "NIF",
  "profile-form.field.PRT_nipc": "NIPC",
  "profile-form.field.PRY_cedula": "Cédula de Identidad",
  "profile-form.field.PRY_ruc": "RUC",
  "profile-form.field.URY_cedula": "Cédula",
  "profile-form.field.URY_rut": "RUT",
  "profile-form.field.USA_ssn": "SSN",
  "profile-form.field.VEN_cedula": "Cédula de Identidad",
  "profile-form.field.VEN_rif": "RIF",
  "profile-form.error.EMPTY_FIELD": "Acest câmp este obligatoriu.",
  "profile-form.error.INVALID_FIELD": "Valoare invalida.",
  "profile-form.gender.custom": "Personalizat",
  "profile-form.gender.male": "Masculin",
  "profile-form.gender.female": "Feminin",
  "profile-form.gender.agender": "Agender",
  "profile-form.gender.androgyne": "Androgyne",
  "profile-form.gender.bigender": "Bigender",
  "profile-form.gender.genderfluid": "Genderfluid",
  "profile-form.gender.nonconforming": "Gender nonconforming",
  "profile-form.gender.questioning": "Gender questioning",
  "profile-form.gender.variant": "Gender variant",
  "profile-form.gender.genderqueer": "Genderqueer",
  "profile-form.gender.neutrois": "Neutrois",
  "profile-form.gender.other": "Alte",
  "profile-form.gender.pangender": "Pangender",
  "profile-form.gender.transgender": "Transgender",
  "profile-form.gender.transsexual": "Transsexual",
  "profile-form.button.submit": "Submit"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/messages/ca.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "profile-form.optional": "Opcional",
  "profile-form.include-business": "Afegir dades d'empresa",
  "profile-form.exclude-business": "No incloeu dades de l'empresa",
  "profile-form.save-changes": "Guardar canvis",
  "profile-form.field.firstName": "Nom",
  "profile-form.field.lastName": "Cognoms",
  "profile-form.field.email": "Correu",
  "profile-form.field.changeIdentifiedClient": "Cambiar el cliente identificado",
  "profile-form.field.gender": "Gènere",
  "profile-form.field.custom-gender": "Gènere personalitzat",
  "profile-form.field.document": "Document",
  "profile-form.field.birthDate": "Data de naixement",
  "profile-form.field.homePhone": "Telèfon",
  "profile-form.field.businessPhone": "Telèfon comercial",
  "profile-form.field.corporateDocument": "Document corporatiu",
  "profile-form.field.corporateName": "Raó social",
  "profile-form.field.stateRegistration": "Registre estatal",
  "profile-form.field.noStateRegistration": "Excento de Inscripción Estatal",
  "profile-form.field.exemptStateRegistration": "Excento",
  "profile-form.field.tradeName": "Nom de l'empresa",
  "profile-form.field.ARG_cuit": "CUIT",
  "profile-form.field.ARG_dni": "DNI",
  "profile-form.field.BRA_cnpj": "CNPJ",
  "profile-form.field.BRA_cpf": "CPF",
  "profile-form.field.CHL_rut": "RUT",
  "profile-form.field.COL_cedula": "Cédula de Ciudadanía",
  "profile-form.field.COL_rut": "RUT",
  "profile-form.field.CRI_cedula": "Cédula Jurídica",
  "profile-form.field.ECU_cedula": "Cédula",
  "profile-form.field.ECU_ruc": "RUC",
  "profile-form.field.ESP_cif": "CIF",
  "profile-form.field.ESP_dni": "DNI",
  "profile-form.field.GTM_dpi": "DPI",
  "profile-form.field.GTM_nit": "NIT",
  "profile-form.field.MEX_rfc_corporate": "RFC (empresa)",
  "profile-form.field.MEX_rfc": "RFC",
  "profile-form.field.PAN_cip": "CIP",
  "profile-form.field.PAN_ruc": "RUC",
  "profile-form.field.PER_document": "Documento de Identidad",
  "profile-form.field.PER_ruc": "RUC",
  "profile-form.field.PRT_nif": "NIF",
  "profile-form.field.PRT_nipc": "NIPC",
  "profile-form.field.PRY_cedula": "Cédula de Identidad",
  "profile-form.field.PRY_ruc": "RUC",
  "profile-form.field.URY_cedula": "Cédula",
  "profile-form.field.URY_rut": "RUT",
  "profile-form.field.USA_ssn": "SSN",
  "profile-form.field.VEN_cedula": "Cédula de Identidad",
  "profile-form.field.VEN_rif": "RIF",
  "profile-form.error.EMPTY_FIELD": "Aquest camp és obligatori.",
  "profile-form.error.INVALID_FIELD": "No vàlid.",
  "profile-form.gender.custom": "Personalitzat",
  "profile-form.gender.male": "Home",
  "profile-form.gender.female": "Dona",
  "profile-form.gender.agender": "Envelliment",
  "profile-form.gender.androgyne": "Androgyne",
  "profile-form.gender.bigender": "Gran gènere",
  "profile-form.gender.genderfluid": "Gènere fluid",
  "profile-form.gender.nonconforming": "Gènere no conforme",
  "profile-form.gender.questioning": "Qüestionament de gènere",
  "profile-form.gender.variant": "Variant de gènere",
  "profile-form.gender.genderqueer": "Genderqueer",
  "profile-form.gender.neutrois": "Neutrois",
  "profile-form.gender.other": "Un altre",
  "profile-form.gender.pangender": "Pangender",
  "profile-form.gender.transgender": "Transgénero",
  "profile-form.gender.transsexual": "Transsexual",
  "profile-form.button.submit": "Submit"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/messages/context.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "profile-form.optional": "profile-form.optional",
  "profile-form.include-business": "profile-form.include-business",
  "profile-form.exclude-business": "profile-form.exclude-business",
  "profile-form.save-changes": "profile-form.save-changes",
  "profile-form.field.firstName": "profile-form.field.firstName",
  "profile-form.field.lastName": "profile-form.field.lastName",
  "profile-form.field.email": "profile-form.field.email",
  "profile-form.field.changeIdentifiedClient": "profile-form.field.changeIdentifiedClient",
  "profile-form.field.gender": "profile-form.field.gender",
  "profile-form.field.custom-gender": "profile-form.field.custom-gender",
  "profile-form.field.document": "profile-form.field.document",
  "profile-form.field.birthDate": "profile-form.field.birthDate",
  "profile-form.field.homePhone": "profile-form.field.homePhone",
  "profile-form.field.businessPhone": "profile-form.field.businessPhone",
  "profile-form.field.corporateDocument": "profile-form.field.corporateDocument",
  "profile-form.field.corporateName": "profile-form.field.corporateName",
  "profile-form.field.stateRegistration": "profile-form.field.stateRegistration",
  "profile-form.field.noStateRegistration": "profile-form.field.noStateRegistration",
  "profile-form.field.exemptStateRegistration": "profile-form.field.exemptStateRegistration",
  "profile-form.field.tradeName": "profile-form.field.tradeName",
  "profile-form.field.ARG_cuit": "profile-form.field.ARG_cuit",
  "profile-form.field.ARG_dni": "profile-form.field.ARG_dni",
  "profile-form.field.BRA_cnpj": "profile-form.field.BRA_cnpj",
  "profile-form.field.BRA_cpf": "profile-form.field.BRA_cpf",
  "profile-form.field.CHL_rut": "profile-form.field.CHL_rut",
  "profile-form.field.COL_cedula": "profile-form.field.COL_cedula",
  "profile-form.field.COL_rut": "profile-form.field.COL_rut",
  "profile-form.field.CRI_cedula": "profile-form.field.CRI_cedula",
  "profile-form.field.ECU_cedula": "profile-form.field.ECU_cedula",
  "profile-form.field.ECU_ruc": "profile-form.field.ECU_ruc",
  "profile-form.field.ESP_cif": "profile-form.field.ESP_cif",
  "profile-form.field.ESP_dni": "profile-form.field.ESP_dni",
  "profile-form.field.GTM_dpi": "profile-form.field.GTM_dpi",
  "profile-form.field.GTM_nit": "profile-form.field.GTM_nit",
  "profile-form.field.MEX_rfc_corporate": "profile-form.field.MEX_rfc_corporate",
  "profile-form.field.MEX_rfc": "profile-form.field.MEX_rfc",
  "profile-form.field.PAN_cip": "profile-form.field.PAN_cip",
  "profile-form.field.PAN_ruc": "profile-form.field.PAN_ruc",
  "profile-form.field.PER_document": "profile-form.field.PER_document",
  "profile-form.field.PER_ruc": "profile-form.field.PER_ruc",
  "profile-form.field.PRT_nif": "profile-form.field.PRT_nif",
  "profile-form.field.PRT_nipc": "profile-form.field.PRT_nipc",
  "profile-form.field.PRY_cedula": "profile-form.field.PRY_cedula",
  "profile-form.field.PRY_ruc": "profile-form.field.PRY_ruc",
  "profile-form.field.URY_cedula": "profile-form.field.URY_cedula",
  "profile-form.field.URY_rut": "profile-form.field.URY_rut",
  "profile-form.field.USA_ssn": "profile-form.field.USA_ssn",
  "profile-form.field.VEN_cedula": "profile-form.field.VEN_cedula",
  "profile-form.field.VEN_rif": "profile-form.field.VEN_rif",
  "profile-form.error.EMPTY_FIELD": "profile-form.error.EMPTY_FIELD",
  "profile-form.error.INVALID_FIELD": "profile-form.error.INVALID_FIELD",
  "profile-form.gender.custom": "profile-form.gender.custom",
  "profile-form.gender.male": "profile-form.gender.male",
  "profile-form.gender.female": "profile-form.gender.female",
  "profile-form.gender.agender": "profile-form.gender.agender",
  "profile-form.gender.androgyne": "profile-form.gender.androgyne",
  "profile-form.gender.bigender": "profile-form.gender.bigender",
  "profile-form.gender.genderfluid": "profile-form.gender.genderfluid",
  "profile-form.gender.nonconforming": "profile-form.gender.nonconforming",
  "profile-form.gender.questioning": "profile-form.gender.questioning",
  "profile-form.gender.variant": "profile-form.gender.variant",
  "profile-form.gender.genderqueer": "profile-form.gender.genderqueer",
  "profile-form.gender.neutrois": "profile-form.gender.neutrois",
  "profile-form.gender.other": "profile-form.gender.other",
  "profile-form.gender.pangender": "profile-form.gender.pangender",
  "profile-form.gender.transgender": "profile-form.gender.transgender",
  "profile-form.gender.transsexual": "profile-form.gender.transsexual",
  "profile-form.button.submit": "profile-form.button.submit"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/messages/es.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "profile-form.optional": "Opcional",
  "profile-form.include-business": "Incluir campos corporativos",
  "profile-form.exclude-business": "No incluir campos corporativos",
  "profile-form.save-changes": "Guardar cambios",
  "profile-form.field.firstName": "Nombre",
  "profile-form.field.lastName": "Apellido",
  "profile-form.field.email": "E-mail",
  "profile-form.field.changeIdentifiedClient": "Cambiar el cliente identificado",
  "profile-form.field.gender": "Género",
  "profile-form.field.custom-gender": "Género personalizado",
  "profile-form.field.document": "Documento",
  "profile-form.field.birthDate": "Fecha de Nacimiento",
  "profile-form.field.homePhone": "Teléfono Personal",
  "profile-form.field.businessPhone": "Teléfono Corporativo",
  "profile-form.field.corporateDocument": "Documento Corporativo",
  "profile-form.field.corporateName": "Nombre Corporativo",
  "profile-form.field.stateRegistration": "Registro Estatal",
  "profile-form.field.noStateRegistration": "Excento de Inscripción Estatal",
  "profile-form.field.exemptStateRegistration": "Excento",
  "profile-form.field.tradeName": "Nombre Comercial",
  "profile-form.field.ARG_cuit": "CUIT",
  "profile-form.field.ARG_dni": "DNI",
  "profile-form.field.BRA_cnpj": "CNPJ",
  "profile-form.field.BRA_cpf": "CPF",
  "profile-form.field.CHL_rut": "RUT",
  "profile-form.field.COL_cedula": "Cédula de Ciudadanía",
  "profile-form.field.COL_rut": "RUT",
  "profile-form.field.CRI_cedula": "Cédula Jurídica",
  "profile-form.field.ECU_cedula": "Cédula",
  "profile-form.field.ECU_ruc": "RUC",
  "profile-form.field.ESP_cif": "CIF",
  "profile-form.field.ESP_dni": "DNI",
  "profile-form.field.GTM_dpi": "DPI",
  "profile-form.field.GTM_nit": "NIT",
  "profile-form.field.MEX_rfc_corporate": "RFC (empresa)",
  "profile-form.field.MEX_rfc": "RFC",
  "profile-form.field.PAN_cip": "CIP",
  "profile-form.field.PAN_ruc": "RUC",
  "profile-form.field.PER_document": "Documento de Identidad",
  "profile-form.field.PER_ruc": "RUC",
  "profile-form.field.PRT_nif": "NIF",
  "profile-form.field.PRT_nipc": "NIPC",
  "profile-form.field.PRY_cedula": "Cédula de Identidad",
  "profile-form.field.PRY_ruc": "RUC",
  "profile-form.field.URY_cedula": "Cédula",
  "profile-form.field.URY_rut": "RUT",
  "profile-form.field.USA_ssn": "SSN",
  "profile-form.field.VEN_cedula": "Cédula de Identidad",
  "profile-form.field.VEN_rif": "RIF",
  "profile-form.error.EMPTY_FIELD": "Este campo es obligatorio.",
  "profile-form.error.INVALID_FIELD": "Valor no válido.",
  "profile-form.gender.custom": "Personalizado",
  "profile-form.gender.male": "Masculino",
  "profile-form.gender.female": "Femenino",
  "profile-form.gender.agender": "Agénero",
  "profile-form.gender.androgyne": "Andrógine",
  "profile-form.gender.bigender": "Bigénero",
  "profile-form.gender.genderfluid": "Género fluido",
  "profile-form.gender.nonconforming": "No conformes con el género",
  "profile-form.gender.questioning": "Género cuestionado",
  "profile-form.gender.variant": "Género variante",
  "profile-form.gender.genderqueer": "Genderqueer",
  "profile-form.gender.neutrois": "Neutrois",
  "profile-form.gender.other": "Otros",
  "profile-form.gender.pangender": "Pangénero",
  "profile-form.gender.transgender": "Transgénero",
  "profile-form.gender.transsexual": "Transexual",
  "profile-form.button.submit": "Enviar"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/.vtex/deployment.json from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```json
[
  {
    "name": "profile-form",
    "description": "",
    "source": "https://github.com/vtex/profile-form.git",
    "script": {
      "deploy": ".vtex/deploy.yml",
      "ci": ".vtex/ci.yml"
    },
    "build": {
      "type": "codebuild",
      "image":
        "053131491888.dkr.ecr.us-east-1.amazonaws.com/awsbuild/ubuntu/node:8",
      "vpc": {
        "id": "vpc-d4f109b1",
        "subnets": ["subnet-955f63d3", "subnet-245f030c", "subnet-0e35267a"],
        "securityGroups": ["sg-c84127b3"]
      }
    },
    "service": {
      "type": "front"
    },
    "tags": [
      {
        "key": "Product",
        "value": "profile-form"
      },
      {
        "key": "Owner",
        "value": "Post Purchase XP"
      },
      {
        "key": "Team",
        "value": "Post Purchase XP"
      }
    ]
  }
]
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/react/ProfileFieldShape.js from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'

export default PropTypes.shape({
  /** The value for that field */
  value: PropTypes.any,
  /** i18n code for the error this value is presenting */
  error: PropTypes.string,
  /** Whether the input should receive focus */
  focus: PropTypes.bool,
  /** Whether the input has already been touched by the user */
  touched: PropTypes.bool,
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/react/ProfileShape.js from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'

export default PropTypes.shape({
  /** Date of the user's birth */
  birthDate: PropTypes.string,
  /** User's business phone */
  businessPhone: PropTypes.string,
  /** User's corporate document */
  corporateDocument: PropTypes.string,
  /** User's corporate name */
  corporateName: PropTypes.string,
  /** User's personal document */
  document: PropTypes.string,
  /** User's email */
  email: PropTypes.string,
  /** User's personal name */
  firstName: PropTypes.string,
  /** User's gender */
  gender: PropTypes.string,
  /** User's personal phone */
  homePhone: PropTypes.string,
  /** User's surname */
  lastName: PropTypes.string,
  /** User's corporate state registration */
  stateRegistration: PropTypes.string,
  /** User's corporate trade name */
  tradeName: PropTypes.string,
  /** Whether the user is a corporation or not */
  isCorporate: PropTypes.bool,
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/react/RuleFieldShape.js from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'

export default PropTypes.shape({
  /** Name for both the field and the profile object property */
  name: PropTypes.string.isRequired,
  /** Maximum length of the field */
  maxLength: PropTypes.number,
  /** i18n code for the label to be displayed over the field */
  label: PropTypes.string.isRequired,
  /** Whether the field is required or not */
  required: PropTypes.bool,
  /** Whether the field should be hidden or not */
  hidden: PropTypes.bool,
  /** Function returning a mask to be applied on the value */
  mask: PropTypes.func,
  /** A function to evaluate if the value is valid */
  validate: PropTypes.func,
  /** A function to transform received data before displaying */
  display: PropTypes.func,
  /** A function to transform input data before submitting */
  submit: PropTypes.func,
  /** If the input should be disabled or not */
  disabled: PropTypes.bool,
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/react/ProfileContainer.js from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import { intlShape, injectIntl } from 'react-intl'
import PropTypes from 'prop-types'
import Button from '@vtex/styleguide/lib/Button'
import RuleShape from './RuleShape'
import ProfileShape from './ProfileShape'
import ProfileField from './ProfileField'
import { applyFullValidation, isProfileValid } from './modules/validateProfile'
import addValidation from './modules/addValidation'
import removeValidation from './modules/removeValidation'
import emptyProfile from './modules/emptyProfile'
import defaultRules from './rules/default'
import StyleguideInput from './inputs/StyleguideInput'

class ProfileContainer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      profile: null,
      isCorporate: false,
    }
  }

  componentDidMount() {
    const { defaultProfile, rules } = this.props
    this.setState({
      profile: addValidation(defaultProfile, rules),
      isCorporate: defaultProfile.isCorporate,
    })
  }

  handleFieldUpdate = field => {
    this.setState(prevState => ({
      profile: { ...prevState.profile, ...field },
    }))
  }

  handleSubmit = event => {
    event.preventDefault()
    const { rules, onSubmit } = this.props
    const { profile, isCorporate } = this.state

    const validatedProfile = applyFullValidation(rules, profile, isCorporate)
    this.setState({
      profile: validatedProfile,
    })

    onSubmit({
      valid: isProfileValid(validatedProfile),
      profile: { ...removeValidation(validatedProfile, rules), isCorporate },
    })
  }

  toggleBusinessFields = () => {
    this.setState(prevState => ({
      isCorporate: !prevState.isCorporate,
    }))
  }

  render() {
    const {
      rules,
      Input,
      ToggleBusinessButton,
      SubmitButton,
      shouldShowExtendedGenders,
      children,
      intl,
    } = this.props
    const { profile, isCorporate } = this.state

    const businessButtonMessage = isCorporate
      ? 'profile-form.exclude-business'
      : 'profile-form.include-business'

    const options = { gender: { shouldShowExtendedGenders } }

    if (!profile) return null

    return (
      <form
        className="vtex-profile-form__profile-container__wrapper"
        onSubmit={this.handleSubmit}
      >
        <div className="vtex-profile-form__personal-fields">
          {rules.personalFields.map(field => (
            <ProfileField
              key={field.name}
              field={field}
              data={profile[field.name]}
              options={options[field.name]}
              onFieldUpdate={this.handleFieldUpdate}
              Input={Input}
            />
          ))}
        </div>
        {children && (
          <div className="vtex-profile-form__extended-fields">{children}</div>
        )}
        <div className="vtex-profile-form__toggle-business-btn__wrapper mb7">
          {ToggleBusinessButton ? (
            React.cloneElement(ToggleBusinessButton, {
              onClick: this.toggleBusinessFields,
              children: intl.formatMessage({ id: businessButtonMessage }),
            })
          ) : (
            <Button
              size="small"
              block
              variation="secondary"
              onClick={this.toggleBusinessFields}
            >
              {intl.formatMessage({ id: businessButtonMessage })}
            </Button>
          )}
        </div>
        {isCorporate && (
          <div className="vtex-profile-form__business-fields">
            {rules.businessFields.map(field => (
              <ProfileField
                key={field.name}
                field={field}
                data={profile[field.name]}
                onFieldUpdate={this.handleFieldUpdate}
                Input={Input}
              />
            ))}
          </div>
        )}
        {SubmitButton ? (
          React.cloneElement(SubmitButton, {
            onClick: this.handleSubmit,
          })
        ) : (
          <Button block size="small" type="submit">
            {intl.formatMessage({ id: 'profile-form.save-changes' })}
          </Button>
        )}
      </form>
    )
  }
}

ProfileContainer.defaultProps = {
  defaultProfile: emptyProfile,
  rules: defaultRules,
  Input: StyleguideInput,
  shouldShowExtendedGenders: false,
}

ProfileContainer.propTypes = {
  /** Set of rules for this form */
  rules: RuleShape.isRequired,
  /** Initial data for the profile object */
  defaultProfile: ProfileShape,
  /** Function to be called upon form submission */
  onSubmit: PropTypes.func.isRequired,
  /** Component to be used as input for the form fields */
  Input: PropTypes.func,
  /** Component to be used as a button for toggling business fields */
  ToggleBusinessButton: PropTypes.element,
  /** Component to be used as a submit button */
  SubmitButton: PropTypes.element,
  /** Whether to display extended genders or just M/F */
  shouldShowExtendedGenders: PropTypes.bool,
  /** Other components to be displayed before the business toggle button */
  children: PropTypes.node,
  /** React-intl utility */
  intl: intlShape.isRequired,
}

export default injectIntl(ProfileContainer)

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/react/ProfileRules.js from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import { injectIntl, intlShape } from 'react-intl'
import PropTypes from 'prop-types'
import { prepareDateRules } from './utils/dateRules'

import defaultRules from './rules/default'

class ProfileRules extends Component {
  constructor(props) {
    super(props)
    this.state = {
      rules: null,
    }
  }

  componentDidMount() {
    return this.updateRules()
  }

  updateRules() {
    const { shouldUseIOFetching, fetch, country, intl } = this.props

    const rulePromise = shouldUseIOFetching
      ? import(`./rules/${country}`)
      : fetch(country)
    return this.fetchRules(rulePromise, intl)
  }

  async fetchRules(rulePromise, intl) {
    try {
      const ruleData = await rulePromise
      const rules = ruleData.default || ruleData

      const enhancedDateRules = prepareDateRules(rules, intl)

      this.setState({ rules: enhancedDateRules })

      return rules
    } catch (error) {
      const errorType = this.parseError(error)
      if (errorType) {
        if (process.env.NODE_ENV !== 'production') {
          console.warn(
            `Couldn't load rules for country ${errorType}, using default rules instead.`,
          )
        }

        const enhancedDateRules = prepareDateRules(defaultRules, intl)

        this.setState({ rules: enhancedDateRules })
        return defaultRules
      }
      if (process.env.NODE_ENV !== 'production') {
        console.error('An unknown error occurred.', error)
      }
    }
  }

  parseError(e) {
    const regex = new RegExp(
      process.env.NODE_ENV === 'test'
        ? /Cannot find module '\.\.\/(rules\/)?([A-z-]{1,7})'/
        : /Cannot find module '\.\/([A-z-]{1,7})'/,
    )
    const result = regex.exec(e.message)
    if (!result) return false
    return result[1]
  }

  render() {
    const { children } = this.props
    const { rules } = this.state

    return rules ? React.cloneElement(children, { rules }) : null
  }
}

ProfileRules.propTypes = {
  /** React-intl utility */
  intl: intlShape.isRequired,
  /** Components that will receive the rules */
  children: PropTypes.element.isRequired,
  /** The country whose rules will be fetched and applied */
  country: PropTypes.string.isRequired,
  /** Whether to use IO built-in file fetching */
  shouldUseIOFetching: PropTypes.bool,
  /** Functionality for importing the rule files outside of IO */
  fetch: PropTypes.func,
}

export default injectIntl(ProfileRules)

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of instore-profile/react/ProfileWithValidationShape.js from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import ProfileFieldShape from './ProfileFieldShape'
import ProfileShape from './ProfileShape'

/** Same fields as ProfileShape, but content is of shape ProfileFieldShape */
export default Object.keys(ProfileShape)
  .map(field => ({ [field]: ProfileFieldShape }))
  .reduce((acc, cur) => ({ ...acc, ...cur }), {})

```