[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 order-details/messages/it.json from the order-details VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/common.header.counter": "Contatore per consegne e/o ritiri multipli",
  "store/items.attachments.subscription": "Abbonamento",
  "store/items.attachments.subscription.frequency.day": "Ogni {frequencyNumber, plural, one {# giorno} other {# giorni}}",
  "store/items.attachments.subscription.frequency.month": "Ogni {frequencyNumber, plural, one {# mese} other {# mesi}}",
  "store/items.attachments.subscription.frequency.week": "Ogni {frequencyNumber, plural, one {# settimana} other {# settimane}}",
  "store/items.attachments.subscription.frequency.year": "Ogni {frequencyNumber, plural, one {# anno} other {# anni}}",
  "store/items.attachments.subscription.purchaseday": "Addebitato mensilmente il giorno {purchaseday}",
  "store/order.header.cancel.button": "Annulla l'ordine",
  "store/order.header.date": "Effettuato il giorno {orderDate} alle ore {orderTime}",
  "store/order.header.myorders.button": "I miei ordini",
  "store/order.header.number": "Ordine #{orderId}",
  "store/order.header.receipt": "Visualizza la ricevuta",
  "store/order.header.seller": "Venduto e consegnato da {seller}",
  "store/order.header.takeaway.cancel.button": "Annulla l'acquisto",
  "store/order.header.takeaway.printreceipt.button": "Stampa nuovamente la ricevuta",
  "store/order.header.update.button": "Aggiorna l'ordine",
  "store/order.split.n.pickup.n.takeaway": "Abbiamo diviso il tuo ordine in {deliveries} consegne,{pickups, plural, one {, ritiro presso il negozio} other {, # ritiri presso i negozi}}{takeaways, plural, one {e un prodotto take away} other {e # prodotti take away}}. In questo modo riceverai più rapidamente gli articoli che si trovano vicino a te.",
  "store/order.split.n.pickup.no.takeaway": "Abbiamo diviso il tuo ordine in {deliveries} consegne{pickups, plural, one {e un ritiro presso il negozio} other {e # ritiri presso il negozio}}. In questo modo riceverai più rapidamente gli articoli che si trovano vicino a te.",
  "store/order.split.no.pickup.n.takeaway": "Abbiamo diviso il tuo ordine in {deliveries} consegne{takeaways, plural, one {e un prodotto take away} other {e # prodotti take away}}. In questo modo riceverai più rapidamente gli articoli che si trovano nelle tue vicinanze.",
  "store/order.split.no.pickup.no.takeaway": "Abbiamo diviso il tuo ordine in {deliveries} consegne. In questo modo riceverai più rapidamente gli articoli che si trovano nelle tue vicinanze.",
  "store/order.totals.delivery": "Consegna",
  "store/order.totals.pickup": "Ritiro",
  "store/order.totals.pickup.free": "Gratis",
  "store/order.totals.subtotal": "Subtotale ({numItems, plural, one {# item} other {# items}})",
  "store/order.totals.total": "Totale",
  "store/payments.bankinvoice.print": "Apri {paymentSystemName}",
  "store/payments.creditcard": "Carta di credito",
  "store/payments.creditcard.lastDigits": "Ultime cifre: {lastDigits}",
  "store/payments.debitcard": "Carta di debito",
  "store/payments.giftCard": "Buono regalo",
  "store/payments.id": "ID pagamento: {id}",
  "store/payments.installments": "({installments}x)",
  "store/payments.transaction.id": "ID transazione: {id}",
  "store/pickup.header.title": "Ritiro",
  "store/products.quantity": "{quantity, plural, one {# unità} other {# unità}}",
  "store/shipping.header.title": "Consegna",
  "store/shipping.header.wishlist.address": "Indirizzo di: {giftRegistryName}"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/common.header.counter": "Contor pentru livrări și/sau ridicări multiple",
  "store/items.attachments.subscription": "Abonament",
  "store/items.attachments.subscription.frequency.day": "La fiecare {frequencyNumber, plural, one {# zi} other {# zile}}",
  "store/items.attachments.subscription.frequency.month": "La fiecare {frequencyNumber, plural, one {# lună} other {# luni}}",
  "store/items.attachments.subscription.frequency.week": "La fiecare {frequencyNumber, plural, one {# săptămână} other {# săptămâni}}",
  "store/items.attachments.subscription.frequency.year": "La fiecare {frequencyNumber, plural, one {# year} other {# ani}}",
  "store/items.attachments.subscription.purchaseday": "Facturare lunară în ziua {purchaseday}",
  "store/order.header.cancel.button": "Anulare comandă",
  "store/order.header.date": "Plasată la data de {orderDate} la {orderTime}",
  "store/order.header.myorders.button": "Comenzile mele",
  "store/order.header.number": "Comanda #{orderId}",
  "store/order.header.receipt": "Vizualizare chitanță",
  "store/order.header.seller": "Vândut și livrat de {seller}",
  "store/order.header.takeaway.cancel.button": "Anulare achiziție",
  "store/order.header.takeaway.printreceipt.button": "Re-imprimare chitanță",
  "store/order.header.update.button": "Actualizare comandă",
  "store/order.split.n.pickup.n.takeaway": "Am împărțit comanda ta în {deliveries} livrări,{pickups, plural, one {, o ridicare din magazin} other {, # ridicări din magazin}}{takeaways, plural, one {și un produs la pachet} other {și# produse la pachet}}. În felul acesta, vei primi articolele care sunt disponibile mai repede.",
  "store/order.split.n.pickup.no.takeaway": "Am împărțit comanda ta în {deliveries} livrări,{pickups, plural, one {, și o ridicare din magazin} other {și # ridicări din magazin}}. În felul acesta, vei primi articolele care sunt disponibile mai repede.",
  "store/order.split.no.pickup.n.takeaway": "Am împărțit comanda ta în {deliveries} livrări,{takeaways, plural, one {și un produs la pachet} other {și # produse la pachet}}. În felul acesta, vei primi articolele care sunt disponibile mai repede.",
  "store/order.split.no.pickup.no.takeaway": "Am împărțit comanda ta în {deliveries} livrări. În felul acesta, vei primi articolele care sunt disponibile mai repede.",
  "store/order.totals.delivery": "Livrare",
  "store/order.totals.pickup": "Ridică",
  "store/order.totals.pickup.free": "Gratuit",
  "store/order.totals.subtotal": "Subtotal ({numItems, plural, one {# articol} few {# articole} other {# articole}})",
  "store/order.totals.total": "Total",
  "store/payments.bankinvoice.print": "Deschis {paymentSystemName}",
  "store/payments.creditcard": "Card credit",
  "store/payments.promissory": "Plata ramburs",
  "store/payments.creditcard.lastDigits": "Ultimele caractere: {lastDigits}",
  "store/payments.debitcard": "Card debit",
  "store/payments.giftCard": "Card cadou",
  "store/payments.id": "ID plată: {id}",
  "store/payments.installments": "({installments}x)",
  "store/payments.transaction.id": "ID tranzacție: {id}",
  "store/pickup.header.title": "Ridică",
  "store/products.quantity": "{quantity, plural, one {# unitate} other {# unități}}",
  "store/shipping.header.title": "Livrare",
  "store/shipping.header.wishlist.address": "Adresa din: {giftRegistryName}"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/common.header.counter": "여러 배송 및/또는 픽업 카운터",
  "store/items.attachments.subscription": "구독",
  "store/items.attachments.subscription.frequency.day": "{frequencyNumber, plural, one {# 일} other {# 일}}마다",
  "store/items.attachments.subscription.frequency.month": "{frequencyNumber, plural, one {#월} other {#월}}마다",
  "store/items.attachments.subscription.frequency.week": "{frequencyNumber, plural, one {# 주} other {# 주}}마다",
  "store/items.attachments.subscription.frequency.year": "{frequencyNumber, plural, one {#년} other {#년}}마다",
  "store/items.attachments.subscription.purchaseday": "매달 {purchaseday}일에 결제",
  "store/order.header.cancel.button": "주문 취소",
  "store/order.header.date": "{orderDate}일 {orderTime}시에 주문",
  "store/order.header.myorders.button": "내 주문",
  "store/order.header.number": "주문 #{orderId}",
  "store/order.header.receipt": "영수증 보기",
  "store/order.header.seller": "{seller}가 판매 및 배송",
  "store/order.header.takeaway.cancel.button": "구매 취소",
  "store/order.header.takeaway.printreceipt.button": "영수증 재인쇄",
  "store/order.header.update.button": "주문 업데이트",
  "store/order.split.n.pickup.n.takeaway": "귀하의 주문을 {deliveries} 배달,{pickups, plural, one {, 매장 한 개 픽업} other {, 매장 #개 픽업 }}{takeaways, plural, one {테이크아웃 제품 한 개} other {그리고 테이크아웃 제품 #개}}로 나누었습니다. 때문에 귀하와 가까운 곳에 있는 품목을 더 빠르게 받아보실 수 있습니다.",
  "store/order.split.n.pickup.no.takeaway": "귀하의 주문을 {deliveries} 배달{pickups, plural, one {그리고 매장 한 개 픽업} other {그리고 매장 #개 픽업}}으로 나누었습니다. 때문에 귀하와 가까운 곳에 있는 품목을 더 빠르게 받아보실 수 있습니다.",
  "store/order.split.no.pickup.n.takeaway": "귀하의 주문을 {deliveries} 배달{takeaways, plural, one {테이크아웃 제품 한 개} other {그리고 테이크아웃 제품 #개}}로 나누었습니다. 때문에 귀하와 가까운 곳에 있는 품목을 더 빠르게 받아보실 수 있습니다.",
  "store/order.split.no.pickup.no.takeaway": "귀하의 주문을 {deliveries} 배달로 나누었습니다. 때문에 귀하와 가까운 곳에 있는 품목을 더 빠르게 받아보실 수 있습니다.",
  "store/order.totals.delivery": "배달",
  "store/order.totals.pickup": "픽업",
  "store/order.totals.pickup.free": "무료",
  "store/order.totals.subtotal": "소계 ({numItems, plural, one {# 품목} other {# 품목}})",
  "store/order.totals.total": "총액",
  "store/payments.bankinvoice.print": "{paymentSystemName} 열기",
  "store/payments.creditcard": "신용 카드",
  "store/payments.creditcard.lastDigits": "마지막 자릿수: {lastDigits}",
  "store/payments.debitcard": "데빗 카드",
  "store/payments.giftCard": "기프트 카드",
  "store/payments.id": "결제 ID: {id}",
  "store/payments.installments": "({installments}x)",
  "store/payments.transaction.id": "거래 ID: {id}",
  "store/pickup.header.title": "픽업",
  "store/products.quantity": "{quantity, plural, one {#유니티} other {#개의 유니티}}",
  "store/shipping.header.title": "배달",
  "store/shipping.header.wishlist.address": "보내는 곳 주소: {giftRegistryName}"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/common.header.counter": "Tæller til flere leverancer og / eller afhentninger",
  "store/items.attachments.subscription": "Abonnement",
  "store/items.attachments.subscription.frequency.day": "Hver {frequencyNumber, plural, one {# dag} other {# dage}}",
  "store/items.attachments.subscription.frequency.month": "Hver {frequencyNumber, plural, one {# måned} other {# måneder}}",
  "store/items.attachments.subscription.frequency.week": "Hver {frequencyNumber, plural, one {# uge} other {# uger}}",
  "store/items.attachments.subscription.frequency.year": "Hver {frequencyNumber, plural, one {# år} other {# år}}",
  "store/items.attachments.subscription.purchaseday": "Opkræves månedligt på dag {purchaseday}",
  "store/order.header.cancel.button": "Annuller ordre",
  "store/order.header.date": "Placeret den {orderDate} kl {orderTime}",
  "store/order.header.myorders.button": "Mine ordrer",
  "store/order.header.number": "Ordre #{orderId}",
  "store/order.header.receipt": "Vis kvittering",
  "store/order.header.seller": "Solgt og leveret af {seller}",
  "store/order.header.takeaway.cancel.button": "Annuller køb",
  "store/order.header.takeaway.printreceipt.button": "Udskriv kvittering igen",
  "store/order.header.update.button": "Opdater ordre",
  "store/order.split.n.pickup.n.takeaway": "Vi deler din ordre i {deliveries} leveringer,{pickups, plural, one {, en butiksafhentning} other {, # store pickups}}{takeaways, plural, one {og et takeaway-produkt} other {og # takeaway-produkter}}. På den måde vil du modtage varer, der er tættere på dig hurtigere.",
  "store/order.split.n.pickup.no.takeaway": "Vi deler din ordre i {deliveries} leveringer{pickups, plural, one {og en butiksafhentning} other {og # butiksafhentninger}}. På den måde vil du modtage varer, der er tættere på dig hurtigere.",
  "store/order.split.no.pickup.n.takeaway": "Vi deler din ordre i {deliveries} leveringer{takeaways, plural, one {og et produkt som takeaway} other {og # produkter til takeaway}}. På den måde vil du modtage varer, der er tættere på dig hurtigere.",
  "store/order.split.no.pickup.no.takeaway": "Vi deler din ordre i {deliveries} leveringer. That way, you will receive items that are closer to you faster.",
  "store/order.totals.delivery": "Levering",
  "store/order.totals.pickup": "Afhent",
  "store/order.totals.pickup.free": "Gratis",
  "store/order.totals.subtotal": "Subtotal ({numItems, plural, one {# vare} other {# varer}})",
  "store/order.totals.total": "I alt",
  "store/payments.bankinvoice.print": "Åben {paymentSystemName}",
  "store/payments.creditcard": "Kreditkort",
  "store/payments.creditcard.lastDigits": "Sidste cifre {lastDigits}",
  "store/payments.debitcard": "Debit card",
  "store/payments.giftCard": "Gavekort",
  "store/payments.id": "BetalingsID: {id}",
  "store/payments.installments": "({installments}x)",
  "store/payments.transaction.id": "TransaktionsID: {id}",
  "store/pickup.header.title": "Afhent",
  "store/products.quantity": "{quantity, plural, one {# enhed} other {# enheder}}",
  "store/shipping.header.title": "Levering",
  "store/shipping.header.wishlist.address": "Adresse fra: {giftRegistryName}"
}

