[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 product-customizer/messages/fi.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-customizer.selected-ingredients": "Omat ainesosat",
  "store/product-customizer.extra-ingredients": "Ylimääräiset ainesosat",
  "store/product-customizer.select-your-ingredients": "Valitse ainesosat",
  "store/product-customizer.your-variation": "Tuotevariaatiosi",
  "store/product-customizer.change-ingredients": "Muuta ainesosia",
  "store/product-customizer.select-variation": "Valitse variaatio",
  "store/product-customizer.add-to-cart": "Lisää ostoskoriin",
  "store/product-customizer.required": "pakollinen",
  "store/product-customizer.change-composition": "Muuta ainesosia tai kastiketta",
  "store/product-customizer.per-unit": "per un.",
  "store/product-customizer.pick-size": "Valitse yksi koko",
  "store/product-customizer.crust-title": "Valitse yksi pohja",
  "store/product-customizer.basic-toppings-title": "Perusainesosat",
  "store/product-customizer.recipes-title": "Perusainesosat",
  "store/product-customizer.toppings-title": "Ylimääräiset ainesosat",
  "store/product-customizer.buy-success": "Tuotteesi lisättiin ostoskoriin!",
  "store/product-customizer.add-failure": "Jotakin meni pieleen eikä tuotetta lisätty ostoskoriin!",
  "store/product-customizer.add-assembly": "Lisää {name}",
  "store/product-customizer.remove-assembly": "Poista",
  "store/product-customizer.subscription": "Tilaus",
  "store/product-customizer.subscription.frequency": "Tiheys",
  "store/product-customizer.subscription.frequency.day": "{interval, plural, one {Päivän} other {# päivän}} välein",
  "store/product-customizer.subscription.frequency.month": "{interval, plural, one {Kuukauden} other {# kuukauden}} välein",
  "store/product-customizer.subscription.frequency.week": "{interval, plural, one {Viikon} other {# viikon}} välein",
  "store/product-customizer.subscription.frequency.year": "{interval, plural, one {Vuoden} other {# vuoden}} välein",
  "store/product-customizer.subscription.purchaseday": "Ostopäivä",
  "store/product-customizer.subscription.purchaseday.day": "Kuukauden {day, plural, one {} =1{1.} =2{2.} =3{3.} other {#.}} päivä",
  "store/product-customizer.modal-view.title": "Mukauta {name}",
  "store/product-customizer.customize": "Mukauta",
  "store/product-customizer.modal-view.done-button": "Valmis"
}

```


[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 product-customizer/messages/id-ID.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-customizer.selected-ingredients": "Bahan Anda",
  "store/product-customizer.extra-ingredients": "Bahan ekstra",
  "store/product-customizer.select-your-ingredients": "Pilih bahan Anda",
  "store/product-customizer.your-variation": "Variasi item Anda",
  "store/product-customizer.change-ingredients": "Ubah bahan",
  "store/product-customizer.select-variation": "Pilih variasi Anda",
  "store/product-customizer.add-to-cart": "Tambahkan ke troli",
  "store/product-customizer.required": "wajib",
  "store/product-customizer.change-composition": "Ubah bahan atau saus",
  "store/product-customizer.per-unit": "per unit",
  "store/product-customizer.pick-size": "Pilih satu ukuran",
  "store/product-customizer.crust-title": "Pilih satu pinggiran",
  "store/product-customizer.basic-toppings-title": "Bahan dasar",
  "store/product-customizer.recipes-title": "Bahan dasar",
  "store/product-customizer.toppings-title": "Bahan ekstra",
  "store/product-customizer.buy-success": "Produk Anda ditambahkan ke troli!",
  "store/product-customizer.add-failure": "Terjadi kesalahan sehingga item tidak ditambahkan ke troli Anda!",
  "store/product-customizer.add-assembly": "Tambahkan {name}",
  "store/product-customizer.remove-assembly": "Hapus",
  "store/product-customizer.subscription": "Langganan",
  "store/product-customizer.subscription.frequency": "Frekuensi",
  "store/product-customizer.subscription.frequency.day": "Tiap {interval, plural, one {hari} other {# hari}}",
  "store/product-customizer.subscription.frequency.month": "Tiap {interval, plural, one {bulan} other {# bulan}}",
  "store/product-customizer.subscription.frequency.week": "Tiap {interval, plural, one {minggu} other {# minggu}}",
  "store/product-customizer.subscription.frequency.year": "Tiap {interval, plural, one {tahun} other {# tahun}}",
  "store/product-customizer.subscription.purchaseday": "Hari pembelian",
  "store/product-customizer.subscription.purchaseday.day": "Tanggal {day, plural, =1{1} =2{2} =3{3} other {#}} bulan ini",
  "store/product-customizer.modal-view.title": "Sesuaikan {name} Anda",
  "store/product-customizer.customize": "Sesuaikan",
  "store/product-customizer.modal-view.done-button": "Selesai"
}

```