```


[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 order-details/messages/sv.json from the order-details VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/common.header.counter": "Hanteringssätt för multipla leveranser och/eller upphämtningar",
  "store/items.attachments.subscription": "Prenumeration",
  "store/items.attachments.subscription.frequency.day": "Varje {frequencyNumber, plural, one {# dag} other {# dagar}}",
  "store/items.attachments.subscription.frequency.month": "Varje {frequencyNumber, plural, one {# månad} other {# månader}}\n",
  "store/items.attachments.subscription.frequency.week": "Varje {frequencyNumber, plural, one {# vecka} other {# veckor}}\n",
  "store/items.attachments.subscription.frequency.year": "Varje {frequencyNumber, plural, one {# år} other {# år}}\n",
  "store/items.attachments.subscription.purchaseday": "Debiteras varje månad på dagen {purchaseday}",
  "store/order.header.cancel.button": "Avbryt beställning",
  "store/order.header.date": "Placerad på {orderDate} vid {orderTime}",
  "store/order.header.myorders.button": "Mina beställningar",
  "store/order.header.number": "Beställning #{orderId}",
  "store/order.header.receipt": "Visa mottagande",
  "store/order.header.seller": "Såld och levererad av {seller}",
  "store/order.header.takeaway.cancel.button": "Avbryt köp",
  "store/order.header.takeaway.printreceipt.button": "Skriv ut kvittot igen",
  "store/order.header.update.button": "Uppdatera beställning",
  "store/order.split.n.pickup.n.takeaway": "Vi delar upp din beställning I {deliveries} leveranser{pickups, plural, one {och en produkt att hämta} other {och # produkter att hämta}}. På så sätt kommer du att få artiklar som är närmare dig snabbare.",
  "store/order.split.n.pickup.no.takeaway": "Vi delar upp din beställning I {deliveries} leveranser{pickups, plural, one {och en produkt att hämta} other {och # produkter att hämta}}. På så sätt kommer du att få artiklar som är närmare dig snabbare.",
  "store/order.split.no.pickup.n.takeaway": "Vi delar upp din beställning I {deliveries} leveranser{takeaways, plural, one {och en produkt att hämta} other {och # produkter att hämta}}. På så sätt kommer du att få artiklar som är närmare dig snabbare.",
  "store/order.split.no.pickup.no.takeaway": "Vi delar upp din beställning i {deliveries} leveranser. På så sätt kommer du att få artiklar som är närmare dig snabbare.",
  "store/order.totals.delivery": "Leverans",
  "store/order.totals.pickup": "Hämta",
  "store/order.totals.pickup.free": "Gratis",
  "store/order.totals.subtotal": "Delsumma ({numItems, plural, one {# artikel} other {# artiklar}})",
  "store/order.totals.total": "Totalt",
  "store/payments.bankinvoice.print": "Öppen {paymentSystemName}",
  "store/payments.creditcard": "Kreditkort",
  "store/payments.creditcard.lastDigits": "Sista siffrorna: {lastDigits}",
  "store/payments.debitcard": "Kreditkort",
  "store/payments.giftCard": "Presentkort",
  "store/payments.id": "Betalnings ID: {id}",
  "store/payments.installments": "({installments}x)",
  "store/payments.transaction.id": "Transaktions ID: {id}",
  "store/pickup.header.title": "Hämta",
  "store/products.quantity": "{quantity, plural, one {# unity} other {# unities}}",
  "store/shipping.header.title": "Leverans",
  "store/shipping.header.wishlist.address": "Adress från: {giftRegistryName}"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/common.header.counter": "Contador de múltiples entregas y/o recogidas",
  "store/items.attachments.subscription": "Suscripción",
  "store/items.attachments.subscription.frequency.day": "{frequencyNumber, plural, one {Diario} other {Cada # días}}",
  "store/items.attachments.subscription.frequency.month": "{frequencyNumber, plural, one {Mensual} other {Cada # meses}}",
  "store/items.attachments.subscription.frequency.week": "{frequencyNumber, plural, one {Semanal} other {Cada # semanas}}",
  "store/items.attachments.subscription.frequency.year": "{frequencyNumber, plural, one {Anual} other {Cada # años}}",
  "store/items.attachments.subscription.purchaseday": "Cobrado mensualmente el día {purchaseday}",
  "store/order.header.cancel.button": "Cancelar pedido",
  "store/order.header.date": "Realizado el {orderDate} a las {orderTime}",
  "store/order.header.myorders.button": "Mis pedidos",
  "store/order.header.number": "Pedido #{orderId}",
  "store/order.header.receipt": "Ver recibo",
  "store/order.header.seller": "Vendido y entregado por {seller}",
  "store/order.header.takeaway.cancel.button": "Cancelar compra",
  "store/order.header.takeaway.printreceipt.button": "Reimprimir recibo",
  "store/order.header.update.button": "Actualizar pedido",
  "store/order.split.n.pickup.n.takeaway": "Dividimos tu pedido en {deliveries} envíos{pickups, plural, one {, # recogida en tienda} other {, # recogidas en tienda}}{takeaways, plural, one { y # producto para llevar ahora} other { y # productos para llevar ahora}}. Así recibirás los ítems que están más cerca de ti más rápido.",
  "store/order.split.n.pickup.no.takeaway": "Dividimos tu pedido en {deliveries} envíos{pickups, plural, one { y # recogida en tienda} other { y # recogidas en tienda}}. Así recibirás los ítems que están más cerca de ti más rápido.",
  "store/order.split.no.pickup.n.takeaway": "Dividimos tu pedido en {deliveries} envíos{takeaways, plural, one { y # producto para llevar ahora} other { y # productos para llevar ahora}}. Así recibirás los ítems que están más cerca de ti más rápido.",
  "store/order.split.no.pickup.no.takeaway": "Dividimos tu pedido en {deliveries} envíos. Así recibirás los ítems que están más cerca de ti más rápido.",
  "store/order.totals.delivery": "Envío",
  "store/order.totals.pickup": "Recogida",
  "store/order.totals.pickup.free": "Gratis",
  "store/order.totals.subtotal": "Subtotal ({numItems, plural, one {# ítem} other {# ítems}})",
  "store/order.totals.total": "Total",
  "store/payments.bankinvoice.print": "Abrir {paymentSystemName}",
  "store/payments.creditcard": "Tarjeta de crédito",
  "store/payments.promissory": "Pagaré",
  "store/payments.creditcard.lastDigits": "Últimos dígitos: {lastDigits}",
  "store/payments.debitcard": "Tarjeta de débito",
  "store/payments.giftCard": "Tarjeta de regalo",
  "store/payments.id": "ID de pago: {id}",
  "store/payments.installments": "(paga en {installments})",
  "store/payments.transaction.id": "ID de transacción: {id}",
  "store/pickup.header.title": "Recogida",
  "store/products.quantity": "{quantity, plural, one {# unidad} other {# unidades}}",
  "store/shipping.header.title": "Envío",
  "store/shipping.header.wishlist.address": "Dirección de: {giftRegistryName}"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/common.header.counter": "عداد لعمليات التسليم و/أو الإستلام المتعددة",
  "store/items.attachments.subscription": "الإشتراك",
  "store/items.attachments.subscription.frequency.day": "كل {frequencyNumber, plural, one {# يوم} other {# أيام}}",
  "store/items.attachments.subscription.frequency.month": "كل {frequencyNumber, plural, one {# شهر} other {# أشهر}}",
  "store/items.attachments.subscription.frequency.week": "كل {frequencyNumber, plural, one {# أسبوع} other {# أسابيع}}",
  "store/items.attachments.subscription.frequency.year": "كل {frequencyNumber, plural, one {# سنة} other {# سنوات}}",
  "store/items.attachments.subscription.purchaseday": "يتم تحصيل الرسوم شهريًا يوم {purchaseday}",
  "store/order.header.cancel.button": "إلغاء الطلب",
  "store/order.header.date": "تم بتاريخ {orderDate} على الساعة {orderTime}",
  "store/order.header.myorders.button": "طلباتي",
  "store/order.header.number": "الطلب #{orderId}",
  "store/order.header.receipt": "عرض الايصال",
  "store/order.header.seller": "تم البيع والتسليم بواسطة {seller}",
  "store/order.header.takeaway.cancel.button": "إلغاء عملية الشراء",
  "store/order.header.takeaway.printreceipt.button": "إعادة طباعة الايصال",
  "store/order.header.update.button": "تحديث الطلب",
  "store/order.split.n.pickup.n.takeaway": "نقسم طلبك إلى {deliveries} عمليات تسليم،{pickups, plural, one {، استلام من متجر واحد} other {، # استلامات من المتجر}}{takeaways, plural, one {ومنتج لأخذه بعيدًا} other {و # منتجات لأخذها بعيدًا}}. بهذه الطريقة، ستتلقى العناصر الأقرب إليك بشكل أسرع.",
  "store/order.split.n.pickup.no.takeaway": "نقسم طلبك إلى {deliveries} عمليات تسليم،{pickups, plural, one {، واستلام من متجر} other {و # استلامات من المتجر}}. بهذه الطريقة، ستتلقى العناصر الأقرب إليك بشكل أسرع.",
  "store/order.split.no.pickup.n.takeaway": "نقسم طلبك إلى {deliveries} عمليات تسليم،{takeaways, plural, one {، ومنتج لأخذه بعيدًا} other {و # منتجات لأخذها بعيدًا}}. بهذه الطريقة، ستتلقى العناصر الأقرب إليك بشكل أسرع.",
  "store/order.split.no.pickup.no.takeaway": "نقسم طلبك إلى {deliveries} عمليات تسليم. بهذه الطريقة، ستتلقى العناصر الأقرب إليك بشكل أسرع.",
  "store/order.totals.delivery": "التسليم",
  "store/order.totals.pickup": "الإستلام",
  "store/order.totals.pickup.free": "مجانًا",
  "store/order.totals.subtotal": "المجموع الفرعي ({numItems, plural, one {# عنصر} other {# عناصر}})",
  "store/order.totals.total": "المجموع",
  "store/payments.bankinvoice.print": "فتح {paymentSystemName}",
  "store/payments.creditcard": "بطاقة الإئتمان",
  "store/payments.creditcard.lastDigits": "آخر الأرقام: {lastDigits}",
  "store/payments.debitcard": "بطاقة الخصم",
  "store/payments.giftCard": "بطاقة هدايا",
  "store/payments.id": "معرّف الدفع: {id}",
  "store/payments.installments": "({installments}x)",
  "store/payments.transaction.id": "معرّف المعاملة: {id}",
  "store/pickup.header.title": "الإستلام",
  "store/products.quantity": "{quantity, plural, one {# وحدة} other {# وحدات}}",
  "store/shipping.header.title": "التسليم",
  "store/shipping.header.wishlist.address": "العنوان من: {giftRegistryName}"
}

```


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

[Assistant]
Here's the implementation:

```markdown
# OrderDetails
<!-- 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 -->

This repository constains a few React components that are mainly used by
OrderPlaced and MyOrders to display information about orders.

In order to use the components exported by OrderDetails, you must include in your `manifest.json` file:

```json
"dependencies": {
  "vtex.order-details": "1.x",
},
```

## Exported components

### Address

This a wrapper for the `<AddressRules/>` component from `vtex.address-form` that renders a formated address. It's props are defined by the interface:

```typescript
interface Props {
  address: Address;
  pickup?: Parcel;
}
```

The `Parcel` type comes from `vtex.delivery-packages`, and the `Address` component uses the attribute:

```typescript
interface Parcel {
  ...
  pickupFriendlyName: string | null;
  ...
}
```

### Attachment and Subscription

This `Attachment` component is used for rendering attachments to `OrderItems`. It's props are defined by:

```typescript
interface Props {
  attachmentsInfo: Attachment[];
  bundleInfo: Bundle[];
  currency: string;
}

interface Bundle {
  id: string;
  attachments: Attachment[];
  name: string;
  price: number;
  quantity: number;
  imageUrl: string | null;
  measurementUnit: string;
  unitMultiplier: number;
}

interface Attachment {
  content: any;
  name: string;
}
```

The `Subscription` component is just a customized version to use when the `OrderItem` has an `Attachment` that is a subscription. It's props are different and defined by:

```typescript
interface Props {
  attachmentItem: Attachment;
}
```

### ButtonLink

This component renders a `Button` or a `ButtonWithIcon` component from `vtex.styleguide` wrapped by a `Link` component from `render-runtime`. It's props are:

```typescript
interface Props {
  to: string;
  icon?: ReactNode;
  fullWidth?: boolean;
  openNewWindow?: boolean;
  variation: string;
  children: ReactChild;
}
```

### CustomerInfo

This a wrapper for the `<ProfileRules />` component from `vtex.profile-form` that renders a formated profile. It's props are defined by the interface:

```typescript
interface Props {
  profile: ClientProfile;
}

interface ClientProfile {
  email: string;
  firstName: string | null;
  lastName: string | null;
  document: string | null;
  documentType: string | null;
  phone: string | null;
}
```

### FormattedDate and FormattedPrice

Simple components for rendering formatted dates and prices using `react-intl`. Props for `FormattedDate`:

```typescript
interface Props {
  date: string;
  style: string;
}
```

For `FormattedPrice`:

```typescript
interface Props {
  value: number;
  currency: string;
}
```

### OrderHeader

Component for rendering basic information on an order visualization, along with `OrderOptions`. It's props are defined by:

```typescript
interface Props {
  orderInfo: Order;
  takeaway?: boolean;
}
```

Notice that the `takeaway` prop is a `boolean`, and should be set to true if this order has takeaway items (from InStore).

### OrderOptions

Renders `ButtonLink`s for actions to perform on an order. It's props are defined by:

```typescript
interface Props {
  allowCancellation: boolean;
  takeaway?: boolean;
  className?: string;
  fullWidth?: boolean;
  orderId?: string;
  myAccountPath?: string;
}
```

### OrderSplitNotice

Renders a `Alert` component from `vtex.styleguide` with custom text to warn a customer that his/her order was split into multiple deliveries, pickups and takeaways. Props defined by:

```typescript
interface Props {
  deliveries: number;
  pickups: number;
  takeaways: number;
}
```

### OrderTotal

Component for rendering the total prices from an order. Props defined by:

```typescript
interface Props {
  items: OrderItem[];
  totals: OrderItemTotal[];
  orderValue: number;
  currency: string;
}

interface OrderItem {
  id: string;
  attachments: Attachment[];
  skuName: string;
  name: string;
  price: number;
  listPrice: number;
  bundleItems: Bundle[];
  isGift: boolean;
  quantity: number;
  seller: string;
  imageUrl: string;
  detailUrl: string;
  measurementUnit: string;
  unitMultiplier: number;
}

interface OrderItemTotal {
  id: string;
  name: string;
  value: number;
}

interface Bundle {
  id: string;
  attachments: Attachment[];
  name: string;
  price: number;
  quantity: number;
  imageUrl: string | null;
  measurementUnit: string;
  unitMultiplier: number;
}

interface Attachment {
  content: any;
  name: string;
}
```

### PaymentMethod

Component used to render a payment's information. Props defined by:

```typescript
interface Props {
  payment: Payment;
  transactionId: string;
  currency: string;
}

interface Payment {
  id: string;
  paymentSystem: string;
  paymentSystemName: string;
  paymentOrigin: string | null;
  value: number;
  lastDigits: string | null;
  group: string;
  installments: number;
  dueDate: string | null;
  url: string | null;
  bankIssuedInvoiceIdentificationNumberFormatted: string | null;
  bankIssuedInvoiceBarCodeNumber: string | null;
  bankIssuedInvoiceBarCodePNG: string | null;
}
```

### Product

Component for rendering information about a product in product list. Props defined by:

```typescript
interface Props {
  productInfo: OrderItem;
  currency: string;
}
```

### ProductImage

Component for rendering product images. Props defined by:

```typescript
interface Props {
  url: string;
  alt: string;
  ...props: any;
}
```

### ShippingHeader

Component to render basic information on shipping items, such as address to ship and receiver's name. Props defined by:

```typescript
interface Props {
  shippingData: Parcel;
  index: number;
  numPackages: number;
  giftRegistry?: GiftRegistry | null;
}