[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 product-customizer/messages/pt.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-customizer.selected-ingredients": "Seus ingredientes",
  "store/product-customizer.extra-ingredients": "Ingredientes extras",
  "store/product-customizer.select-your-ingredients": "Selecione seus ingredientes",
  "store/product-customizer.your-variation": "Item selecionado",
  "store/product-customizer.change-ingredients": "Alterar ingredientes",
  "store/product-customizer.select-variation": "Selecione seu tipo",
  "store/product-customizer.add-to-cart": "Adicionar ao carrinho",
  "store/product-customizer.required": "Obrigatório",
  "store/product-customizer.change-composition": "Alterar ingredientes ou molhos",
  "store/product-customizer.per-unit": "por un.",
  "store/product-customizer.pick-size": "Escolha um tamanho",
  "store/product-customizer.crust-title": "Escolha uma borda",
  "store/product-customizer.basic-toppings-title": "Ingredientes básicos",
  "store/product-customizer.recipes-title": "Ingredientes básicos",
  "store/product-customizer.toppings-title": "Ingredientes extras",
  "store/product-customizer.buy-success": "Seu produto foi adicionado ao carrinho!",
  "store/product-customizer.add-failure": "Algo deu errado e o item não pode ser adicionado ao seu carrinho!",
  "store/product-customizer.add-assembly": "Adicionar {name}",
  "store/product-customizer.remove-assembly": "Remover",
  "store/product-customizer.subscription": "Assinatura",
  "store/product-customizer.subscription.frequency": "Frequência",
  "store/product-customizer.subscription.frequency.day": "A cada {interval, plural, one {# dia} other {# dias}}",
  "store/product-customizer.subscription.frequency.month": "A cada {interval, plural, one {# mês} other {# meses}}",
  "store/product-customizer.subscription.frequency.week": "A cada {interval, plural, one {# semana} other {# semanas}}",
  "store/product-customizer.subscription.frequency.year": "A cada {interval, plural, one {# ano} other {# anos}}",
  "store/product-customizer.subscription.purchaseday": "Dia da compra",
  "store/product-customizer.subscription.purchaseday.day": "{day}º dia do mês",
  "store/product-customizer.modal-view.title": "Customizar {name}",
  "store/product-customizer.customize": "Customizar",
  "store/product-customizer.modal-view.done-button": "Pronto"
}

```


[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 product-customizer/messages/en.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-customizer.selected-ingredients": "Your ingredients",
  "store/product-customizer.extra-ingredients": "Extra ingredients",
  "store/product-customizer.select-your-ingredients": "Select your ingredients",
  "store/product-customizer.your-variation": "Your item variation",
  "store/product-customizer.change-ingredients": "Change ingredients",
  "store/product-customizer.select-variation": "Select your variation",
  "store/product-customizer.add-to-cart": "Add to cart",
  "store/product-customizer.required": "required",
  "store/product-customizer.change-composition": "Change ingredients or sauce",
  "store/product-customizer.per-unit": "each",
  "store/product-customizer.pick-size": "Pick one size",
  "store/product-customizer.crust-title": "Pick one crust",
  "store/product-customizer.basic-toppings-title": "Basic ingredients",
  "store/product-customizer.recipes-title": "Basic ingredients",
  "store/product-customizer.toppings-title": "Extra ingredients",
  "store/product-customizer.buy-success": "Your product was added to the cart!",
  "store/product-customizer.add-failure": "Something went wrong and the item wasn't added to your cart!",
  "store/product-customizer.add-assembly": "Add {name}",
  "store/product-customizer.remove-assembly": "Remove",
  "store/product-customizer.subscription": "Subscription",
  "store/product-customizer.subscription.frequency": "Frequency",
  "store/product-customizer.subscription.frequency.day": "Every {interval, plural, one {day} other {# days}}",
  "store/product-customizer.subscription.frequency.month": "Every {interval, plural, one {month} other {# months}}",
  "store/product-customizer.subscription.frequency.week": "Every {interval, plural, one {week} other {# weeks}}",
  "store/product-customizer.subscription.frequency.year": "Every {interval, plural, one {year} other {# years}}",
  "store/product-customizer.subscription.purchaseday": "Purchase day",
  "store/product-customizer.subscription.purchaseday.day": "{day, plural, =1{1st} =2{2nd} =3{3rd} other {#th}} day of the month",
  "store/product-customizer.modal-view.title": "Customize your {name}",
  "store/product-customizer.customize": "Customize",
  "store/product-customizer.modal-view.done-button": "Done"
}

```