interface GiftRegistry {
  attachmentId: string;
  giftRegistryId: string;
  giftRegistryType: string;
  giftRegistryTypeName: string;
  addressId: string;
  description: string;
}
```

### StorePickUpHeader

Component to render basic information on store pickup items, such as pickup point address, receiver's name and pickup friendly name. Props defined by:

```typescript
interface Props {
  shippingData: Parcel;
  index: number;
  numPackages: number;
}
```

## Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles      |
| ---------------- |
| `customerInfoListContainer`   |
| `customerInfoListName`   |
| `customerInfoListEmail`   |
| `customerInfoListDocument`   |
| `customerInfoListPhone`   |
| `paymentGroup`   |
| `paymentValue`   |
| `addressContainer`   |
| `pickupFriendlyName`   |
| `updateOrderButton` |
| `myOrdersButton` |
| `cancelOrderButton` |

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- 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/LucasCastroAcctGlobal"><img src="https://avatars0.githubusercontent.com/u/55210107?v=4" width="100px;" alt=""/><br /><sub><b>LucasCastroAcctGlobal</b></sub></a><br /><a href="https://github.com/vtex-apps/order-details/commits?author=LucasCastroAcctGlobal" 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!

```


[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 order-details/react/Product.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'

import FormattedPrice from './FormattedPrice'
import ProductImage from './ProductImage'

const messages = defineMessages({
  quantity: { id: 'store/products.quantity', defaultMessage: '' },
})

interface Props {
  productInfo: OrderItem
  currency: string
}

const Product: FunctionComponent<Props & InjectedIntlProps> = ({
  productInfo,
  currency,
  intl,
}) => {
  const showMeasurementUnit =
    productInfo.unitMultiplier !== 1 || productInfo.measurementUnit !== 'un'

  return (
    <article className="flex justify-between flex-column-s flex-row-m pv7">
      <div className="flex items-center flex-column flex-row-m mr8-m">
        <div>
          <ProductImage
            url={productInfo.imageUrl}
            alt={productInfo.name}
            className="w4 mr6-m"
          />
        </div>
        <div className="flex flex-column items-between justify-between h-100">
          <a
            href={productInfo.detailUrl}
            className="t-body c-muted-1 no-underline"
            target="_blank">
            <p className="mt3">
              {productInfo.name}
              {showMeasurementUnit && (
                <small className="t-mini c-on-base tc tl-m">
                  <br />
                  {`${productInfo.unitMultiplier} ${
                    productInfo.measurementUnit
                  }`}
                </small>
              )}
            </p>
          </a>
          <p className="t-mini c-muted-1 tc tl-m mb3">
            {intl.formatMessage(messages.quantity, {
              quantity: productInfo.quantity,
            })}
          </p>
        </div>
      </div>
      <p className="tc tr-m mt3">
        <FormattedPrice
          value={productInfo.price * productInfo.quantity}
          currency={currency}
        />
      </p>
    </article>
  )
}

export default injectIntl(Product)

```


[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 order-details/react/StorePickUpHeader.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'
import { TranslateEstimate } from 'vtex.shipping-estimate-translator'

import Address from './Address'

const messages = defineMessages({
  title: { id: 'store/pickup.header.title', defaultMessage: '' },
  counter: { id: 'store/common.header.counter', defaultMessage: '' },
})

interface Props {
  shippingData: Parcel
  index: number
  numPackages: number
}

const StorePickUpHeader: FunctionComponent<Props & InjectedIntlProps> = ({
  shippingData,
  index,
  numPackages,
  intl,
}) => {
  const multiplePickups = numPackages > 1
  const receiverName = shippingData.address.receiverName
  const additionalInfo =
    shippingData.selectedSlaObj.pickupStoreInfo.additionalInfo
  return (
    <header className="flex flex-column">
      <p
        data-testid="storepickup-header"
        className="t-heading-4-ns t-heading-5">
        {intl.formatMessage(messages.title)}
        {multiplePickups &&
          intl.formatMessage(messages.counter, {
            index: index + 1,
            numPackages,
          })}
        <br />
        <small className="c-muted-2 t-small">
          <TranslateEstimate
            shippingEstimate={shippingData.shippingEstimate}
            scheduled={shippingData.deliveryWindow}
            isPickup
          />
        </small>
      </p>
      <div className="flex justify-left-m flex-column-s flex-column-l flex-row-m justify-between-l justify-start-l">
        <Address address={shippingData.address} pickup={shippingData} />
        <div className="c-on-base lh-copy">
          <p>{receiverName}</p>
          <p className="c-muted-1">{additionalInfo}</p>
        </div>
      </div>
    </header>
  )
}

export default injectIntl(StorePickUpHeader)

```


[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 order-details/react/Subscription.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FunctionComponent, useState } from 'react'
import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'
import { IconCaretDown, IconCaretUp } from 'vtex.styleguide'

import { getSubscriptionInfo } from './utils'

const messages = defineMessages({
  subscription: {
    id: 'store/items.attachments.subscription',
    defaultMessage: '',
  },
  free: { id: 'store/order.totals.pickup.free', defaultMessage: '' },
})

const SubscriptionAttachment: FunctionComponent<
  { attachmentItem: Attachment } & InjectedIntlProps
> = ({ attachmentItem, intl }) => {
  const [isOpen, setIsOpen] = useState(false)

  const { subsFrequency, subsPurchaseDay } = getSubscriptionInfo(
    attachmentItem,
    intl
  )

  return (
    <article className="bg-muted-5 pv3 ph5 br2 mv4" key={attachmentItem.name}>
      <div className="flex justify-between">
        <p className="c-on-base">{intl.formatMessage(messages.subscription)}</p>
        <div className="flex items-center">
          <p className="mr5">{intl.formatMessage(messages.free)}</p>
          <div className="c-action-primary" onClick={() => setIsOpen(!isOpen)}>
            {isOpen ? <IconCaretUp /> : <IconCaretDown />}
          </div>
        </div>
      </div>
      <div hidden={!isOpen}>
        <Fragment>
          <p className="c-muted-1">{subsFrequency}</p>
          {subsPurchaseDay && <p className="c-muted-1">{subsPurchaseDay}</p>}
        </Fragment>
      </div>
    </article>
  )
}

export default injectIntl(SubscriptionAttachment)

```


[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 order-details/react/PaymentMethod.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, useState } from 'react'
import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'
import { useRuntime } from 'vtex.render-runtime'

import AdditionalInfo from './AdditionalInfo'
import ButtonLink from './ButtonLink'
import Price from './FormattedPrice'
import InfoIcon from './icons/Info'
import { parseBankInvoiceUrl } from './utils'
import { useCssHandles } from 'vtex.css-handles'

const messages = defineMessages({
  creditcard: { id: 'store/payments.creditcard', defaultMessage: '' },
  promissory: { id: 'store/payments.promissory', defaultMessage: '' },
  debitcard: { id: 'store/payments.debitcard', defaultMessage: '' },
  lastDigits: {
    id: 'store/payments.creditcard.lastDigits',
    defaultMessage: '',
  },
  giftCard: { id: 'store/payments.giftCard', defaultMessage: '' },
  installments: { id: 'store/payments.installments', defaultMessage: '' },
  print: { id: 'store/payments.bankinvoice.print', defaultMessage: '' },
})

interface Props {
  payment: Payment
  transactionId: string
  currency: string
}

const CSS_HANDLES = [
  'paymentGroup',
  'paymentValue',
  'paymentInstallments'
] as const

const paymentGroupSwitch = (payment: Payment, intl: ReactIntl.InjectedIntl) => {
  switch (payment.group) {
    case 'creditCard':
      return intl.formatMessage(messages.creditcard)
    case 'bankInvoice':
      return payment.paymentSystemName
    case 'promissory':
      return intl.formatMessage(messages.promissory)
    case 'debitCard':
      return intl.formatMessage(messages.debitcard)
    case 'giftCard':
      return intl.formatMessage(messages.giftCard)
    default:
      return payment.paymentSystemName
  }
}

const PaymentMethod: FunctionComponent<Props & InjectedIntlProps> = ({
  payment,
  transactionId,
  currency,
  intl,
}) => {
  const { rootPath } = useRuntime()
  const [isOpen, setIsOpen] = useState(false)
  const hasPaymentSystemName = payment.paymentSystemName
  const hasPaymentOrigin = !!payment.paymentOrigin
  const hasLastDigits = !!payment.lastDigits
  const isBankInvoice = payment.group === 'bankInvoice'
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <article className="flex justify-between">
      <div className="t-body lh-solid">
        <p className={`${handles.paymentGroup} c-on-base`}>
          {paymentGroupSwitch(payment, intl)}
        </p>
        {hasPaymentSystemName && (
          <p className="c-muted-1 mb3">
            {payment.paymentSystemName}
            {hasPaymentOrigin && (
              <span> ({payment.paymentOrigin})</span>
            )}
          </p>
        )}
        {hasLastDigits && (
          <p className="c-muted-1 mt0 mb3">
            {intl.formatMessage(messages.lastDigits, {
              lastDigits: payment.lastDigits,
            })}
          </p>
        )}
        <div className="flex items-center">
          <p className={`${handles.paymentValue} c-muted-1 mv0`}>
            <Price value={payment.value} currency={currency} />
            <span className={`${handles.paymentInstallments}`}>{` ${intl.formatMessage(messages.installments, {
              installments: payment.installments,
            })}`}</span>
          </p>
          <div
            className="ml4"
            onMouseEnter={() => setIsOpen(true)}
            onMouseLeave={() => setIsOpen(false)}>
            <InfoIcon colorToken="c-muted-3" />
          </div>
        </div>
        <div hidden={!isOpen} className="mt2 z-2 absolute">
          <AdditionalInfo
            paymentId={payment.id}
            transactionId={transactionId}
            showTooltip={true}
          />
        </div>
        {isBankInvoice && payment.url && (
          <div className="mt5">
            <ButtonLink
              to={parseBankInvoiceUrl({ url: payment.url, rootPath })}
              variation="primary"
              openNewWindow>
              {intl.formatMessage(messages.print, {
                paymentSystemName: payment.paymentSystemName,
              })}
            </ButtonLink>
          </div>
        )}
      </div>
    </article>
  )
}

export default injectIntl(PaymentMethod)

```


[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 order-details/react/CustomerInfo.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { ProfileRules, ProfileSummary } from 'vtex.profile-form'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = [
  'customerInfoListContainer',
  'customerInfoListName',
  'customerInfoListEmail',
  'customerInfoListDocument',
  'customerInfoListPhone'
] as const

interface Props {
  profile: ClientProfile
}

const CustomerInfo: FunctionComponent<Props & InjectedIntlProps> = ({
  profile,
  intl,
}) => {
  const handles = useCssHandles(CSS_HANDLES)
  return (
    <div className="flex flex-column c-on-base">
      <ProfileRules country={intl.locale} shouldUseIOFetching>
        <ProfileSummary profile={profile}>
          {({ personalData }: any) => (
            <ul className={`${handles.customerInfoListContainer} list pl0`}>
              <li className={`${handles.customerInfoListName} pv2`}>
                {`${personalData.firstName.value} ${
                  personalData.lastName.value
                }`}
              </li>
              <li className={`${handles.customerInfoListEmail} pv2 c-muted-2`}>
                {personalData.email.value}
              </li>
              {personalData.document && (
                <li
                  className={`${
                    handles.customerInfoListDocument
                  } pv2 c-muted-2`}>
                  {personalData.document.value}
                </li>
              )}
              {profile.phone && (
                <li
                  className={`${handles.customerInfoListPhone} pv2 c-muted-2`}>
                  {profile.phone}
                </li>
              )}
            </ul>
          )}
        </ProfileSummary>
      </ProfileRules>
    </div>
  )
}

export default injectIntl(CustomerInfo)

```


[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 order-details/react/OrderSplitNotice.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { Alert } from 'vtex.styleguide'

import { orderSplitMessage } from './utils'

interface Props {
  deliveries: number
  pickups: number
  takeaways: number
}

const OrderSplitNotice: FunctionComponent<Props & InjectedIntlProps> = ({
  deliveries,
  pickups,
  takeaways,
  intl,
}) => {
  return (
    <Alert type="success">
      {orderSplitMessage({ deliveries, pickups, takeaways, intl })}
    </Alert>
  )
}

export default injectIntl(OrderSplitNotice)

```


[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 order-details/react/OrderHeader.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import {
  FormattedMessage,
  FormattedTime,
  InjectedIntlProps,
  injectIntl,
  defineMessages,
} from 'react-intl'
import { compose } from 'recompose'
import { RenderContextProps, withRuntimeContext } from 'vtex.render-runtime'

import FormattedDate from './FormattedDate'
import OrderOptions from './OrderOptions'

const messages = defineMessages({
  number: { id: 'store/order.header.number', defaultMessage: '' },
  receipt: { id: 'store/order.header.receipt', defaultMessage: '' },
})

interface Props {
  orderInfo: Order
  takeaway?: boolean
  runtime?: { account: string }
}

const OrderHeader: FunctionComponent<
  Props & InjectedIntlProps & RenderContextProps
> = ({ orderInfo, takeaway, intl, runtime }) => {
  const storeAccount = runtime.account
  const orderSeller = orderInfo.sellers[0].name

  return (
    <header className="flex justify-between items-center">
      <p className="t-heading-3 lh-copy">
        {intl.formatMessage(messages.number, {
          orderId: orderInfo.orderId,
        })}
        <br />
        <small className="c-muted-2 t-body">
          <FormattedMessage
            id="store/order.header.date"
            values={{
              orderDate: (
                <FormattedDate date={orderInfo.creationDate} style="short" />
              ),
              orderTime: <FormattedTime value={orderInfo.creationDate} />,
            }}
          />
        </small>
        <br />
        {storeAccount !== orderSeller && (
          <small className="c-muted-2 t-body">
            <FormattedMessage
              id="store/order.header.seller"
              values={{
                seller: <span className="c-action-primary">{orderSeller}</span>,
              }}
            />
          </small>
        )}
        {takeaway && (
          <a className="c-action-primary t-small" href="#">
            {intl.formatMessage(messages.receipt)}
          </a>
        )}
      </p>
      <OrderOptions
        className="dn-s flex-l"
        allowCancellation={orderInfo.allowCancellation}
        orderId={orderInfo.orderId}
        takeaway={takeaway}
      />
    </header>
  )
}

export default compose<Props & InjectedIntlProps & RenderContextProps, Props>(
  withRuntimeContext,
  injectIntl
)(OrderHeader)

```


[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 order-details/react/OrderTotal.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'

import Price from './FormattedPrice'

const messages = defineMessages({
  subtotal: { id: 'store/order.totals.subtotal', defaultMessage: '' },
  delivery: { id: 'store/order.totals.delivery', defaultMessage: '' },
  total: { id: 'store/order.totals.total', defaultMessage: '' },
})

interface Props {
  items: OrderItem[]
  totals: OrderItemTotal[]
  orderValue: number
  currency: string
}

const ShippingTotals: FunctionComponent<Props & InjectedIntlProps> = ({
  items,
  totals,
  orderValue,
  currency,
  intl,
}) => {
  const numItems = items.reduce((acc, item) => acc + item.quantity, 0)
  const totalsLine = 'flex justify-between items-center c-muted-1'

  return (
    <div className="flex-l justify-end pl6-l w-100">
      <div className="mv8 w-100 w-60-l">
        <div className={totalsLine}>
          <p className="mv3">
            {intl.formatMessage(messages.subtotal, { numItems })}
          </p>
          <div className="c-on-base">
            <Price value={totals[0].value} currency={currency} />
          </div>
        </div>
        <div className={totalsLine}>
          <p className="mv3">{intl.formatMessage(messages.delivery)}</p>
          <div className="c-on-base">
            <Price value={totals[2].value} currency={currency} />
          </div>
        </div>
        <div className="flex justify-between items-center c-on-base">
          <p className="t-heading-2-ns t-heading-3 mv4">
            <strong>{intl.formatMessage(messages.total)}</strong>
          </p>
          <strong className="t-heading-2-ns t-heading-3 mv4">
            <Price value={orderValue} currency={currency} />
          </strong>
        </div>
      </div>
    </div>
  )
}

export default injectIntl(ShippingTotals)

```


[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 order-details/react/ProductImage.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FunctionComponent, useState } from 'react'
import ReactResizeDetector from 'react-resize-detector'

import { utils } from 'vtex.my-account-commons'

const { fixImageUrl } = utils

interface Props {
  url: string
  alt: string
}

const ProductImage: FunctionComponent<Props & any> = ({
  url,
  alt,
  ...props
}: Props) => {
  const [maxWidth, setMaxWidth] = useState(50)
  const [maxHeight, setMaxHeight] = useState(50)

  const resizeHandler = (width: number, height: number) => {
    if (width > maxWidth) {
      setMaxWidth(width + 50)
    }
    if (height > maxHeight) {
      setMaxHeight(height + 50)
    }
  }

  return (
    <Fragment>
      <ReactResizeDetector
        handleWidth
        handleHeight
        onResize={(width: number, height: number) =>
          resizeHandler(width, height)
        }
      />
      <img src={fixImageUrl(url, maxWidth, maxHeight)} alt={alt} {...props} />
    </Fragment>
  )
}

export default ProductImage

```


[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 order-details/react/Address.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { AddressRules, AddressSummary } from 'vtex.address-form'
import { useCssHandles } from 'vtex.css-handles'

interface Props {
  address: Address
  pickup?: Parcel
}

const CSS_HANDLES = [
  'addressContainer',
  'pickupFriendlyName'
] as const

const Address: FunctionComponent<Props> = ({ address, pickup }) => {
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <div className={`${handles.addressContainer} c-muted-1 lh-copy`} data-testid="address-component">
      {pickup && (
        <p className={`${handles.pickupFriendlyName} c-on-base lh-copy`}>{pickup.pickupFriendlyName}</p>
      )}
      <AddressRules country={address.country} shouldUseIOFetching>
        <AddressSummary address={address} />
      </AddressRules>
    </div>
  )
}

export default Address

```


[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 order-details/react/AdditionalInfo.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'

import Tooltip from './icons/Tooltip'

const messages = defineMessages({
  paymentId: { id: 'store/payments.id', defaultMessage: '' },
  transactionId: { id: 'store/payments.transaction.id', defaultMessage: '' },
})

interface Props {
  paymentId: string
  transactionId: string
  showTooltip?: boolean
}

const AdditionalInfo: FunctionComponent<Props & InjectedIntlProps> = ({
  paymentId,
  transactionId,
  showTooltip,
  intl,
}) => (
  <div className="flex flex-column">
    {showTooltip && <Tooltip colorToken="c-on-base" />}
    <div className="bg-base--inverted pa4 br2">
      <p className="c-on-base--inverted tc">
        {intl.formatMessage(messages.paymentId, { id: paymentId })}
      </p>
      <p className="c-on-base--inverted tc">
        {intl.formatMessage(messages.transactionId, {
          id: transactionId,
        })}
      </p>
    </div>
  </div>
)

export default injectIntl(AdditionalInfo)

```


[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 order-details/react/FormattedDate.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedDate } from 'react-intl'

const CustomDate = ({ date, style = '' }: { date: string; style: string }) => {
  let settings

  switch (style.toLowerCase()) {
    case 'short':
      settings = {}
      break
    default:
      settings = {
        year: 'numeric',
        month: 'long',
        day: '2-digit',
      }
  }

  return <FormattedDate value={date} {...settings} />
}

export default CustomDate

```


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

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "react-intl": "^2.7.2",
    "react-resize-detector": "^3.4.0",
    "recompose": "^0.30.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.1.0",
    "@types/jest": "^23.3.13",
    "@types/node": "^10.12.21",
    "@types/prop-types": "^15.5.8",
    "@types/react": "^16.8.1",
    "@types/react-intl": "^2.3.15",
    "@types/recompose": "^0.30.4",
    "@vtex/test-tools": "^1.2.1",
    "@vtex/tsconfig": "^0.3.0",
    "babel-jest": "^24.1.0",
    "jest": "^23.6.0",
    "jest-dom": "^3.0.0",
    "prettier": "^1.16.1",
    "react-dom": "^16.7.0",
    "react-testing-library": "^5.4.4",
    "regenerator-runtime": "^0.13.1",
    "tslint": "^5.12.1",
    "tslint-config-vtex": "^2.1.0",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.9.7",
    "typescript-babel-jest": "^1.0.5",
    "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.6.3/public/_types/react",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
    "vtex.my-account-commons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.5.2/public/@types/vtex.my-account-commons",
    "vtex.profile-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.profile-form@3.3.3/public/_types/react",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.124.3/public/@types/vtex.render-runtime",
    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.2/public/@types/vtex.shipping-estimate-translator",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.133.2/public/@types/vtex.styleguide"
  },
  "resolutions": {
    "babel-core": "^7.0.0-bridge.0"
  },
  "scripts": {
    "lint": "eslint --quiet --fix --ext ts,tsx .",
    "test": "vtex-test-tools test"
  },
  "version": "1.11.0"
}

```


[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 order-details/react/FormattedPrice.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FormattedNumber } from 'react-intl'

interface Props {
  value: number
  currency: string
}

const Price: FunctionComponent<Props> = ({ value, currency }) => {
  return (
    <FormattedNumber currency={currency} style="currency" value={value / 100} />
  )
}

export default Price

```


[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 order-details/react/ShippingHeader.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'
import { TranslateEstimate } from 'vtex.shipping-estimate-translator'

import Address from './Address'

const messages = defineMessages({
  title: { id: 'store/shipping.header.title', defaultMessage: '' },
  counter: { id: 'store/common.header.counter', defaultMessage: '' },
  address: { id: 'store/shipping.header.wishlist.address', defaultMessage: '' },
})

interface Props {
  shippingData: Parcel
  index: number
  numPackages: number
  giftRegistry?: GiftRegistry | null
}

const ShippingHeader: FunctionComponent<Props & InjectedIntlProps> = ({
  shippingData,
  index,
  numPackages,
  giftRegistry,
  intl,
}) => {
  const multipleDeliveries = numPackages > 1
  return (
    <header>
      <p data-testid="shipping-header" className="t-heading-4-ns t-heading-5">
        {intl.formatMessage(messages.title)}
        {multipleDeliveries &&
          intl.formatMessage(messages.counter, {
            index: index + 1,
            numPackages,
          })}
        <br />
        <small className="c-muted-2 t-small">
          <TranslateEstimate
            shippingEstimate={shippingData.shippingEstimate}
            scheduled={shippingData.deliveryWindow}
          />
        </small>
        <br />
        <small className="c-muted-2 t-small">{shippingData.selectedSla}</small>
      </p>
      {giftRegistry &&
      giftRegistry.addressId === shippingData.address.addressId ? (
        <p className="c-muted-1">
          {intl.formatMessage(messages.address, {
            giftRegistryName: giftRegistry.description,
          })}
        </p>
      ) : (
        <Address address={shippingData.address} />
      )}
    </header>
  )
}

export default injectIntl(ShippingHeader)

```


[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 order-details/react/OrderOptions.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import ButtonLink from './ButtonLink'

const messages = defineMessages({
  printReceiptButton: {
    id: 'store/order.header.takeaway.printreceipt.button',
    defaultMessage: '',
  },
  updateButton: { id: 'store/order.header.update.button', defaultMessage: '' },
  myOrdersButton: {
    id: 'store/order.header.myorders.button',
    defaultMessage: '',
  },
  takeAwayCancelButton: {
    id: 'store/order.header.takeaway.cancel.button',
    defaultMessage: '',
  },
  cancelButton: { id: 'store/order.header.cancel.button', defaultMessage: '' },
})

interface Props {
  allowCancellation: boolean
  takeaway?: boolean
  className?: string
  fullWidth?: boolean
  orderId?: string
  myAccountPath?: string
}

const CSS_HANDLES = [
  'updateOrderButton',
  'myOrdersButton',
  'cancelOrderButton',
] as const

const OrderOptions: FunctionComponent<Props & InjectedIntlProps> = ({
  allowCancellation,
  takeaway,
  intl,
  className = '',
  fullWidth,
  orderId,
  myAccountPath = '/account',
}) => {
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <div className={`${className} flex flex-wrap justify-center flex-nowrap-m`}>
      <div
        className={`${
          handles.updateOrderButton
        } mr5-ns mb5-s mb0-m w-100 w-auto-m`}>
        {takeaway ? (
          <ButtonLink variation="secondary" fullWidth={fullWidth} to="">
            {intl.formatMessage(messages.printReceiptButton)}
          </ButtonLink>
        ) : (
          <ButtonLink
            variation="secondary"
            fullWidth={fullWidth}
            to={`${myAccountPath}#/orders/${orderId}/edit`}>
            {intl.formatMessage(messages.updateButton)}
          </ButtonLink>
        )}
      </div>
      {!takeaway && (
        <div
          className={`${
            handles.myOrdersButton
          } mr5-ns mb5-s mb0-m w-100 w-auto-m`}>
          <ButtonLink
            variation="secondary"
            fullWidth={fullWidth}
            to={`${myAccountPath}#/orders/`}>
            {intl.formatMessage(messages.myOrdersButton)}
          </ButtonLink>
        </div>
      )}
      {allowCancellation && (
        <div className={`${handles.cancelOrderButton} w-100 w-auto-m`}>
          {takeaway ? (
            <ButtonLink variation="danger-tertiary" fullWidth={fullWidth} to="">
              {intl.formatMessage(messages.takeAwayCancelButton)}
            </ButtonLink>
          ) : (
            <ButtonLink
              variation="danger-tertiary"
              fullWidth={fullWidth}
              to={`${myAccountPath}#/orders/${orderId}/cancel`}>
              {intl.formatMessage(messages.cancelButton)}
            </ButtonLink>
          )}
        </div>
      )}
    </div>
  )
}