[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 product-customizer/messages/ro.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-customizer.selected-ingredients": "Ingredientele tale",
  "store/product-customizer.extra-ingredients": "Ingrediente extra",
  "store/product-customizer.select-your-ingredients": "Selectează-ți ingredientele",
  "store/product-customizer.your-variation": "Variația articolului tău",
  "store/product-customizer.change-ingredients": "Schimbă ingredientele",
  "store/product-customizer.select-variation": "Selectează variația ta",
  "store/product-customizer.add-to-cart": "Adaugă în coș",
  "store/product-customizer.required": "necesar",
  "store/product-customizer.change-composition": "Schimbă ingredientele sau sosul",
  "store/product-customizer.per-unit": "per un.",
  "store/product-customizer.pick-size": "Alege o dimensiune",
  "store/product-customizer.crust-title": "Alege o crustă",
  "store/product-customizer.basic-toppings-title": "Ingrediente de bază",
  "store/product-customizer.recipes-title": "Ingrediente de bază",
  "store/product-customizer.toppings-title": "Ingrediente extra",
  "store/product-customizer.buy-success": "Produsul tău a fost adăugat în coș!",
  "store/product-customizer.add-failure": "A apărut o eroare, iar articolul nu a fost adăugat în coșul tău!",
  "store/product-customizer.add-assembly": "Adaugă {name}",
  "store/product-customizer.remove-assembly": "Șterge",
  "store/product-customizer.subscription": "Abonament",
  "store/product-customizer.subscription.frequency": "Frecvență",
  "store/product-customizer.subscription.frequency.day": "La fiecare {interval, plural, one {zi} other {# zile}}",
  "store/product-customizer.subscription.frequency.month": "La fiecare {interval, plural, one {lună} other  {# luni}}",
  "store/product-customizer.subscription.frequency.week": "La fiecare {interval, plural, one {săptămână} other {# săptămâni}}",
  "store/product-customizer.subscription.frequency.year": "La fiecare {interval, plural, one {an} other {# ani}}",
  "store/product-customizer.subscription.purchaseday": "Ziua achiziției",
  "store/product-customizer.subscription.purchaseday.day": "{day, plural, =1{prima} =2{a doua}  =3{a treia} other {#-ea}} zi a lunii",
  "store/product-customizer.modal-view.title": "Personalizează {name} tău",
  "store/product-customizer.customize": "Personalizează",
  "store/product-customizer.modal-view.done-button": "Terminat"
}

```


[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 product-customizer/messages/context.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-customizer.selected-ingredients": "product-customizer.selected-ingredients",
  "store/product-customizer.extra-ingredients": "product-customizer.extra-ingredients",
  "store/product-customizer.select-your-ingredients": "product-customizer.select-your-ingredients",
  "store/product-customizer.your-variation": "product-customizer.your-variation",
  "store/product-customizer.change-ingredients": "product-customizer.change-ingredients",
  "store/product-customizer.select-variation": "product-customizer.select-variation",
  "store/product-customizer.add-to-cart": "product-customizer.add-to-cart",
  "store/product-customizer.required": "product-customizer.required",
  "store/product-customizer.change-composition": "product-customizer.change-composition",
  "store/product-customizer.per-unit": "product-customizer.per-unit",
  "store/product-customizer.pick-size": "product-customizer.pick-size",
  "store/product-customizer.crust-title": "product-customizer.crust-title",
  "store/product-customizer.basic-toppings-title": "product-customizer.basic-toppings-title",
  "store/product-customizer.recipes-title": "product-customizer.recipes-title",
  "store/product-customizer.toppings-title": "product-customizer.toppings-title",
  "store/product-customizer.buy-success": "product-customizer.buy-success",
  "store/product-customizer.add-failure": "product-customizer.add-failure",
  "store/product-customizer.add-assembly": "Add {name}",
  "store/product-customizer.remove-assembly": "Remove",
  "store/product-customizer.subscription": "Subscription",
  "store/product-customizer.subscription.frequency": "Frequency",
  "store/product-customizer.subscription.purchaseday": "Purchase day",
  "store/product-customizer.subscription.frequency.day": "Every {interval, plural, one {day} other {# days}}",
  "store/product-customizer.subscription.frequency.month": "Every {interval, plural, one {month} other {# months}}",
  "store/product-customizer.subscription.frequency.week": "Every {interval, plural, one {week} other {# weeks}}",
  "store/product-customizer.subscription.frequency.year": "Every {interval, plural, one {year} other {# years}}",
  "store/product-customizer.subscription.purchaseday.day": "{day, plural, one {1st} two {2nd} three {3rd} other {#th}} day of the month",
  "store/product-customizer.modal-view.title": "store/product-customizer.modal-view.title",
  "store/product-customizer.customize": "Customize",
  "store/product-customizer.modal-view.done-button": "store/product-customizer.modal-view.done-button"
}

```


[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 product-customizer/messages/ko.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-customizer.selected-ingredients": "구성요소",
  "store/product-customizer.extra-ingredients": "추가 구성요소",
  "store/product-customizer.select-your-ingredients": "구성요소 선택",
  "store/product-customizer.your-variation": "항목 변동",
  "store/product-customizer.change-ingredients": "구성요소 변경",
  "store/product-customizer.select-variation": "변동 선택",
  "store/product-customizer.add-to-cart": "장바구니에 담기",
  "store/product-customizer.required": "필수",
  "store/product-customizer.change-composition": "재료 또는 소스 변경",
  "store/product-customizer.per-unit": "단위당",
  "store/product-customizer.pick-size": "한 가지 크기 선택",
  "store/product-customizer.crust-title": "크러스트 하나 선택",
  "store/product-customizer.basic-toppings-title": "기본 구성요소",
  "store/product-customizer.recipes-title": "기본 구성요소",
  "store/product-customizer.toppings-title": "추가 구성요소",
  "store/product-customizer.buy-success": "제품이 장바구니에 추가되었습니다!",
  "store/product-customizer.add-failure": "문제가 발생하여 상품이 장바구니에 추가되지 않았습니다!",
  "store/product-customizer.add-assembly": "{name} 추가",
  "store/product-customizer.remove-assembly": "제거",
  "store/product-customizer.subscription": "구독",
  "store/product-customizer.subscription.frequency": "빈도수",
  "store/product-customizer.subscription.frequency.day": "{interval, plural, one {일} other {#일}}마다",
  "store/product-customizer.subscription.frequency.month": "{interval, plural, one {월} other {#월}}마다",
  "store/product-customizer.subscription.frequency.week": "{interval, plural, one {주} other {#주}}마다",
  "store/product-customizer.subscription.frequency.year": "{interval, plural, one {년} other {#년}}마다",
  "store/product-customizer.subscription.purchaseday": "구매일",
  "store/product-customizer.subscription.purchaseday.day": "월 {day, plural, =1{1번째} =2{2번째} =3{3번째} other {#번째}} 일",
  "store/product-customizer.modal-view.title": "{name} 맞춤 설정",
  "store/product-customizer.customize": "맞춤 설정",
  "store/product-customizer.modal-view.done-button": "끝"
}

```


[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 product-customizer/messages/da.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-customizer.selected-ingredients": "Dine ingredienser",
  "store/product-customizer.extra-ingredients": "Ekstra ingredienser",
  "store/product-customizer.select-your-ingredients": "Vælg dine ingredienser",
  "store/product-customizer.your-variation": "Din varevariant",
  "store/product-customizer.change-ingredients": "Skift ingredienser",
  "store/product-customizer.select-variation": "Vælg din variant",
  "store/product-customizer.add-to-cart": "Føj til kurv",
  "store/product-customizer.required": "påkrævet",
  "store/product-customizer.change-composition": "Skift ingredienser eller sauce",
  "store/product-customizer.per-unit": "per en.",
  "store/product-customizer.pick-size": "Vælg en størrelse",
  "store/product-customizer.crust-title": "Vælg en dej",
  "store/product-customizer.basic-toppings-title": "Basisingredienser",
  "store/product-customizer.recipes-title": "Basisingredienser",
  "store/product-customizer.toppings-title": "Ekstra ingredienser",
  "store/product-customizer.buy-success": "Dit produkt blev føjet til kurven!",
  "store/product-customizer.add-failure": "Der gik noget galt, og varen blev ikke føjet til din indkøbskurv!",
  "store/product-customizer.add-assembly": "Tilføj {name}",
  "store/product-customizer.remove-assembly": "Fjern",
  "store/product-customizer.subscription": "Abonnement",
  "store/product-customizer.subscription.frequency": "Hyppighed",
  "store/product-customizer.subscription.frequency.day": "Hver {interval, plural, one {dag} other {# dage}}",
  "store/product-customizer.subscription.frequency.month": "Hver {interval, plural, one {måned} other {# måneder}}",
  "store/product-customizer.subscription.frequency.week": "Hver {interval, plural, one {uge} other {# uger}}",
  "store/product-customizer.subscription.frequency.year": "Hvert {interval, plural, one {år} other  {# år}}",
  "store/product-customizer.subscription.purchaseday": "Købsdag",
  "store/product-customizer.subscription.purchaseday.day": "{day, plural, one {} =1{1} =2{2} =3{3} other {#.}} dag i måneden",
  "store/product-customizer.modal-view.title": "Tilpas dit {name}",
  "store/product-customizer.customize": "Tilpas",
  "store/product-customizer.modal-view.done-button": "Færdig"
}

```


[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 product-customizer/messages/es.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-customizer.selected-ingredients": "Sus ingredientes",
  "store/product-customizer.extra-ingredients": "Ingredientes adicionales",
  "store/product-customizer.select-your-ingredients": "Seleccione sus ingredientes",
  "store/product-customizer.your-variation": "Su variación de elementos",
  "store/product-customizer.change-ingredients": "cambiar los ingredientes",
  "store/product-customizer.select-variation": "Seleccione sus elementos",
  "store/product-customizer.add-to-cart": "Añadir al carrito",
  "store/product-customizer.required": "Obligatorio",
  "store/product-customizer.change-composition": "Cambiar los ingredientes o las salsas",
  "store/product-customizer.per-unit": "por un.",
  "store/product-customizer.pick-size": "Elige un tamaño",
  "store/product-customizer.crust-title": "Elija una corteza",
  "store/product-customizer.basic-toppings-title": "Ingredientes básicos",
  "store/product-customizer.recipes-title": "Ingredientes básicos",
  "store/product-customizer.toppings-title": "Ingredientes adicionales",
  "store/product-customizer.buy-success": "Su producto se ha agregado a la cesta!",
  "store/product-customizer.add-failure": "¡Algo salió mal y el artículo no se agregó a tu carrito!",
  "store/product-customizer.add-assembly": "Sumar {name}",
  "store/product-customizer.remove-assembly": "Eliminar",
  "store/product-customizer.subscription": "Suscripción",
  "store/product-customizer.subscription.frequency": "Frecuencia",
  "store/product-customizer.subscription.frequency.day": "Cada {interval, plural, one {# dia} other {# dias}}",
  "store/product-customizer.subscription.frequency.month": "Cada {interval, plural, one {# mes} other {# meses}}",
  "store/product-customizer.subscription.frequency.week": "Cada {interval, plural, one {# semana} other {# semanas}}",
  "store/product-customizer.subscription.frequency.year": "Cada {interval, plural, one {# año} other {# años}}",
  "store/product-customizer.subscription.purchaseday": "Día de facturación",
  "store/product-customizer.subscription.purchaseday.day": "{day}º dia del mes",
  "store/product-customizer.modal-view.title": "Personalizar {name}",
  "store/product-customizer.customize": "Personalizar",
  "store/product-customizer.modal-view.done-button": "Hecho"
}