export default injectIntl(OrderOptions)

```


[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 order-details/react/Attachment.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FunctionComponent, useState } from 'react'
import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'
import { IconCaretDown, IconCaretUp } from 'vtex.styleguide'

import Price from './FormattedPrice'
import ProductImage from './ProductImage'
import Subscription from './Subscription'
import { isSubscription } from './utils'

const messages = defineMessages({
  free: { id: 'store/order.totals.pickup.free', defaultMessage: '' },
})

interface Props {
  attachmentsInfo: Attachment[]
  bundleInfo: Bundle[]
  currency: string
}

const ProductAttachment: FunctionComponent<Props & InjectedIntlProps> = ({
  bundleInfo,
  attachmentsInfo,
  currency,
  intl,
}) => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <Fragment>
      {bundleInfo &&
        bundleInfo.map(bundleItem => {
          const hasAttachments =
            bundleItem.attachments && bundleItem.attachments.length > 0
          const isMessage =
            hasAttachments && bundleItem.attachments[0].name === 'message'

          return (
            <article className="bg-muted-5 pv3 ph5 br2 mv4" key={bundleItem.id}>
              <div className="flex justify-between">
                {bundleItem.imageUrl && (
                  <ProductImage
                    url={bundleItem.imageUrl}
                    alt={bundleItem.name}
                  />
                )}
                <p className="c-on-base">{bundleItem.name}</p>
                <div className="flex items-center">
                  <Price value={bundleItem.price} currency={currency} />
                  {hasAttachments && (
                    <div
                      className="c-action-primary ml5"
                      onClick={() => setIsOpen(!isOpen)}>
                      {isOpen ? <IconCaretUp /> : <IconCaretDown />}
                    </div>
                  )}
                </div>
              </div>
              {hasAttachments && (
                <div hidden={!isOpen}>
                  {isMessage && (
                    <p className="c-muted-1">
                      {bundleItem.attachments[0].content.text}
                    </p>
                  )}
                  {!isMessage &&
                    bundleItem.attachments.map(attachmentItem => {
                      Object.keys(attachmentItem.content).map(key => {
                        const contentLabel = key
                        const contentValue = attachmentItem.content[key]
                        return (
                          <p className="c-muted-1" key={key}>
                            {`${contentLabel}: ${contentValue}`}
                          </p>
                        )
                      })
                    })}
                </div>
              )}
            </article>
          )
        })}
      {attachmentsInfo.length > 0 &&
        attachmentsInfo.map(attachmentItem => {
          return isSubscription(attachmentItem) ? (
            <Subscription attachmentItem={attachmentItem} />
          ) : (
            <article
              className="bg-muted-5 pv3 ph5 br2 mv4"
              key={attachmentItem.name}>
              <div className="flex justify-between">
                <p className="c-on-base">{attachmentItem.name}</p>
                <div className="flex items-center">
                  <p className="mr5">{intl.formatMessage(messages.free)}</p>
                  {attachmentItem.content && (
                    <div
                      className="c-action-primary"
                      onClick={() => setIsOpen(!isOpen)}>
                      {isOpen ? <IconCaretUp /> : <IconCaretDown />}
                    </div>
                  )}
                </div>
              </div>
              {attachmentItem.content && (
                <div hidden={!isOpen}>
                  {Object.keys(attachmentItem.content).map(key => {
                    const contentLabel = key
                    const contentValue = attachmentItem.content[key]
                    return (
                      <p className="c-muted-1" key={key}>
                        {`${contentLabel}: ${contentValue}`}
                      </p>
                    )
                  })}
                </div>
              )}
            </article>
          )
        })}
    </Fragment>
  )
}

export default injectIntl(ProductAttachment)

```