```


[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 product-customizer/messages/ar.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-customizer.selected-ingredients": "مكوناتك",
  "store/product-customizer.extra-ingredients": "مكونات إضافية",
  "store/product-customizer.select-your-ingredients": "حدّد مكوناتك",
  "store/product-customizer.your-variation": "تنوع عنصرك",
  "store/product-customizer.change-ingredients": "تغيير المكونات",
  "store/product-customizer.select-variation": "اختر متغيراتك",
  "store/product-customizer.add-to-cart": "إضافة إلى العربة",
  "store/product-customizer.required": "مطلوب",
  "store/product-customizer.change-composition": "قم بتغيير المكونات أو الصلصة",
  "store/product-customizer.per-unit": "لكل وحدة.",
  "store/product-customizer.pick-size": "اختر حجمًا واحدًا",
  "store/product-customizer.crust-title": "اختر عجينة واحدة",
  "store/product-customizer.basic-toppings-title": "مكونات أساسية",
  "store/product-customizer.recipes-title": "مكونات أساسية",
  "store/product-customizer.toppings-title": "مكونات إضافية",
  "store/product-customizer.buy-success": "تمت إضافة منتجك إلى عربة التسوق!",
  "store/product-customizer.add-failure": "حدث خطأ ولم تتم إضافة العنصر إلى سلة التسوق الخاصة بك!",
  "store/product-customizer.add-assembly": "إضافة {name}",
  "store/product-customizer.remove-assembly": "حذف",
  "store/product-customizer.subscription": "الإشتراك",
  "store/product-customizer.subscription.frequency": "التردد",
  "store/product-customizer.subscription.frequency.day": "كل {interval, plural, one {يوم} other {# أيام}}",
  "store/product-customizer.subscription.frequency.month": "كل {interval, plural, one {شهر} other {# أشهر}}",
  "store/product-customizer.subscription.frequency.week": "كل {interval, plural, one {أسبوع} other {# أسابيع}}",
  "store/product-customizer.subscription.frequency.year": "كل {interval, plural, one {سنة} other {# سنوات}}",
  "store/product-customizer.subscription.purchaseday": "تاريخ الشراء",
  "store/product-customizer.subscription.purchaseday.day": "{day, plural, =1{أول} =2{ثاني} =3{ثالث} other {#th}} أيام الشهر",
  "store/product-customizer.modal-view.title": "خصّص {name} الخاص بك",
  "store/product-customizer.customize": "تخصيص",
  "store/product-customizer.modal-view.done-button": "تم"
}

```


[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 product-customizer/docs/README.md from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/product-customizer) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Product Customizer

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

The Product Customizer component can be used on the Product Details Page (PDP) to display [attachments](https://help.vtex.com/tutorial/o-que-e-um-anexo--aGICk0RVbqKg6GYmQcWUm) and/or a [subscription form](https://help.vtex.com/en/tutorial/how-subscriptions-work--frequentlyAskedQuestions_4453).

An attachment is the optional and cost-free customization of a product.

![attachment-product-customization-select](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-customizer-0.png) *Example of a PDP with the Product Customizer component displaying product attachments.*

Product subscriptions facilitate recurring sales by automatically scheduling the purchase of a specific product at the frequency requested by the customer.

![subscription-gif](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-customizer-1.gif) *Example of a PDP with the Product Customizer component displaying the product subscription.*

## Before you start

- If you plan to use the Product Customizer component to display **attachments**, make sure to [set up Assembly Options.](https://help.vtex.com/en/tutorial/assembly-options--5x5FhNr4f5RUGDEGWzV1nH)
- If you plan to use the Product Customizer component to display a **subscription form**, make sure to [set up Subscriptions.](https://help.vtex.com/tutorial/setting-up-subscription-v2--1FA9dfE7vJqxBna9Nft5Sj) The Product Customizer integration with the Subscription module is native and will be automatically enabled when subscription settings are detected.

## Configuring Product Customizer

1. Add the `product-customizer` app to your theme dependencies in the `manifest.json`. For example:

```diff
  dependencies: {
+   "vtex.product-customizer": "2.x"
 }
```

2. Add the `product-assembly-options` block as a child of the `store.product` template (PDP template). This is enough to enable the subscription form.

```diff
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "flex-layout.row#product-main",
      "flex-layout.row#description",
      "shelf.relatedProducts",
      "product-reviews",
      "product-questions-and-answers",
+     "product-assembly-options"
    ]
  },
 ```

3. Declare the [`product-assembly-options` props](#product-assembly-options-props) for your scenario.

### Displaying attachments (optional)

1. To display attachments of a product on the Product Detail Page (PDP), declare the `product-assembly-options` block and add the `assembly-option-input-values` block as its child.

```json
  "product-assembly-options": {
    "children": [
      "assembly-option-input-values"
    ]
  },
```

2. Use the blocks exported by the `product-customizer` app to create a solution that best suits your specific scenario.

| Block name                                  | Description                                                                                |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `assembly-option-item-image`                | Displays the attachment image.                                                                                |
| `assembly-option-item-quantity-selector`    | Displays a quantity selector.                                                                                |
| `assembly-option-item-name`                 | Displays the attachment name.                                                                                |
| `assembly-option-item-price`                | Displays the attachment price.                                                                                |
| `assembly-option-item-customize`            | Displays the `Customize` button. When clicked, it opens a modal that allows customers to customize the attachment. |
| `assembly-option-item-children-description` | Displays a summary with all selected attachments.                                                                  |

3. Declare the [props](#props) for the chosen blocks according to your scenario. For example:

```json
"product-assembly-options": {
 "props":{
   "initiallyOpened": "always"
  },
 "children": [
   "flex-layout.row#product-assembly-options",
   "assembly-option-input-values"
 ]
},
```

While building your solution, note that you can receive inputs from three types of [attachments](https://help.vtex.com/tutorial/adding-an-attachment?locale=en):

- **Predefined options**: Predefined attachment options set in the `Permitted Values` field. Set up the `optionsDisplay` prop from the `assembly-option-input-values` block to define how these options are displayed.
-  **Free text**: Text input. Depending on the value set in the **Maximum Number of Characters** field in the attachment settings, shoppers may or may not have a character limit for this attachment.
 -  **Boolean**: Boolean attachment options set in the `Permitted Values` field. Customers can select the attachment by clicking the checkbox.

Check the following example where the three attachment types are implemented:

![product-customizer-select](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-customizer-2.png)

Check out below how the product attachment displayed above was added to the Catalog:

![attachment-product-customizer](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-customizer-3.png)

When an attachment is set as **required**, all attachment options are automatically made available to consumers. On the other hand, if an attachment is **not required**, the `Add customization` button is rendered, as shown in the example above. This gives shoppers the option to add or not an attachment to their product.

Also, keep in mind that the **Checkout** does not natively display the customized product option selected by the customer. To display the product in the Checkout with the selected attachments, it is necessary to customize the Checkout page, allowing it to read and render product information.

## Props

### `product-assembly-options` props

| Prop name         | Type   | Description                                                                                | Default value |
| ----------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `initiallyOpened` | `enum` | Defines whether the customization box will be opened even if an attachment is not required (`always`) or if the customization box will be opened only if the attachment is required (`required`). | `required`    |

### `assembly-option-input-values` props

| Prop name        | Type   | Description                                                                                | Default value |
| ---------------- | ------ | --------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `optionsDisplay` | `enum` | Defines whether a checkbox (`box`) or a dropdown list (`select`) will be used to select the attachment pre-defined options. | `select`      |

### `assembly-option-item-customize`props

| Prop name     | Type     | Description                                                                                | Default value |
| ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `buttonProps` | `object` | Defines the behavior of the `Customize` button. In addition to the `collapse` prop, the `buttonProps` object can include child blocks to build the content of the modal triggered when the button is clicked. | `undefined`   |

- **`buttonProps` object:**

| Prop name  | Type   | Description                                                             | Default value |
| ---------- | ------ | ----------------------------------------------------------------------- | ------------- |
| `collapse` | `enum` | `Customize` button positioning. Possible values are: `left` or `right`. | `left`        |

## Customization

To apply CSS customizations to this and other blocks, please see the [Using CSS handles for store customization](https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS handles                                 |
| ------------------------------------------- |
| `booleanInputValue`                         |
| `inputValueOptionBox`                       |
| `itemContainer`                             |
| `modalViewDoneButton`                       |
| `modalViewProductContainer`                 |
| `modalViewProductImage`                     |
| `modalViewProductInfos`                     |
| `modalViewProductName`                      |
| `multipleItemQuantitySelector`              |
| `optionsInputValue`                         |
| `optionsInputValueDropdown`                 |
| `optionsInputValueLabel`                    |
| `optionsInputValueLabelContainer`           |
| `optionsInputValueOptionBoxContainer`       |
| `productAssemblyGroupName`                  |
| `productAssemblyGroupNameRow`               |
| `productAssemblyGroupRequiredTag`           |
| `productAssemblyOptionItemCustomize`        |
| `productAssemblyOptionItemCustomize__label` |
| `productAssemblyOptionItemImage`            |
| `productAssemblyOptionItemName`             |
| `textInputValue`                            |

<!-- DOCS-IGNORE:start -->

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/leoWorkingGood"><img src="https://avatars2.githubusercontent.com/u/51805410?v=4" width="100px;" alt=""/><br /><sub><b>leoWorkingGood</b></sub></a><br /><a href="https://github.com/vtex-apps/product-customizer/commits?author=leoWorkingGood" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

<!-- DOCS-IGNORE:end -->

```


[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 product-customizer/react/ProductAssemblyOptions.tsx from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, Fragment } from 'react'

import useAssemblyOptions from './modules/useAssemblyOptions'
import ProductAssemblyOptionsGroup from './components/ProductAssemblyOptions/ProductAssemblyOptionsGroup'
import { ProductAssemblyGroupContextProvider } from './components/ProductAssemblyContext/Group'

interface Props {
  initiallyOpened?: 'always' | 'required'
}

const ProductAssemblyOptions: FC<Props> = ({
  children,
  initiallyOpened = 'required',
}) => {
  const assemblyOptions = useAssemblyOptions()

  if (!assemblyOptions) {
    return null
  }

  return (
    <Fragment>
      {Object.keys(assemblyOptions).map((assemblyOptionId) => (
        <ProductAssemblyGroupContextProvider
          key={assemblyOptionId}
          initiallyOpened={initiallyOpened}
          assemblyOption={assemblyOptions[assemblyOptionId]}
        >
          <ProductAssemblyOptionsGroup initiallyOpened={initiallyOpened}>
            {children}
          </ProductAssemblyOptionsGroup>
        </ProductAssemblyGroupContextProvider>
      ))}
    </Fragment>
  )
}

export default ProductAssemblyOptions

```


[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 product-customizer/react/ProductAssemblyOptionItemImage.tsx from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import Image from './components/ProductAssemblyOptions/ProductAssemblyOptionItemImage'

export default Image

```


[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 product-customizer/react/global.css from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```css
@media screen and (min-width: 40em) {
  .vtex-product-customizer__options {
    background-color: transparent;
  }
}

.vtex-product-customizer {
  padding-bottom: 140px;
}

.vtex-product-customizer__actions .vtex-button {
  width: 100%;
}

.vtex-product-customizer__actions .actions--change-toppings .vtex-button {
  padding: 0;
  text-align: left;
}

.vtex-product-customizer__single-choice .single-choice__image-container {
  color: #1346d8;
  max-width: 72px;
  position: relative;
}

.single-choice__description {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
  overflow: hidden;
}

.vtex-product-customizer__single-choice.selected .single-choice__image-container .single-choice__icon-container {
  display: block;
}

.vtex-product-customizer__single-choice.selected .single-choice__image-container .vtex__icon-success {
  right: 5px;
  bottom: 10px;
  position: absolute;
}

.vtex-product-customizer__single-choice.selected .single-choice__image-container img {
  width: 100%;
}

/* Fixes gap when modal has a fixed positioned element inside, makes it feel like a new view on mobile */
div.vtex-modal__overlay {
  padding: 0;
}

.vtex-modal__overlay .vtex-modal__modal {
  padding: 2rem 1rem 0 !important; /* sorry, element has inline styles */
}

/* Add to cart button */
.vtex-product-customizer__change-ingredients + .actions--add-to-cart {
  position: sticky;
}

.actions--add-to-cart .vtex-price-selling {
  color: white;
}

/* Quantity selector */
.multiple-choice__actions input {
  width: 2.5rem;
}
.multiple-choice__actions button {
  background: transparent;
  width: 1.75rem !important; /* inline styles so important is needed */
}
.multiple-choice__price .vtex-price-selling {
  padding: 0;
}
.multiple-choice__actions button.o-0 {
  opacity: .2;
}

.vtex-product-customizer__image {
  object-fit: cover;
}
```


[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 product-customizer/react/ProductAssemblyOptionItemPrice.tsx from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import ProductAssemblyOptionItemPrice from './components/ProductAssemblyOptions/ProductAssemblyOptionItemPrice'

export default ProductAssemblyOptionItemPrice

```


[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 product-customizer/react/index.js from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```javascript
/* eslint-disable react/jsx-filename-extension */
import React, { Component } from 'react'
import { Spinner } from 'vtex.styleguide'
import { path } from 'ramda'
import { ExtensionPoint } from 'vtex.render-runtime'

import ProductCustomizerContainer from './components/Product/ProductCustomizerContainer'

class ProductCustomizerIndex extends Component {
  hasAttachments = () => {
    const metadataItems = path(
      ['product', 'itemMetadata', 'items'],
      this.props.productQuery
    )

    if (!metadataItems) {
      return false
    }

    return metadataItems.some(
      ({ assemblyOptions }) => assemblyOptions && assemblyOptions.length > 0
    )
  }

  render() {
    const {
      productQuery: { loading },
    } = this.props

    if (loading)
      return (
        <div className="flex justify-center pa8 w-100">
          <Spinner />
        </div>
      )

    if (this.hasAttachments()) {
      return <ProductCustomizerContainer {...this.props} />
    }

    return <ExtensionPoint id="product-details" {...this.props} />
  }
}

export default ProductCustomizerIndex

```


[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 product-customizer/react/ProductAssemblyOptionItemQuantity.tsx from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import ProductAssemblyOptionItemQuantity from './components/ProductAssemblyOptions/ProductAssemblyOptionItemQuantity'

export default ProductAssemblyOptionItemQuantity

```


[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 product-customizer/react/ProductAssemblyOptionItemCustomize.tsx from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import ProductAssemblyOptionItemCustomize from './components/ProductAssemblyOptions/ProductAssemblyOptionItemCustomize'

export default ProductAssemblyOptionItemCustomize

```


[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 product-customizer/react/ProductAssemblyOptionItemName.tsx from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import Name from './components/ProductAssemblyOptions/ProductAssemblyOptionItemName'

export default Name

```


[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 product-customizer/react/package.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "private": true,
  "jest": {
    "setupFilesAfterEnv": "./setupTests.js"
  },
  "scripts": {
    "lint": "eslint --ext ts,tsx,js,jsx .",
    "lint:fix": "eslint --fix --ext ts,tsx,js,jsx .",
    "pretest": "yarn",
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "classnames": "^2.2.6",
    "graphql": "^14.6.0",
    "ramda": "^0.26.1",
    "react": "^16.9.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.9.0",
    "react-intl": "^4.2.2",
    "slugify": "^1.3.5",
    "smoothscroll-polyfill": "^0.4.3"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/classnames": "^2.2.9",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.3",
    "@types/ramda": "^0.26.18",
    "@types/react": "^16.9.25",
    "@types/react-intl": "^3.0.0",
    "@vtex/styleguide": "^9.78.10",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "typescript": "3.9.7",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
    "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.6/public/@types/vtex.device-detector",
    "vtex.flex-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.flex-layout@0.16.0/public/@types/vtex.flex-layout",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.7.5/public/@types/vtex.native-types",
    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.9.7/public/@types/vtex.product-context",
    "vtex.product-details": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-details@1.19.10/public/_types/react",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.11/public/@types/vtex.render-runtime",
    "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.141.2/public/@types/vtex.store-components",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.135.3/public/@types/vtex.styleguide"
  },
  "version": "2.12.4"
}

```


[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 product-customizer/react/ProductAssemblyOptionInputValues.tsx from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import ProductAssemblyOptionInputValues from './components/ProductAssemblyOptions/ProductAssemblyOptionInputValues'

export default ProductAssemblyOptionInputValues

```


[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 product-customizer/react/setupTests.js from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```javascript
// Necessary, otherwise vtex.styleguide break our tests
Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
})

```


[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 product-customizer/react/ProductAssemblyOptionItemChildrenDescription.tsx from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import ProductAssemblyOptionItemChildrenDescription from './components/ProductAssemblyOptions/ProductAssemblyOptionItemChildrenDescription'

export default ProductAssemblyOptionItemChildrenDescription

```


[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 product-customizer/store/blocks.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-details.customizer": {
    "blocks": [
      "product-details",
      "product-name",
      "product-images",
      "product-price",
      "product-description",
      "buy-button",
      "sku-selector",
      "shipping-simulator",
      "availability-subscriber",
      "product-specifications"
    ]
  }
}
```


[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 product-customizer/store/interfaces.json from the product-customizer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-details.customizer": {
    "allowed": ["product-details"],
    "required": [
      "product-name",
      "product-images",
      "product-price",
      "product-description",
      "buy-button",
      "sku-selector",
      "shipping-simulator",
      "availability-subscriber",
      "product-specifications"
    ],
    "component": "index"
  },
  "product-assembly-options": {
    "component": "ProductAssemblyOptions",
    "composition": "children",
    "allowed": [
      "flex-layout",
      "assembly-option-input-values",
      "assembly-option-item-image",
      "assembly-option-item-quantity-selector",
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-customize",
      "assembly-option-item-children-description"
    ]
  },
  "assembly-option-item-image": {
    "component": "ProductAssemblyOptionItemImage"
  },
  "assembly-option-item-quantity-selector": {
    "component": "ProductAssemblyOptionItemQuantity"
  },
  "assembly-option-item-name": {
    "component": "ProductAssemblyOptionItemName"
  },
  "assembly-option-item-price": {
    "component": "ProductAssemblyOptionItemPrice"
  },
  "assembly-option-item-customize": {
    "component": "ProductAssemblyOptionItemCustomize",
    "composition": "children",
    "allowed": [
      "flex-layout",
      "assembly-option-item-image",
      "assembly-option-item-quantity-selector",
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-customize",
      "assembly-option-item-children-description"
    ]
  },
  "assembly-option-item-children-description": {
    "component": "ProductAssemblyOptionItemChildrenDescription"
  },
  "assembly-option-input-values": {
    "component": "ProductAssemblyOptionInputValues"
  }
}

```