[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 order-details/react/ButtonLink.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, ReactChild, ReactNode } from 'react'
import { Link } from 'vtex.render-runtime'
import { Button, ButtonWithIcon } from 'vtex.styleguide'

interface Props {
  to: string
  icon?: ReactNode
  fullWidth?: boolean
  openNewWindow?: boolean
  variation: string
  children: ReactChild
}

const ButtonLink: FunctionComponent<Props> = ({
  to,
  icon,
  fullWidth,
  variation,
  children,
}) => (
  <Link to={to} data-testid="button-link">
    {icon ? (
      <ButtonWithIcon icon={icon} variation={variation} block={fullWidth}>
        {children}
      </ButtonWithIcon>
    ) : (
      <Button variation={variation} block={fullWidth}>
        {children}
      </Button>
    )}
  </Link>
)

export default ButtonLink

```


[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 order-details/react/typings/vtex.shipping-estimate-translator.d.ts from the order-details VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.shipping-estimate-translator' {
  export const TranslateEstimate
}

```


[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 order-details/react/typings/global.d.ts from the order-details VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare interface Window {
  __RUNTIME__: any
}

interface OrderGroup {
  orders: Order[]
  totalDeliveryParcels: Parcel[]
  totalPickUpParcels: Parcel[]
  totalTakeAwayParcels: Parcel[]
}

interface Order {
  allowCancellation: boolean
  orderId: string
  deliveryParcels: Parcel[]
  pickUpParcels: Parcel[]
  takeAwayParcels: Parcel[]
  items: OrderItem[]
  sellers: OrderItemSeller[]
  totals: OrderItemTotal[]
  giftRegistryData?: GiftRegistry | null
  clientProfileData: ClientProfile
  paymentData: PaymentData
  storePreferencesData: StorePreferencesData
  creationDate: string
  value: number
}

interface GiftRegistry {
  attachmentId: string
  giftRegistryId: string
  giftRegistryType: string
  giftRegistryTypeName: string
  addressId: string
  description: string
}

interface ClientProfile {
  email: string
  firstName: string | null
  lastName: string | null
  document: string | null
  documentType: string | null
  phone: string | null
}

interface OrderItem {
  id: string
  attachments: Attachment[]
  skuName: string
  name: string
  price: number
  listPrice: number
  bundleItems: Bundle[]
  isGift: boolean
  quantity: number
  seller: string
  imageUrl: string
  detailUrl: string
  measurementUnit: string
  unitMultiplier: number
}

interface Bundle {
  id: string
  attachments: Attachment[]
  name: string
  price: number
  quantity: number
  imageUrl: string | null
  measurementUnit: string
  unitMultiplier: number
}

interface Attachment {
  content: any
  name: string
}

interface StorePreferencesData {
  countryCode: string | null
  currencyCode: string
}

interface PaymentData {
  transactions: Transaction[]
}

interface Transaction {
  transactionId: string
  payments: Payment[]
}

interface DeliveryWindow {
  endDateUtc: string | null
  startDateUtc: string | null
}

interface ShippingSLA {
  id: string
  name: string
  shippingEstimate: string
  deliveryWindow: DeliveryWindow | null
  price: number
  deliveryChannel: string
  pickupStoreInfo: PickupStoreInfo
}

interface PickupStoreInfo {
  additionalInfo: string | null
  address: Address | null
  friendlyName: string | null
  isPickupStore: boolean | null
}

interface OrderItemSeller {
  id: string
  name: string
}

interface OrderItemTotal {
  id: string
  name: string
  value: number
}

interface Payment {
  id: string
  paymentSystem: string
  paymentSystemName: string
  paymentOrigin: string | null
  value: number
  lastDigits: string | null
  group: string
  installments: number
  dueDate: string | null
  url: string | null
  bankIssuedInvoiceIdentificationNumberFormatted: string | null
  bankIssuedInvoiceBarCodeNumber: string | null
  bankIssuedInvoiceBarCodePNG: string | null
}

interface Address {
  addressId?: string
  addressType: string | null
  receiverName: string | null
  state: string | null
  street: string | null
  number: string | null
  city: string | null
  postalCode: string | null
  neighborhood: string | null
  complement: string | null
  country: string | null
}

interface Parcel {
  address: Address
  price: number
  pickupFriendlyName: string | null
  seller: string
  items: OrderItem[]
  selectedSla: string
  selectedSlaObj: ShippingSLA
  shippingEstimate: string | null
  shippingEstimateDate: string | null
  deliveryWindow: DeliveryWindow | null
  deliveryChannel: string
  selectedSlaType: string
}

interface IconProps {
  color?: string
  size?: number
}

```


[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 order-details/react/typings/vtex.styleguide.d.ts from the order-details VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  export const Button
  export const PageBlock
  export const ButtonWithIcon
  export const IconCaretDown
  export const IconCaretUp
  export const Alert
}

```


[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 order-details/react/utils/index.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { defineMessages } from 'react-intl'

const messages = defineMessages({
  nPickup_nTakeaway: {
    id: 'store/order.split.n.pickup.n.takeaway',
    defaultMessage: '',
  },
  noPickup_nTakeaway: {
    id: 'store/order.split.no.pickup.n.takeaway',
    defaultMessage: '',
  },
  nPickup_noTakeaway: {
    id: 'store/order.split.n.pickup.no.takeaway',
    defaultMessage: '',
  },
  noPickup_noTakeaway: {
    id: 'store/order.split.no.pickup.no.takeaway',
    defaultMessage: '',
  },
  day: {
    id: 'store/items.attachments.subscription.frequency.day',
    defaultMessage: '',
  },
  month: {
    id: 'store/items.attachments.subscription.frequency.month',
    defaultMessage: '',
  },
  week: {
    id: 'store/items.attachments.subscription.frequency.week',
    defaultMessage: '',
  },
  year: {
    id: 'store/items.attachments.subscription.frequency.year',
    defaultMessage: '',
  },
  purchaseday: {
    id: 'store/items.attachments.subscription.purchaseday',
    defaultMessage: '',
  },
})

export const getPaymentGroupFromOrder = (order: Order) => ({
  barCodeNumber:
    order.paymentData.transactions[0].payments[0]
      .bankIssuedInvoiceBarCodeNumber,
  barCodePNG:
    order.paymentData.transactions[0].payments[0].bankIssuedInvoiceBarCodePNG,
  dueDate: order.paymentData.transactions[0].payments[0].dueDate,
  paymentGroup: order.paymentData.transactions[0].payments[0].group,
  paymentSystemName:
    order.paymentData.transactions[0].payments[0].paymentSystemName,
  url: order.paymentData.transactions[0].payments[0].url,
  value: order.paymentData.transactions[0].payments[0].value,
})

export interface PaymentGroupInfo {
  barCodeNumber: string | null
  barCodePNG: string | null
  dueDate: string | null
  paymentGroup: string
  paymentSystemName: string
  url: string | null
  value: number
}

export const isSubscription = (attachmentItem: Attachment) =>
  attachmentItem.name.indexOf('vtex.subscription') === 0

export const getSubscriptionInfo = (
  attachmentItem: Attachment,
  intl: ReactIntl.InjectedIntl
) => {
  if (!isSubscription(attachmentItem)) {
    return {}
  }
  const vtexSubsPrefix = 'vtex.subscription.key.'
  const subsFrequency: string =
    attachmentItem.content[`${vtexSubsPrefix}frequency`]
  const subsPurchaseDay: string =
    attachmentItem.content[`${vtexSubsPrefix}purchaseday`]
  const subsValidityBegin: string =
    attachmentItem.content[`${vtexSubsPrefix}validity.begin`]
  const subsValidityEnd: string =
    attachmentItem.content[`${vtexSubsPrefix}validity.end`]

  // This matches a key in the format: "3 months"
  const numberPeriodRegex = /([\d]{1,3}) ([A-z]{1,20})/
  // This matches a key in the format: "weekly"
  const wordlyPeriodRegex = /([A-z]{1,20})/

  let subsFrequencyString = ''
  if (numberPeriodRegex.test(subsFrequency)) {
    const frequency = numberPeriodRegex.exec(subsFrequency)
    if (frequency && frequency.length > 2) {
      subsFrequencyString = intl.formatMessage(
        {
          id: `store/items.attachments.subscription.frequency.${frequency[2]}`,
        },
        {
          frequencyNumber: parseInt(frequency[1], 10),
        }
      )
    }
  } else if (wordlyPeriodRegex.test(subsFrequency)) {
    const frequency = wordlyPeriodRegex.exec(subsFrequency)
    if (frequency && frequency.length > 0) {
      subsFrequencyString = intl.formatMessage({
        id: `store/items.attachments.subscription.frequency.${frequency[1]}`,
      })
    }
  }

  const subsPurchaseDayString =
    subsPurchaseDay !== ''
      ? intl.formatMessage(
          { id: 'store/items.attachments.subscription.purchaseday' },
          { purchaseday: subsPurchaseDay }
        )
      : null

  return {
    subsFrequency: subsFrequencyString,
    subsPurchaseDay: subsPurchaseDayString,
    subsValidityBegin,
    subsValidityEnd,
  }
}

export const orderSplitMessage = ({
  deliveries,
  pickups,
  takeaways,
  intl,
}: {
  deliveries: number
  pickups: number
  takeaways: number
  intl: ReactIntl.InjectedIntl
}) => {
  const nPickups = pickups > 1
  const nTakeaways = takeaways > 1

  let message = messages.noPickup_noTakeaway
  if (nPickups && nTakeaways) {
    message = messages.nPickup_nTakeaway
  } else if (nTakeaways) {
    message = messages.noPickup_nTakeaway
  } else if (nPickups) {
    message = messages.nPickup_noTakeaway
  }

  return intl.formatMessage(message, { deliveries, pickups, takeaways })
}

export function parseBankInvoiceUrl({
  url,
  rootPath = '',
}: {
  url: string
  rootPath?: string
}) {
  const isEncrypted = Boolean(url.match(/(\*.\*.)+\*\w\*/g))
  if (!isEncrypted) return url

  const encodedPath = encodeURIComponent(
    window.location.pathname + window.location.search
  )

  return `${rootPath}/login?returnUrl=${encodedPath}`
}

```


[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 order-details/react/__tests__/index.test.ts from the order-details VTEX app.

[Assistant]
Here's the implementation:

```typescript
describe('Hello tests', () => {
  it('should be a success', () => {
    expect(true).toBe(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 order-details/react/icons/MailIcon.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { PureComponent } from 'react'
import { calcIconSize } from './utils'

const iconBase = {
  height: 14,
  width: 16,
}

class MailIcon extends PureComponent<IconProps> {
  public render() {
    const { color = 'currentColor', size = 16 } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <svg
        width={newSize.width}
        height={newSize.height}
        viewBox="0 0 16 14"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M15 0H1C0.4 0 0 0.4 0 1V2.4L8 6.9L16 2.5V1C16 0.4 15.6 0 15 0Z"
          fill={color}
        />
        <path
          d="M7.5 8.90001L0 4.70001V13C0 13.6 0.4 14 1 14H15C15.6 14 16 13.6 16 13V4.70001L8.5 8.90001C8.22 9.04001 7.78 9.04001 7.5 8.90001Z"
          fill={color}
        />
      </svg>
    )
  }
}

export default MailIcon

```


[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 order-details/react/icons/Info.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'

import { baseClassname } from './utils'

const InfoIcon: FunctionComponent<{ colorToken: string }> = ({
  colorToken,
}) => (
  <svg
    className={`${baseClassname('info')} ${colorToken ? colorToken : ''}`}
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM9 12H7V7H9V12ZM8 6C7.4 6 7 5.6 7 5C7 4.4 7.4 4 8 4C8.6 4 9 4.4 9 5C9 5.6 8.6 6 8 6Z"
      fill="currentColor"
    />
  </svg>
)

export default InfoIcon

```


[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 order-details/react/icons/Tooltip.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'

import { baseClassname } from './utils'

const Tooltip: FunctionComponent<{ colorToken?: string }> = ({
  colorToken,
}) => (
  <svg
    className={`${baseClassname('tooltip')} ${colorToken ? colorToken : ''}`}
    width="20"
    height="9"
    viewBox="0 0 20 9"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    style={{ paddingLeft: `${7.75}rem` }}>
    <path
      d="M12.1213 1.12132L20 9L0 9L7.87868 1.12132C9.05025 -0.050251 10.9497 -0.0502493 12.1213 1.12132Z"
      fill="currentColor"
    />
  </svg>
)

export default Tooltip

```


[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 order-details/react/icons/DeliveryIcon.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { PureComponent } from 'react'

import { calcIconSize } from './utils'

const iconBase = {
  height: 22,
  width: 30,
}

class DeliveryIcon extends PureComponent<IconProps> {
  public render() {
    const { color = 'currentColor', size = 30 } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <svg
        width={newSize.width}
        height={newSize.height}
        viewBox="0 0 30 22"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M18.7344 4.80957H26.2004L29.0001 12.4286V18.1428H25.2205"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
        <path
          d="M19.6624 18.1426H9.86328"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
        <path
          d="M4.26637 18.1428H1V1H18.7317V11.9523"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
        <path
          d="M21.9922 8.14258V11.4759H25.2586"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
        <path
          d="M7.06733 20.9999C8.61359 20.9999 9.86708 19.7207 9.86708 18.1428C9.86708 16.5648 8.61359 15.2856 7.06733 15.2856C5.52107 15.2856 4.26758 16.5648 4.26758 18.1428C4.26758 19.7207 5.52107 20.9999 7.06733 20.9999Z"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
        <path
          d="M22.4638 20.9999C24.0101 20.9999 25.2636 19.7207 25.2636 18.1428C25.2636 16.5648 24.0101 15.2856 22.4638 15.2856C20.9176 15.2856 19.6641 16.5648 19.6641 18.1428C19.6641 19.7207 20.9176 20.9999 22.4638 20.9999Z"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
      </svg>
    )
  }
}

export default DeliveryIcon

```


[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 order-details/react/icons/Success.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { PureComponent } from 'react'
import { calcIconSize } from './utils'

const iconBase = {
  height: 42,
  width: 42,
}

class SuccessIcon extends PureComponent<IconProps> {
  public render() {
    const { color = 'currentColor', size = 42 } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <svg
        data-testid="sucessIcon"
        width={newSize.width}
        height={newSize.height}
        viewBox="0 0 42 42"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M11.666 22.333L16.9993 27.6663L30.3327 14.333"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
        <path
          d="M21 41C32.0457 41 41 32.0457 41 21C41 9.95431 32.0457 1 21 1C9.95431 1 1 9.95431 1 21C1 32.0457 9.95431 41 21 41Z"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
      </svg>
    )
  }
}

export default SuccessIcon

```


[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 order-details/react/icons/PickUpIcon.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { PureComponent } from 'react'
import { calcIconSize } from './utils'

const iconBase = {
  height: 24,
  width: 26,
}

class PickUpIcon extends PureComponent<IconProps> {
  public render() {
    const { color = 'currentColor', size = 26 } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <svg
        width={newSize.width}
        height={newSize.height}
        viewBox="0 0 26 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M21.6575 4.79333H4.17969"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
        <path
          d="M10.9273 14.276H6.95508V18.0691H10.9273V14.276Z"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
        <path
          d="M3.38672 13.5171V22.9999H14.5089V16.1723H19.2756V22.9999H22.4534V13.5171"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
        <path
          d="M21.6556 4.79314V1H4.17778V4.79314L1 8.58627C1 10.0527 2.24489 11.2415 3.78056 11.2415C4.66795 11.2415 5.45604 10.8432 5.96528 10.2253C6.47452 10.8432 7.26261 11.2415 8.15 11.2415C9.16331 11.2415 10.0475 10.7222 10.5333 9.94877C11.0191 10.7222 11.9034 11.2415 12.9167 11.2415C13.93 11.2415 14.8142 10.7222 15.3 9.94877C15.7858 10.7222 16.67 11.2415 17.6833 11.2415C18.5707 11.2415 19.3588 10.8432 19.8681 10.2253C20.3773 10.8432 21.1654 11.2415 22.0528 11.2415C23.5884 11.2415 24.8333 10.0527 24.8333 8.58627L21.6556 4.79314Z"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
      </svg>
    )
  }
}

export default PickUpIcon

```


[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 order-details/react/icons/PrinterIcon.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { PureComponent } from 'react'
import { calcIconSize } from './utils'

const iconBase = {
  height: 16,
  width: 16,
}

class PrinterIcon extends PureComponent<IconProps> {
  public render() {
    const { color = 'currentColor', size = 16 } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <svg
        width={newSize.width}
        height={newSize.height}
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path d="M13 0H3V3H13V0Z" fill={color} />
        <path
          d="M15 5H1C0.4 5 0 5.4 0 6V12C0 12.6 0.4 13 1 13H3V15C3 15.6 3.4 16 4 16H12C12.6 16 13 15.6 13 15V13H15C15.6 13 16 12.6 16 12V6C16 5.4 15.6 5 15 5ZM11 14H5V9H11V14Z"
          fill={color}
        />
      </svg>
    )
  }
}

export default PrinterIcon

```


[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 order-details/react/icons/utils.tsx from the order-details VTEX app.

[Assistant]
Here's the implementation:

```tsx
export const calcIconSize = (
  iconBase: { height: number; width: number },
  newSize: number
) => {
  const isHorizontal = iconBase.width >= iconBase.height

  const width = isHorizontal
    ? newSize
    : (newSize * iconBase.width) / iconBase.height

  const height = !isHorizontal
    ? newSize
    : (newSize * iconBase.height) / iconBase.width

  return { width, height }
}

export const baseClassname = (name: string, variation?: string) =>
  `vtex__icon-${name} ${variation ? `vtex__icon-${name}--${variation}` : ''}`

```


[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 demostore-theme/sitemap/sitemap.json from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "urlset": {
    "url": [
      {
        "loc": "https://storetheme.vtex.com/about-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 demostore-theme/docs/README.md from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Assemblers Appliance Theme
A simple example store implemented in Store Framework

Used in our demostore
## Preview
![](https://user-images.githubusercontent.com/484167/71480046-e9aa7080-27d5-11ea-9923-e5ad48891cec.png)

```


[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 demostore-theme/store/blocks.jsonc from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
/* Blocks can be defined both on the store/blocks.json file, and in any number of json
 * files inside the store/blocks directory, with any arbitrary directory structure.
 *
 * Additionally, all blocks files can support comments, such as this one, if given the
 * .jsonc file extension.
 *
 * The store/blocks.json file is intended for backwards compatibility, for miscellaneous
 * blocks, or if the app is simple enough that it doesn't warrant splitting the file.
 */
{
  "store.orderplaced": {
    "blocks": ["order-placed"]
  },

  "store.account": {
    "blocks": ["my-account"],
    "parent": {
      "challenge": "challenge.profile"
    }
  },

  "store.login": {
    "blocks": ["login-content#default"]
  },

  "login-content#default": {
    "props": {
      "isInitialScreenOptionOnly": false,
      "defaultOption": 1,
      "showPasswordVerificationIntoTooltip": true
    }
  },

  "product-summary.shelf": {
    "children": [
      "product-summary-add-to-list-button",
      "stack-layout#prodsum",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price"
    ]
  },

  "stack-layout#prodsum": {
    "children": [
      "product-summary-image",
      "product-summary-specification-badges"
    ]
  },

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

  "store.product-review-form": {
    "blocks": ["product-review-form"]
  }
}

```


[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 demostore-theme/styles/css/vtex.rich-text.css from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container--xp {
  width: 80%;
}

.container--newsletter{
  max-height: 350px;
}

```


[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 demostore-theme/styles/css/vtex.store-header.css from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.headerRow--menu-link :global(.vtex-menu-2-x-styledLink) {
  color: #ffffff;
  font-size: 14px;
}

.headerRow--main-header .headerRowBackground {
  background-color: #212222;
  padding: 1.5em 0;
}
/*
.headerRow--main-header :global(a) {
  margin: 0 auto;
} */

.headerRow--main-topbar :global(.vtex-menu-2-x-styledLink)  {
  color: #727273;
  font-size: 14px;
}

.headerRow--main-header-mobile .headerRowBackground {
  background-color: #212222;
  padding: 1.5em 0;
}

```


[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 demostore-theme/styles/css/vtex.store-components.css from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700|Roboto&display=swap');

.notificationBarContainer {
  background-color: #E6F1E6;
  color: #03034E;
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
}

.searchBarContainer {
  max-width: 265px;
}

.infoCardContainer--info-card-home {
  max-width: 1520px;
  margin: 0 auto;
  background-color: #E6F1E6;
  padding: 0px;
}

.newsletter {
  color: #727273;
  max-width: 1528px;
  padding-top: 1rem;
}

/* #newsletter-input {
  background-color: #ffffff;
} */

.newsletter .container {
  padding: 0 0 20px 0;
}

.label {
  color: #727273;
  font-size: 18px;
}

.inputGroup {
  padding-bottom: 4px;
  display: flex;
  color: #fff;
}

/* .inputGroup input {
  background-color: #ffffff;
  color: #727273;
  border: 2px solid #E3E4E6;
  box-sizing: border-box;
  border-radius: 4px;
} */

/* .inputGroup input::placeholder {
  color: #fff;
  font-size: 16px;
} */

.imageElement--storePrint {
  max-height: 300px;
  margin-bottom: 20px;
}

.infoCardTextContainer--depbanner {
  min-height: 400px;
}

@media only screen and (min-width: 640px) {
  .label {
    font-size: 40px;
  }

  .infoCardContainer--info-card-home .infoCardTextContainer {
    width: 30%;
  }

  .infoCardContainer--info-card-home .infoCardImageContainer {
    width: 70%;
  }

  .imageElement--storePrint {
    margin-bottom: 0px;
    max-height: 600px;
  }
}

.imageElement {

}
/*
.shippingContainer {
  background: red;
}

.shippingContainer .items-start {
  width: 50%;
} */

```


[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 demostore-theme/styles/css/vtex.flex-menu.css from the demostore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
    display: block;
}
.menuItem {
    width: 100%;
}
```