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

[Assistant]
Here's the implementation:

```json
{
  "store/common.header.counter": " – n˚ {index} av {numPackages}",
  "store/header.bankinvoice.copy": "Kopi",
  "store/header.bankinvoice.embeded.collapse": "Slå sammen",
  "store/header.bankinvoice.embeded.expand": "Utvid",
  "store/header.bankinvoice.header": "Informasjon om {paymentSystemName}",
  "store/header.bankinvoice.print": "Skriv ut {paymentSystemName}",
  "store/header.bankinvoice.help": "Kan du ikke se {paymentSystemName}?",
  "store/header.bankinvoice.tooltip": "{paymentSystemName} fungerer normalt. Klikk på {message} eller kopier strekkoden for å fortsette med betalingen.",
  "store/header.email": "I løpet av fem minutter vil du motta en e-post på {userEmail} med alle kjøpsdetaljene dine. {lineBreak} Husk å sjekke innboksen for søppelpost eller kampanjer",
  "store/header.guest-email": "I løpet av fem minutter vil du motta en e-post på {userEmail} med alle kjøpsdetaljene dine. {lineBreak} Husk å sjekke innboksen for søppelpost eller kampanjer",
  "store/header.newpurchase.button": "Start ny bestilling",
  "store/header.print.button": "Skriv ut",
  "store/header.thanks": "Takk for kjøpet!",
  "store/items.attachments.subscription": "Abonnement",
  "store/items.attachments.subscription.frequency.day": "Hver {frequencyNumber, plural, one {# dag} other {# dager}}",
  "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 {# uke} other {# uker}}",
  "store/items.attachments.subscription.frequency.year": "Hver {frequencyNumber, plural, one {# år} other {# år}}",
  "store/items.attachments.subscription.purchaseday": "Belastes månedlig på dagen {purchaseday}",
  "store/order.header.cancel.button": "Avbryt bestillingen",
  "store/order.header.date": "Lagt inn {orderDate} kl. {orderTime}",
  "store/order.header.myorders.button": "Mine bestillinger",
  "store/order.header.number": "Bestilling #{orderId}",
  "store/order.header.receipt": "Se kvittering",
  "store/order.header.seller": "Solgt og levert av {seller}",
  "store/order.header.takeaway.cancel.button": "Avbryt kjøpet",
  "store/order.header.takeaway.printreceipt.button": "Skriv ut kvittering på nytt",
  "store/order.header.update.button": "Oppdater bestillingen",
  "store/order.split.n.pickup.n.takeaway": "Vi deler opp bestillingen din i {deliveries} leveringer,{pickups, plural, one {, ett hentested i butikk} other {, # hentesteder i butikk}}{takeaways, plural, one {og et ta med-produkt} other {og # ta med-produkter}}. På den måten vil du motta varer som er nærmere deg raskere.",
  "store/order.split.n.pickup.no.takeaway": "Vi deler opp bestillingen din i {deliveries} leveringer{pickups, plural, one {ett hentested i butikk} other {og # hentesteder i butikk}}. På den måten vil du motta varer som er nærmere deg raskere.",
  "store/order.split.no.pickup.n.takeaway": "Vi deler opp bestillingen din i {deliveries} leveringer{takeaways, plural, one {og ett take away-produkt} other {og # take away-produkter}}. På den måten vil du motta varer som er nærmere deg raskere.",
  "store/order.split.no.pickup.no.takeaway": "Vi deler opp bestillingen din i {deliveries} leveranser. På den måten vil du motta varer som er nærmere deg raskere.",
  "store/order.totals.pickup.free": "Gratis",
  "store/order.totals.total": "Total",
  "store/page.title": "Bestilling lagt inn",
  "store/payments.bankinvoice.print": "Åpne {paymentSystemName}",
  "store/payments.creditcard": "Kredittkort",
  "store/payments.creditcard.lastDigits": "Siste sifre: {lastDigits}",
  "store/payments.debitcard": "Debetkort",
  "store/payments.id": "Betalings-ID: {id}",
  "store/payments.installments": "({installments}x)",
  "store/payments.transaction.id": "Transaksjons-ID: {id}",
  "store/pickup.header.title": "Hent",
  "store/products.isGift": "Gratis",
  "store/products.quantity": "{quantity, plural, one {# enhet} other {# enheter}}",
  "store/shipping.header.title": "Levering",
  "store/shipping.header.address": "Adresse",
  "store/shipping.header.wishlist.address": "Adresse fra: {giftRegistryName}",
  "store/summary.items": "{itemsQuantity, plural, one {# vare} other {# varer}}",
  "store/summary.pickup": "Hent i butikk",
  "store/summary.pickup.friendlyName": "Hos {friendlyName}",
  "store/summary.pickup.quantity": "{pickups, plural, one {, i en henting i butikk} other {, del opp i # hentinger}}",
  "store/summary.shipping": "Levering",
  "store/summary.shipping.address": "På {addressStreet}, {addressNumber}",
  "store/summary.shipping.quantity": "{shippings, plural, one {, i én levering} other {, del opp i # leveringer}}",
  "store/takeaway.header.title": "Take away",
  "store/warnings.delivery.time": "Leveringsperioden begynner å telle fra det øyeblikket betalingen er bekreftet.",
  "store/warnings.delivery.tracking": "En sporingskode blir sendt til e-posten din når leveringsprosessen begynner.",
  "store/warnings.order.split": "Kjøpet ditt ble delt opp i {numOrders} bestillinger ettersom noen av varene ble solgt av partnere. Men dette påvirker ikke leveringsoverslagene.",
  "store/warnings.payment.approval": "Godkjenning av betaling kan ta fra fem minutter til fem virkedager.",
  "store/warnings.payment.bankInvoice.approval": "Godkjenning av betaling for {paymentSystemName} kan ta opptil tre virkedager. Hvis ikke skyldig beløp betales, vil bestillingen din automatisk bli kansellert.",
  "store/warnings.payment.bankInvoice.value": "Foreta en betaling på {paymentValue} før forfallsdatoen i henhold til informasjonen nedenfor.",
  "store/warnings.payment.bankInvoice.value.duedate": "Foreta en betaling på {paymentValue} opptil {paymentDueDate} i henhold til informasjonen nedenfor.",
  "store/warnings.pickup.time": "Henteperioden for butikken starter fra det øyeblikket betalingen er bekreftet.",
  "store/warnings.subscription": "I tillegg til kjøpte varer inkluderer bestillingen én eller flere abonnementer.",
  "store/order.error.invalid.title": "Side ikke funnet",
  "store/order.error.invalid.message": "Det ser ut til at siden du leter etter ikke eksisterer. Vi foreslår at du går tilbake til hjemmesiden.",
  "store/order.error.not-logged-in.title": "Du har ikke tillatelse",
  "store/order.error.not-logged-in.message": "Det virker som om du ikke har tillatelse til å få tilgang til denne siden. Prøv å logge inn og få tilgang på nytt.",
  "store/go-to-login": "Gå til påloggingssiden",
  "store/go-to-home": "Gå til hjemmesiden",
  "store/paymentData.connectorResponse.mb.entity": "Enhet",
  "store/paymentData.connectorResponse.mb.reference": "Referanse"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/common.header.counter": " - n˚ {index} de {numPackages}",
  "store/header.bankinvoice.copy": "Copiar",
  "store/header.bankinvoice.embeded.collapse": "Colapsar",
  "store/header.bankinvoice.embeded.expand": "Expandir",
  "store/header.bankinvoice.header": "Información en su {paymentSystemName}",
  "store/header.bankinvoice.print": "Imprimir {paymentSystemName}",
  "store/header.bankinvoice.help": "¿No puede ver su {paymentSystemName}?",
  "store/header.bankinvoice.tooltip": "Su {paymentSystemName} está funcionando con normalidad. Haga clic en {message} o copie su código para efectuar el pago",
  "store/header.email": "En hasta 5 minutos, recibirá un correo electrónico en {userEmail} con todos los detalles de su compra. {lineBreak} Recuerde revisar su buzón de correo no deseado o promociones.",
  "store/header.guest-email": "En hasta 5 minutos, recibirá un correo electrónico en {userEmail} con todos los detalles de su compra. {lineBreak} Recuerde revisar su buzón de correo no deseado o promociones.",
  "store/header.newpurchase.button": "Empezar nuevo orden",
  "store/header.print.button": "Imprimir",
  "store/header.thanks": "¡Gracias por la compra!",
  "store/items.attachments.subscription": "Suscripción",
  "store/items.attachments.subscription.frequency.day": "Cada {frequencyNumber, plural, one {# dia} other {# dias}}",
  "store/items.attachments.subscription.frequency.month": "Cada {frequencyNumber, plural, one {# mes} other {# meses}}",
  "store/items.attachments.subscription.frequency.week": "Cada {frequencyNumber, plural, one {# semana} other {# semanas}}",
  "store/items.attachments.subscription.frequency.year": "Cada {frequencyNumber, plural, one {# año} other {# años}}",
  "store/items.attachments.subscription.purchaseday": "Se cobra mensualmente en el día {purchaseday}",
  "store/order.header.cancel.button": "Cancelar orden",
  "store/order.header.date": "Hecho el {orderDate} a las {orderTime}",
  "store/order.header.myorders.button": "Mis ordenes",
  "store/order.header.number": "Orden #{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 orden",
  "store/order.split.n.pickup.n.takeaway": "Dividimos su pedido en {deliveries} entregas,{pickups, plural, one {, recogida en una tienda} other {, # recogidas en la tienda}}{takeaways, plural, one {y un producto para llevar} other {y # productos para llevar}}. De esa manera, recibirás artículos que están más cerca de ti más rápido.",
  "store/order.split.n.pickup.no.takeaway": "Dividimos su pedido en {deliveries} entregas{pickups, plural, one {y una recogida en la tienda} other {y # recogidas en la tienda}}. De esa manera, recibirás artículos que están más cerca de ti más rápido.",
  "store/order.split.no.pickup.n.takeaway": "Dividimos su pedido en {deliveries} entregas{takeaways, plural, one {y un producto para llevar} other {y # productos para llevar}}. De esa manera, recibirás artículos que están más cerca de ti más rápido.",
  "store/order.split.no.pickup.no.takeaway": "Dividimos su pedido en {deliveries} entregas. De esa manera, recibirás artículos que están más cerca de ti más rápido.",
  "store/order.totals.pickup.free": "Gratis",
  "store/order.totals.total": "Total",
  "store/page.title": "Orden colocada",
  "store/payments.bankinvoice.print": "Mostrar {paymentSystemName}",
  "store/payments.creditcard": "Tarjeta de crédito",
  "store/payments.creditcard.lastDigits": "Últimos dígitos: {lastDigits}",
  "store/payments.debitcard": "Tarjeta de débito",
  "store/payments.id": "ID de pago: {id}",
  "store/payments.installments": "({installments}x)",
  "store/payments.transaction.id": "ID de transacción: {id}",
  "store/pickup.header.title": "Recogida",
  "store/products.isGift": "Gratis",
  "store/products.quantity": "{quantity, plural, one {# unidad} other {# unidades}}",
  "store/shipping.header.title": "Entrega",
  "store/shipping.header.address": "Dirección",
  "store/shipping.header.wishlist.address": "Dirección desde: {giftRegistryName}",
  "store/summary.items": "{itemsQuantity, plural, one {# articulo} other {# artículos}}",
  "store/summary.pickup": "Recogida",
  "store/summary.pickup.friendlyName": "En {friendlyName}",
  "store/summary.pickup.quantity": "{pickups, plural, one {, en una recogida} other {, dividido en # pickups}}",
  "store/summary.shipping": "Entrega",
  "store/summary.shipping.address": "En {addressStreet}, {addressNumber}",
  "store/summary.shipping.quantity": "{shippings, plural, one {, en una entrega} other {, dividido en # deliveries}}",
  "store/takeaway.header.title": "Para llevar",
  "store/warnings.delivery.time": "El período de entrega comienza a contar desde el momento en que se confirma el pago.",
  "store/warnings.delivery.tracking": "Se enviará un código de seguimiento a su correo electrónico cuando comience el proceso de entrega.",
  "store/warnings.order.split": "Su compra se dividió en órdenes {numOrders} ya que algunos de los artículos fueron vendidos por los socios. Pero esto no afecta las estimaciones de envío.",
  "store/warnings.payment.approval": "La aprobación del pago puede tardar desde 5 minutos hasta 5 días hábiles.",
  "store/warnings.payment.bankInvoice.approval": "La aprobación de pago para {paymentSystemName} puede demorar hasta 3 días hábiles. Si el pago no es debido, su pedido será cancelado automáticamente.",
  "store/warnings.payment.bankInvoice.value": "Realice un pago de {paymentValue} hasta la fecha de vencimiento de acuerdo con los datos a continuación.",
  "store/warnings.payment.bankInvoice.value.duedate": "Realice un pago de {paymentValue} hasta {paymentDueDate} de acuerdo con los datos a continuación.",
  "store/warnings.pickup.time": "El período de recolección en la tienda comienza desde el momento en que se confirma su pago.",
  "store/warnings.subscription": "Además de los artículos comprados, su pedido incluye una o más suscripciones.",
  "store/order.error.invalid.title": "Página no encontrada",
  "store/order.error.invalid.message": "Parece que esta página ya no existe. Sugerimos que vuelva a la página de inicio.",
  "store/order.error.not-logged-in.title": "Usted no tiene permiso",
  "store/order.error.not-logged-in.message": "No tiene permiso para acceder a esta página. Ingrese su cuenta e inténtelo de nuevo.",
  "store/go-to-login": "Hacer login",
  "store/go-to-home": "Ir a la página principal",
  "store/paymentData.connectorResponse.mb.entity": "Entidad",
  "store/paymentData.connectorResponse.mb.reference": "Referencia"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/common.header.counter": " - رقم {index} من {numPackages}",
  "store/header.bankinvoice.copy": "نسخ",
  "store/header.bankinvoice.embeded.collapse": "طي",
  "store/header.bankinvoice.embeded.expand": "توسيع",
  "store/header.bankinvoice.header": "معلومات حول {paymentSystemName} الخاص بك",
  "store/header.bankinvoice.print": "طباعة {paymentSystemName}",
  "store/header.bankinvoice.help": "هل تجد صعوبة في مشاهد {paymentSystemName} الخاص بك؟",
  "store/header.bankinvoice.tooltip": "{paymentSystemName} الخاص بك يعمل بشكل طبيعي. انقر فوق {message} أو انسخ الرمز الشريطي الخاص بها لمتابعة الدفع.",
  "store/header.email": "في غضون 5 دقائق، ستتلقى رسالة بريد إلكتروني على {userEmail} تحتوي على جميع تفاصيل الشراء. {lineBreak} تذكر أن تتحقق من البريد العشوائي أو صندوق الوارد الخاص بالعروض الترويجية",
  "store/header.guest-email": "في غضون 5 دقائق، ستتلقى رسالة بريد إلكتروني على {userEmail} تحتوي على جميع تفاصيل الشراء. {lineBreak} تذكر أن تتحقق من البريد العشوائي أو صندوق الوارد الخاص بالعروض الترويجية",
  "store/header.newpurchase.button": "بدء طلب جديد",
  "store/header.print.button": "طباعة",
  "store/header.thanks": "شكرًا لك على شرائك!",
  "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.pickup.free": "مجانًا",
  "store/order.totals.total": "المجموع",
  "store/page.title": "تم إجراء الطلب",
  "store/payments.bankinvoice.print": "فتح {paymentSystemName}",
  "store/payments.creditcard": "بطاقة الإئتمان",
  "store/payments.creditcard.lastDigits": "آخر الأرقام: {lastDigits}",
  "store/payments.debitcard": "بطاقة الخصم",
  "store/payments.id": "معرّف الدفع: {id}",
  "store/payments.installments": "({installments}x)",
  "store/payments.transaction.id": "معرّف المعاملة: {id}",
  "store/pickup.header.title": "الإستلام",
  "store/products.isGift": "مجانًا",
  "store/products.quantity": "{quantity, plural, one {# وحدة} other {# وحدات}}",
  "store/shipping.header.title": "التسليم",
  "store/shipping.header.address": "العنوان",
  "store/shipping.header.wishlist.address": "العنوان من: {giftRegistryName}",
  "store/summary.items": "{itemsQuantity, plural, one {# عنصر} other {# عناصر}}",
  "store/summary.pickup": "استلام من المتجر",
  "store/summary.pickup.friendlyName": "في {friendlyName}",
  "store/summary.pickup.quantity": "{pickups, plural, one {استلام واحد في المتجر} other {، تقسيم إلى # استلامات}}",
  "store/summary.shipping": "التسليم",
  "store/summary.shipping.address": "في العنوان {addressStreet}، {addressNumber}",
  "store/summary.shipping.quantity": "{shippings, plural, one {باستلام واحد} other {، تقسيم إلى # استلامات}}",
  "store/takeaway.header.title": "للأخذ بعيدًا",
  "store/warnings.delivery.time": "تبدأ فترة التسليم في العد من لحظة تأكيد الدفع الخاص بك.",
  "store/warnings.delivery.tracking": "سيتم إرسال رمز تتبع إلى بريدك الإلكتروني عندما تبدأ عملية التسليم.",
  "store/warnings.order.split": "تم تقسيم مشترياتك إلى {numOrders} طلبات حيث تم بيع بعض العناصر من قبل الشركاء. لكن هذا لا يؤثر على تقديرات الشحن.",
  "store/warnings.payment.approval": "قد تستغرق الموافقة على الدفع من 5 دقائق إلى 5 أيام عمل.",
  "store/warnings.payment.bankInvoice.approval": "قد تستغرق الموافقة على الدفع لـ {paymentSystemName} ما يصل إلى 3 أيام عمل. إذا لم يكن الدفع مستحقًا، فسيتم إلغاء طلبك تلقائيًا.",
  "store/warnings.payment.bankInvoice.value": "يُرجى إجراء دفعة بقيمة {paymentValue} حتى تاريخ الاستحقاق وفقًا للبيانات الواردة أدناه.",
  "store/warnings.payment.bankInvoice.value.duedate": "يُرجى إجراء دفعة بقيمة {paymentValue} حتى تاريخ {paymentDueDate} وفقًا للبيانات الواردة أدناه.",
  "store/warnings.pickup.time": "تبدأ فترة الاستلام من المتجر من لحظة تأكيد الدفع الخاص بك.",
  "store/warnings.subscription": "إلى جانب العناصر المشتراة، يتضمن طلبك اشتراكًا واحدًا أو أكثر.",
  "store/order.error.invalid.title": "صفحة غير متوفرة",
  "store/order.error.invalid.message": "يبدو أن الصفحة التي تبحث عنها غير موجودة. نقترح عليك العودة إلى الصفحة الرئيسية.",
  "store/order.error.not-logged-in.title": "ليس لديك إذن",
  "store/order.error.not-logged-in.message": "يبدو أنه ليس لديك إذن للوصول إلى هذه الصفحة. حاول تسجيل الدخول والوصول مرة أخرى.",
  "store/go-to-login": "انتقل لصفحة الدخول",
  "store/go-to-home": "انتقل للصفحة الرئيسية",
  "store/paymentData.connectorResponse.mb.entity": "المؤسسة",
  "store/paymentData.connectorResponse.mb.reference": "المرجع"
}

```


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

[Assistant]
Here's the implementation:

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

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)

<!-- ALL-CONTRIBUTORS-BADGE:END -->

# Order Placed

<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->

- [Configuration](#configuration)
- [Blocks](#blocks)
  - [`order-placed`](#order-placed-1)
  - [`op-section`](#op-section)
  - [`op-header`](#op-header)
  - [`op-footer`](#op-footer)
  - [`op-confirmation-icon`](#op-confirmation-icon)
  - [`op-confirmation-title`](#op-confirmation-title)
  - [`op-confirmation-message`](#op-confirmation-message)
  - [`op-print-button`](#op-print-button)
  - [`op-notices`](#op-notices)
  - [`op-summary-section`](#op-summary-section)
  - [`op-bank-invoice-section`](#op-bank-invoice-section)
  - [`op-order`](#op-order)
  - [`op-order-number`](#op-order-number)
  - [`op-order-datetime`](#op-order-datetime)
  - [`op-order-seller`](#op-order-seller)
  - [`op-order-split-notice`](#op-order-split-notice)
  - [`op-order-customer`](#op-order-customer)
  - [`op-order-options`](#op-order-options)
  - [`op-order-payment`](#op-order-payment)
  - [`op-order-delivery-packages`](#op-order-delivery-packages)
  - [`op-order-pickup-packages`](#op-order-pickup-packages)
  - [`op-order-total`](#op-order-total)
- [API](#api)
- [Customization](#customization)
- [Contributing](#contributing)
- [Contributors ✨](#contributors)

<!-- /code_chunk_output -->

## Configuration

The `order-placed` app comes already installed on all stores and with it, it's possible to build your own page with the blocks exported by the app.

After defining a `order-placed` block inside your `store/blocks` directory or in your `blocks.json` file, the page can be constructed with [blocks](#blocks) and customized with [css handles](#css-handles).

_Note: this is the default `order-placed` layout implementation._

```jsonc
// store/blocks/order-placed.jsonc
{
  "order-placed": {
    "blocks": ["op-header", "op-order"]
  },
  "op-header": {
    "children": [
      "op-section#confirmation",
      "op-section#notices",
      "op-summary-section",
      "op-bank-invoice-section"
    ]
  },
  "op-section#confirmation": {
    "props": {
      "name": "confirmation",
      "marginBottom": 9,
      "borderless": true
    },
    "children": [
      "op-confirmation-icon",
      "op-confirmation-title",
      "op-confirmation-message",
      "flex-layout.row#confirmation-buttons"
    ]
  },
  "flex-layout.row#confirmation-buttons": {
    "props": {
      "blockClass": "confirmationButtons",
      "marginTop": 8,
      "marginBottom": 8,
      "horizontalAlign": "center",
      "preventHorizontalStretch": true
    },
    "children": ["flex-layout.col#confirmation-buttons"]
  },
  "flex-layout.col#confirmation-buttons": {
    "children": ["op-print-button"]
  },
  "op-section#notices": {
    "props": {
      "name": "notices",
      "marginBottom": 9,
      "borderless": true
    },
    "children": ["op-notices"]
  },
  // each order section
  "op-order": {
    "children": [
      "flex-layout.row#order-header",
      "op-order-split-notice",
      "op-order-customer",
      "op-section#payments",
      "op-section#pickup-packages",
      "op-section#delivery-packages",
      "op-order-takeaway-packages",
      "op-order-total"
    ]
  },
  // each order header
  "flex-layout.row#order-header": {
    "props": {
      "fullWidth": true,
      "colSizing": "auto",
      "colGap": 5,
      "marginBottom": 5
    },
    "children": [
      "flex-layout.col#order-header-info",
      "flex-layout.col#order-header-options"
    ]
  },
  "flex-layout.col#order-header-info": {
    "children": ["op-order-number", "op-order-datetime", "op-order-seller"]
  },
  "flex-layout.col#order-header-options": {
    "children": ["responsive-layout.desktop#order-options-desktop"]
  },
  "responsive-layout.desktop#order-options-desktop": {
    "children": ["op-order-options"]
  },
  // payment section
  "op-section#payments": {
    "props": {
      "name": "paymentMethods"
    },
    "children": [
      "op-order-payment",
      "responsive-layout.mobile#order-options-mobile"
    ]
  },
  // bottom of top section of order header
  "responsive-layout.mobile#order-options-mobile": {
    "children": ["op-order-options#mobile"]
  },
  "op-order-options#mobile": {
    "props": {
      "blockClass": "mobile",
      "fullWidth": true
    }
  },
  "op-section#pickup-packages": {
    "props": {
      "name": "pickupPackages"
    },
    "children": ["op-order-pickup-packages"]
  },
  "op-section#delivery-packages": {
    "props": {
      "name": "deliveryPackages"
    },
    "children": ["op-order-delivery-packages"]
  }
}
```

Make sure you have the Order Placed page defined in your theme:

```json
  "store.orderplaced": {
    "children": ["order-placed"]
  },
```

## Blocks

### `order-placed`

Main block, responsible for rendering the whole order placed page. It accepts the following blocks:

- [`op-header`](#op-header)
- [`op-order`](#op-order)
- [`op-footer`](#op-footer)

### `op-section`

Splits your page into separate and semantic sections.

**Composition:**
Accepts an array of any kind of children blocks.

**Props:**

| Prop name       | Type                                             | Description                                                    | Default value |
| --------------- | ------------------------------------------------ | -------------------------------------------------------------- | ------------- |
| `borderless`    | `MaybeResponsiveInput<boolean>` | `boolean` | Remove the bottom border of the section                        | `false`       |
| `marginBottom`  | `MaybeResponsiveInput<number>` | `number`   | Margin space below the section                                 | `0`           |
| `paddingBottom` | `MaybeResponsiveInput<number>` | `number`   | Padding space below the section                                | `0`           |
| `width`         | `MaybeResponsiveInput<string>` | `string`   | Width of the section                                           | `100%`        |
| `name`          | `string`                                         | Name of the section. Use it to have custom css handles for it. | `undefined`   |

**CSS Handles:**

| CSS Handles       | Description          |
| ----------------- | -------------------- |
| `section`         | All section blocks   |
| `section--{name}` | Section named `name` |

### `op-header`

Defines the header content of the page.

**Composition:**
Accepts an array of any kind of children blocks.

**Props:** none.

**CSS Handles:**

| CSS Handles         | Description     |
| ------------------- | --------------- |
| `orderPlacedHeader` | The page header |

### `op-footer`

Defines the footer content of the page.

**Composition:**
Accepts an array of any kind of children blocks.

**Props:** none.

**CSS Handles:**

| CSS Handles         | Description     |
| ------------------- | --------------- |
| `orderPlacedFooter` | The page footer |

### `op-confirmation-icon`

Renders the confirmation icon.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle                | Description  |
| ------------------------- | ------------ |
| `confirmationIconWrapper` | Icon wrapper |

| Default appearance                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------- |
| ![op-confirmation-icon](https://user-images.githubusercontent.com/17712401/89224372-c38c5080-d5ae-11ea-8112-9870c854e5a2.png) |

### `op-confirmation-title`

Renders the confirmation title.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle          | Description                     |
| ------------------- | ------------------------------- |
| `confirmationTitle` | Confirmation title `h4` element |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------ |
| ![op-confirmation-title](https://user-images.githubusercontent.com/17712401/89224442-df8ff200-d5ae-11ea-824a-25d7530249dd.png) |

### `op-confirmation-message`

Renders the confirmation message, containing the clients email.

**Composition:** none.

**Props:**

| Prop name            | Type      | Description                                                                                | Default value |
| -------------------- | --------- | --------------------------------------------------------------------------------------------- | ------------- |
| `enableGuestMessage` | `boolean` | Flag that enables a different confirmation message (store/header.guest-email) for guest users | `false`       |

**CSS Handles:**

| CSS Handle            | Description                      |
| --------------------- | -------------------------------- |
| `confirmationMessage` | Confirmation message `p` element |

| Default appearance                                                                                |
| -------------------------------------------------------------------------------------------------------------------------------- |
| ![op-confirmation-message](https://user-images.githubusercontent.com/17712401/89224480-f0406800-d5ae-11ea-8602-0cb9541b0459.png) |

### `op-print-button`

Renders a button that triggers a full page print.

**Composition:** none.

**Props:** none.

**CSS Handles:**: none.

| Default appearance                                                                                |
| ----------------------------------------------------------------------------------------------------------------- |
| ![op-print](https://user-images.githubusercontent.com/17712401/89224547-0817ec00-d5af-11ea-9b6a-9ae33a89daef.png) |

### `op-notices`

Renders a list of important informations relevant to the currently placed order. The messages may vary according to the type of order.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle       | Description                 |
| ---------------- | --------------------------- |
| `noticesList`    | List `ul` element           |
| `noticeListItem` | Each list `li` item element |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------- |
| ![op-notices](https://user-images.githubusercontent.com/17712401/89224594-16fe9e80-d5af-11ea-9c3e-4cfddcf76a4c.png) |

### `op-summary-section`

If a placed order is split between delivery and pickup, renders a summary of all pickup and delivery packages with informations such as number of items, packages, pickup/delivery address and pickup/delivery SLA.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle             | Description                                 |
| ---------------------- | ------------------------------------------- |
| `section--summary`     | Summary whole section                       |
| `summaryRow`           | Row wrapper of both summary boxes           |
| `summaryCol`           | Column wrapper of each summary box          |
| `summaryAddress`       | Wrapper of the pickup address               |
| `summaryBox`           | Surrounding box of the summary              |
| `summaryBox--delivery` | Surrounding box of the delivery summary     |
| `summaryBox--pickup`   | Surrounding box of the pickup summary       |
| `summaryContent`       | Wrapper of the whole content of the box     |
| `summaryItems`         | Wrapper of the number of items and packages |
| `summaryShippingSLA`   | Wrapper of the shipping SLA information     |
| `summaryTitle`         | Box `h5` title element                      |

| Default appearance                                                                                |
| --------------------------------------------------------------------------------------------------------------------------- |
| ![op-summary-section](https://user-images.githubusercontent.com/17712401/89224626-267de780-d5af-11ea-80c1-7771c6dae670.png) |

### `op-bank-invoice-section`

Renders the bank invoice section if payment method chosen was bank invoice.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle                   | Description                                   |
| ---------------------------- | --------------------------------------------- |
| `section--bankInvoice`       | Bank invoice whole section                    |
| `barCodeWrapper`             | Wrapper of the barcode number and copy button |
| `barCodeNumber`              | Barcode number element                        |
| `barCodeCopyButtonWrapper`   | Wrapper of the copy button                    |
| `bankInvoiceEmbedWrapper`    | Wrapper of the bank invoice iframe            |
| `bankInvoiceEmbedBackground` | Background of the bank invoice iframe         |
| `bankInvoiceEmbed`           | Embed of the bank invoice PDF                 |

| Default appearance                                                                                |
| -------------------------------------------------------------------------------------------------------------------------------- |
| ![op-bank-invoice-section](https://user-images.githubusercontent.com/17712401/89224654-3695c700-d5af-11ea-9b17-98c68450370d.png) |

### `op-order`

Defines an order context to be able to render its meta information and packages. Must be used to display order data.

**Composition:**
Accepts an array of any kind of children blocks.

**Props:** none.

**CSS Handles:**

| CSS Handle     | Description                                       |
| -------------- | ------------------------------------------------- |
| `orderWrapper` | Wrapper of an order meta information and packages |

### `op-order-number`

Renders the order id number. Must be placed inside an [`op-order`](#op-order) block.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle    | Description               |
| ------------- | ------------------------- |
| `orderNumber` | Order number `h3` element |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------ |
| ![op-order-number](https://user-images.githubusercontent.com/17712401/89224695-4c0af100-d5af-11ea-866e-bea733073346.png) |

### `op-order-datetime`

Renders the date and time an order was placed. Must be placed inside an [`op-order`](#op-order) block.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle      | Description                         |
| --------------- | ----------------------------------- |
| `orderDatetime` | Order date and time `small` element |

| Default appearance                                                                                |
| -------------------------------------------------------------------------------------------------------------------------- |
| ![op-order-datetime](https://user-images.githubusercontent.com/17712401/89224728-5a590d00-d5af-11ea-8901-7654c543d9e9.png) |

### `op-order-seller`

Renders the seller of an order. Must be placed inside an [`op-order`](#op-order) block.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle    | Description                   |
| ------------- | ----------------------------- |
| `orderSoldBy` | Seller phrase `small` element |
| `orderSeller` | Seller name `span` element    |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------ |
| ![op-order-seller](https://user-images.githubusercontent.com/17712401/89224779-765cae80-d5af-11ea-9320-29902e7f47dd.png) |

### `op-order-split-notice`

Renders a message with the number of packages of an order if the order was split in more than one package. Must be placed inside an [`op-order`](#op-order) block.

**Composition:** none.

**Props:** none.

**CSS Handles:**

| CSS Handle    | Description                    |
| ------------- | ------------------------------ |
| `splitNotice` | Wrapper of the message element |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------ |
| ![op-order-split-notice](https://user-images.githubusercontent.com/17712401/89224825-88d6e800-d5af-11ea-8801-7f2d5267da5b.png) |

### `op-order-customer`

Renders the customer information. Must be placed inside an [`op-order`](#op-order) block.

**Composition:** none.

**Props:** none.

**CSS Handles:** none.

| Default appearance                                                                                |
| -------------------------------------------------------------------------------------------------------------------------- |
| ![op-order-customer](https://user-images.githubusercontent.com/17712401/89224880-a015d580-d5af-11ea-8314-bc223b3da0aa.png) |

### `op-order-options`

Renders the customer information. Must be placed inside an [`op-order`](#op-order) block.

**Composition:** none.

**Props:**

| Prop name       | Type      | Description                                                                                | Default value |
| --------------- | --------- | ------------------------------------------------------------------------------------------ | ------------- |
| `fullWidth`     | `boolean` | Make the options wrapper take full horizontal space                                        | `false`       |
| `myAccountPath` | `string`  | The path to redirect a user to their profile page (rendered by the `vtex.my-account` app). | `/account`    |

**CSS Handles:**

| CSS Handles           | Description                   |
| --------------------- | ----------------------------- |
| `orderOptionsWrapper` | Wrapper of the option buttons |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------- |
| ![op-order-options](https://user-images.githubusercontent.com/17712401/89224923-b754c300-d5af-11ea-8b28-0efa82329e96.png) |

### `op-order-payment`

Renders the customer information. Must be placed inside an [`op-order`](#op-order) block.

**Composition:** none.

**CSS Handles:**

| CSS Handles           | Description                         |
| --------------------- | ----------------------------------- |
| `orderPaymentWrapper` | Wrapper of the payment methods list |
| `orderPaymentItem`    | Wrapper of each payment method item |

| Default appearance                                                                                |
| ------------------------------------------------------------------------------------------------------------------------- |
| ![op-order-payment](https://user-images.githubusercontent.com/17712401/89225037-eec36f80-d5af-11ea-82af-267cb69c7d7b.png) |

### `op-order-delivery-packages`

Renders an order delivery packages information and product list. Must be placed inside an [`op-order`](#op-order) block.

**Composition:** none.

**CSS Handles:**

| CSS Handles               | Description                                    |
| ------------------------- | ---------------------------------------------- |
| `package`                 | All package sections                           |
| `package--delivery`       | The delivery package section                   |
| `packageHeaderColumn`     | Column of header of a package section          |
| `packageHeader`           | Header of a package section                    |
| `packageHeader--delivery` | Header of the delivery package section         |
| `packageShippingEstimate` | Delivery estimate `small` element              |
| `packageAddressWrapper`   | Wrapper of the package shipping address        |
| `packageAddressTitle`     | Wrapper of the address title                   |
| `packageDeliveryTitle`    | Wrapper of the delivery title                  |
| `productList`             | Product list `ul` element                      |
| `productListItem`         | Product list `li` item element                 |
| `productWrapper`          | Wrapper of a single product                    |
| `productImageColumn`      | Column of a product's image                    |
| `productImageWrapper`     | Wrapper of a product's image                   |
| `productInfoColumn`       | Column of a product's information              |
| `productName`             | Product's `a` element                          |
| `productMeasurementUnit`  | Product's measurement unit `small` element     |
| `productQuantity`         | Product's quantity `small` element             |
| `productPrice`            | Product's price                                |
| `attachmentWrapper`       | Wrapper for a product's attachment             |
| `attachmentHeader`        | Header of an attachment                        |
| `attachmentTitle`         | Title of a attachment                          |
| `attachmentToggleWrapper` | Wrapper of the toggle button of an attachment  |
| `attachmentToggleButton`  | Button for toggling the attachment's accordion |
| `attachmentToggleLabel`   | Attachment's toggle label                      |
| `attachmentContent`       | Attachment's content wrapper                   |
| `attachmentContentItem`   | Each attachment's content paragraph            |

| Default appearance                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------- |
| ![op-order-delivery-packages](https://user-images.githubusercontent.com/17712401/89225054-f8e56e00-d5af-11ea-9c0a-b2cc37fe34f4.png) |

### `op-order-pickup-packages`

Renders an order pickup packages information and product list. Must be placed inside an [`op-order`](#op-order) block.

**Composition:** none.

**CSS Handles:**

_Note: Include the same CSS handles as [`op-order-delivery-packages`](#op-order-delivery-packages)_

| CSS Handles             | Description                                                  |
| ----------------------- | ------------------------------------------------------------ |
| `package`               | All package sections                                         |
| `package--pickup`       | The pickup package section                                   |
| `packageInfoWrapper`    | Wrapper of a **pickup** package's information                |
| `packageReceiver`       | Package's **pickup** receiver information container          |
| `packageReceiverName`   | Name of the package's **pickup** receiver                    |
| `packageAdditionalInfo` | Wrapper of additional information about a **pickup** package |

| Default appearance                                                                                |
| --------------------------------------------------------------------------------------------------------------------------------- |
| ![op-order-pickup-packages](https://user-images.githubusercontent.com/17712401/89225074-03076c80-d5b0-11ea-840e-69998a41ec9d.png) |

### `op-order-total`

Renders an order delivery packages information and product list. Must be placed inside an [`op-order`](#op-order) block.

**Composition:** none.

**CSS Handles:**

| CSS Handles          | Description                                 |
| -------------------- | ------------------------------------------- |
| `totalListWrapper`   | Wrapper of the total price list of an order |
| `totalList`          | An order's total list `ul` element          |
| `totalListItem`      | An order's total item `li` element          |
| `totalListItemLabel` | Label of a price item                       |
| `totalListItemValue` | Value of a price item                       |

| Default appearance                                                                                |
| ----------------------------------------------------------------------------------------------------------------------- |
| ![op-order-total](https://user-images.githubusercontent.com/17712401/89225092-0b5fa780-d5b0-11ea-976e-da3c64453eff.png) |

## API

The `order-placed` app exports two hooks to allow customization using the current order data: `useOrderGroup` and `useOrder`.

`useOrderGroup`: used to get the data of the current order group. An order group is the collection of all orders created by an users's purchase.

```js
import { useOrderGroup } from 'vtex.order-placed/OrderGroupContext'

//...
const orderGroup = useOrderGroup()
```

`useOrder`: used to get the data of the current order being accessed in the order loop.

```js
import { useOrder } from 'vtex.order-placed/OrderContext'

//...
const order = useOrder()
```

## 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                  |
| ---------------------------- |
| `attachmentContent`          |
| `attachmentContentItem`      |
| `attachmentHeader`           |
| `attachmentTitle`            |
| `attachmentToggleButton`     |
| `attachmentToggleLabel`      |
| `attachmentToggleWrapper`    |
| `attachmentWrapper`          |
| `bankInvoiceEmbed`           |
| `bankInvoiceEmbedBackground` |
| `bankInvoiceEmbedWrapper`    |
| `barCodeCopyButtonWrapper`   |
| `barCodeContainer`           |
| `barCodeNumber`              |
| `barCodeWrapper`             |
| `confirmationIconWrapper`    |
| `confirmationMessage`        |
| `confirmationTitle`          |
| `errorMessage`               |
| `errorTitle`                 |
| `errorWrapper`               |
| `noticeListItem`             |
| `noticesList`                |
| `orderDatetime`              |
| `orderList`                  |
| `orderListItem`              |
| `orderNumber`                |
| `orderOptionsWrapper`        |
| `orderPaymentItem`           |
| `orderPaymentWrapper`        |
| `orderPlacedFooter`          |
| `orderPlacedHeader`          |
| `orderPlacedMainWrapper`     |
| `orderPlacedWrapper`         |
| `orderSeller`                |
| `orderSoldBy`                |
| `orderWrapper`               |
| `package--delivery`          |
| `package--pickup`            |
| `package`                    |
| `packageAdditionalInfo`      |
| `packageAddressWrapper`      |
| `packageGiftDescription`     |
| `packageHeader--delivery`    |
| `packageHeader--pickup`      |
| `packageHeader`              |
| `packageHeaderColumn`        |
| `packageInfoWrapper`         |
| `packageReceiver`            |
| `packageReceiverName`        |
| `packageShippingEstimate`    |
| `packageSLA`                 |
| `printButtonWrapper`         |
| `printHintWrapper`           |
| `productImageColumn`         |
| `productImageWrapper`        |
| `productInfoColumn`          |
| `productName`                |
| `productListItem`            |
| `productList`                |
| `productMeasurementUnit`     |
| `productPrice`               |
| `productQuantity`            |
| `productWrapper`             |
| `section--bank-invoice`      |
| `section--confirmation`      |
| `section--deliveryPackages`  |
| `section--notices`           |
| `section--paymentMethod`     |
| `section--pickupPackages`    |
| `section--summary`           |
| `section`                    |
| `splitNotice`                |
| `summaryRow`                 |
| `summaryCol`                 |
| `summaryAddress`             |
| `summaryBox--delivery`       |
| `summaryBox--pickup`         |
| `summaryBox`                 |
| `summaryContent`             |
| `summaryItems`               |
| `summaryShipping`            |
| `summaryTitle`               |
| `totalList`                  |
| `totalListItem`              |
| `totalListItemLabel`         |
| `totalListItemValue`         |
| `totalListWrapper`           |

## Contributing

Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.

## 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/gustavopvasconcellos"><img src="https://avatars1.githubusercontent.com/u/49173685?v=4?s=100" width="100px;" alt=""/><br /><sub><b>gustavopvasconcellos</b></sub></a><br /><a href="https://github.com/vtex-apps/order-placed/commits?author=gustavopvasconcellos" title="Code">💻</a></td>
    <td align="center"><a href="https://razvanudrea.com"><img src="https://avatars.githubusercontent.com/u/71461884?v=4?s=100" width="100px;" alt=""/><br /><sub><b>razvanudream</b></sub></a><br /><a href="https://github.com/vtex-apps/order-placed/commits?author=razvanudream" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/claudiu-iviteb"><img src="https://avatars.githubusercontent.com/u/73105476?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Claudiu Ionita</b></sub></a><br /><a href="https://github.com/vtex-apps/order-placed/commits?author=claudiu-iviteb" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- 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 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-placed/react/OrderDatetime.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage, FormattedTime, FormattedDate } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import { useOrder } from './components/OrderContext'

const CSS_HANDLES = ['orderDatetime']

const OrderDate = () => {
  const { creationDate } = useOrder()
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <small className={`${handles.orderDatetime} c-muted-2 t-body lh-copy`}>
      <FormattedMessage
        id="store/order.header.date"
        values={{
          orderDate: (
            <time dateTime={creationDate}>
              <FormattedDate value={creationDate} />
            </time>
          ),
          orderTime: (
            <time dateTime={creationDate}>
              <FormattedTime value={creationDate} />
            </time>
          ),
        }}
      />
    </small>
  )
}

export default OrderDate

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useState } from 'react'
import { useQuery } from 'react-apollo'
import { useIntl, defineMessages } from 'react-intl'
import { Helmet, ExtensionPoint, useRuntime } from 'vtex.render-runtime'
import { usePWA } from 'vtex.store-resources/PWAContext'
import { useCssHandles } from 'vtex.css-handles'

import { OrderGroupContext } from './components/OrderGroupContext'
import { CurrencyContext } from './components/CurrencyContext'
import ForbiddenError from './components/Errors/ForbiddenError'
import InvalidError from './components/Errors/InvalidError'
import OrderList from './components/OrderList'
import Skeleton from './Skeleton'
import Analytics from './Analytics'
import GET_ORDER_GROUP from './graphql/getOrderGroup.graphql'

// to load default css handle styles
import './styles.css'

interface OrderGroupData {
  orderGroup: OrderGroup
}

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

const CSS_HANDLES = ['orderPlacedWrapper', 'orderPlacedMainWrapper']

const OrderPlaced: FC = () => {
  const handles = useCssHandles(CSS_HANDLES)
  const { formatMessage } = useIntl()
  const runtime = useRuntime()
  const { settings = {} } = usePWA() || {}
  const [installDismissed, setInstallDismissed] = useState(false)
  const { data, loading, error } = useQuery<OrderGroupData>(GET_ORDER_GROUP, {
    variables: {
      orderGroup: runtime.query.og,
    },
  })

  // render loading skeleton if query is still loading
  if (loading) return <Skeleton />

  // forbidden error
  if (
    error?.message.includes('403') ||
    // 'any' needed because graphql error type doesn't have 'extensions' prop
    (error as any)?.extensions?.response?.status === 403
  ) {
    return <ForbiddenError />
  }

  // not found error
  if (data?.orderGroup?.orders == null) {
    return <InvalidError />
  }

  const { orderGroup }: { orderGroup: OrderGroup } = data
  const { promptOnCustomEvent } = settings

  return (
    <OrderGroupContext.Provider value={orderGroup}>
      <CurrencyContext.Provider
        value={orderGroup.orders[0].storePreferencesData.currencyCode}
      >
        <Helmet>
          <title>{formatMessage(messages.title)}</title>
        </Helmet>

        <div className={`${handles.orderPlacedWrapper} pt9 sans-serif`}>
          <Analytics eventList={orderGroup.analyticsData} />

          <ExtensionPoint id="op-header" />

          <div
            role="main"
            className={`${handles.orderPlacedMainWrapper} mv6 w-80-ns w-90 center`}
          >
            <OrderList />

            {promptOnCustomEvent === 'checkout' && !installDismissed && (
              <ExtensionPoint
                id="promotion-banner"
                type="install"
                onDismiss={() => setInstallDismissed(true)}
              />
            )}
          </div>

          <ExtensionPoint id="op-footer" />
        </div>
      </CurrencyContext.Provider>
    </OrderGroupContext.Provider>
  )
}

export default OrderPlaced

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import { useOrderGroup } from './components/OrderGroupContext'

const CSS_HANDLES = ['confirmationTitle'] as const

const ConfirmationTitle: FC = () => {
  const handles = useCssHandles(CSS_HANDLES)
  const orderGroup = useOrderGroup()
  const profile = orderGroup.orders[0].clientProfileData

  return (
    <h4
      className={`${handles.confirmationTitle} tc c-on-base mt7 mb0 t-heading-4`}
    >
      <FormattedMessage
        id="store/header.thanks"
        values={{
          firstName: profile.firstName,
          lastName: profile.lastName,
        }}
      />
    </h4>
  )
}
export default ConfirmationTitle

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
import { ButtonWithIcon, Tooltip, IconInfo } from 'vtex.styleguide'
import { useCssHandles } from 'vtex.css-handles'

import PrinterIcon from './Icons/PrinterIcon'
import BarCode from './components/BankInvoice/BarCode'
import Embedded from './components/BankInvoice/Embedded'
import { useOrderGroup } from './components/OrderGroupContext'
import { getPaymentMethodsInfoFromOrder, parseBankInvoiceUrl } from './utils'
import Section from './Section'

const CSS_HANDLES = [
  'barCodeContainer',
  'printButtonWrapper',
  'printHintWrapper',
] as const

const messages = defineMessages({
  print: { id: 'store/header.bankinvoice.print', defaultMessage: '' },
  tooltip: { id: 'store/header.bankinvoice.tooltip', defaultMessage: '' },
})

const BankInvoiceSection: FC = () => {
  const handles = useCssHandles(CSS_HANDLES)
  const orderGroup = useOrderGroup()
  const { formatMessage } = useIntl()

  const paymentMethodsFromOrder = getPaymentMethodsInfoFromOrder(
    orderGroup.orders[0]
  )
  const bankInvoice = paymentMethodsFromOrder
    .flat()
    .find(({ paymentGroup, url }) => paymentGroup === 'bankInvoice' && !!url)

  const { url, paymentSystemName, barCodeNumber } =
    bankInvoice ?? paymentMethodsFromOrder[0]
  const isURLValid = url && !url.match(/(\*.\*.)+\*\w\*/g)

  if (!isURLValid && !barCodeNumber) {
    return null
  }

  const parsedUrl = url ? parseBankInvoiceUrl(url) : ''
  const printInvoice = formatMessage(messages.print, { paymentSystemName })
  const tooltip = formatMessage(messages.tooltip, {
    paymentSystemName,
    message: `"${printInvoice}"`,
  })

  return (
    <Section
      name="bank-invoice"
      marginBottom={9}
      paddingBottom={9}
      width={{ mobile: '90%', desktop: '80%' }}
    >
      <header className="t-heading-4">
        <FormattedMessage
          id="store/header.bankinvoice.header"
          values={{ paymentSystemName }}
        />
      </header>
      <div
        className={`${handles.barCodeContainer} flex-l justify-between items-center mt6`}
      >
        {barCodeNumber && <BarCode barCodeNumber={barCodeNumber} />}
        {isURLValid && (
          <div
            className={`${handles.printButtonWrapper} mt5 mt0-l ${
              barCodeNumber ? 'ml5-l' : ''
            }`}
          >
            <ButtonWithIcon
              href={parsedUrl}
              icon={<PrinterIcon />}
              variation="secondary"
              target="_blank"
            >
              {printInvoice}
            </ButtonWithIcon>
          </div>
        )}
      </div>
      {isURLValid && (
        <div className="mt6">
          <Embedded url={parsedUrl} />
        </div>
      )}
      <div
        className={`${handles.printHintWrapper} c-muted-1 mt6 t-small mb9 flex`}
      >
        <FormattedMessage
          id="store/header.bankinvoice.help"
          values={{ paymentSystemName }}
        />
        <Tooltip label={tooltip} position="bottom">
          <span className="c-muted-3 flex items-center ml3">
            <IconInfo size={12} />
          </span>
        </Tooltip>
      </div>
    </Section>
  )
}

export default BankInvoiceSection

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['orderWrapper']

const Order: FC = ({ children }) => {
  const handles = useCssHandles(CSS_HANDLES)
  return <div className={handles.orderWrapper}>{children}</div>
}

export default Order

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useEffect, useState } from 'react'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import { useOrderGroup } from './components/OrderGroupContext'
import { useSessionResponse } from './utils/useSessionResponse'

const CSS_HANDLES = ['confirmationMessage']

interface Props {
  enableGuestMessage: boolean
}

const ConfirmationMessage: FC<Props> = ({
  enableGuestMessage = false,
}: Props) => {
  const handles = useCssHandles(CSS_HANDLES)
  const orderGroup = useOrderGroup()
  const profile = orderGroup.orders[0].clientProfileData
  const sessionResponse = useSessionResponse()
  const [isLoggedIn, setIsLoggedIn] = useState(true)

  useEffect(() => {
    setIsLoggedIn(!!sessionResponse?.namespaces?.profile?.email)
  }, [sessionResponse, setIsLoggedIn])

  // by default "header.email" and "header.guest-email" texts are the same
  // if the customer enables the guest message option, they will also need to change the guest text via GraphQL

  return (
    <p
      className={`${handles.confirmationMessage} mt5 t-body tc c-muted-1 lh-copy`}
    >
      {!isLoggedIn && enableGuestMessage ? (
        <FormattedMessage
          id="store/header.guest-email"
          values={{
            lineBreak: <br />,
            userEmail: <strong className="nowrap">{profile.email}</strong>,
          }}
        />
      ) : (
        <FormattedMessage
          id="store/header.email"
          values={{
            lineBreak: <br />,
            userEmail: <strong className="nowrap">{profile.email}</strong>,
          }}
        />
      )}
    </p>
  )
}
export default ConfirmationMessage

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { PaymentMethod } from 'vtex.order-details'
import { useCssHandles } from 'vtex.css-handles'

import { useOrder } from './components/OrderContext'
import { useCurrency } from './components/CurrencyContext'

const CSS_HANDLES = ['orderPaymentWrapper', 'orderPaymentItem']

const OrderPayment = () => {
  const order = useOrder()
  const currency = useCurrency()
  const handles = useCssHandles(CSS_HANDLES)

  const [{ payments, transactionId }] = order.paymentData.transactions

  return (
    <div
      className={`${handles.orderPaymentWrapper} flex flex-column flex-row-m`}
    >
      {payments.map((payment, idx) => (
        <div key={idx} className={`${handles.orderPaymentItem} pb8-s mr9-m`}>
          <PaymentMethod
            payment={payment}
            transactionId={transactionId}
            currency={currency}
          />
        </div>
      ))}
    </div>
  )
}

export default OrderPayment

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage } from 'react-intl'
import { Button } from 'vtex.styleguide'

const PrintButton: FC = () => {
  return (
    <Button variation="secondary" onClick={() => window.print()}>
      <FormattedMessage id="store/header.print.button" />
    </Button>
  )
}
export default PrintButton

```


[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-placed/react/styles.css from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```css
.errorWrapper {
  margin: 200px auto;
  max-width: 36em;
}

.errorMessage {
  max-width: 24em;
}

.confirmationIconWrapper {
  line-height: 0;
}

.orderOptionsWrapper--mobile {
  margin-bottom: 2rem;
}

.noticeListItem:last-child {
  border-bottom: none;
}

.barCodeNumber {
  word-break: break-all;
}

.orderListItem:last-child,
.productListItem:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 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-placed/react/OrderSplitNotice.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { OrderSplitNotice } from 'vtex.order-details'
import { useIntl } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import { useOrder } from './components/OrderContext'

const CSS_HANDLES = ['splitNotice']

const WrappedOrderSplitNotice = () => {
  const handles = useCssHandles(CSS_HANDLES)
  const order = useOrder()
  const intl = useIntl()

  if (order.deliveryParcels.length < 2) {
    return null
  }

  return (
    <div className={`${handles.splitNotice} mb5`}>
      <OrderSplitNotice
        deliveries={order.deliveryParcels.length}
        pickups={order.pickUpParcels.length}
        takeaways={order.takeAwayParcels.length}
        intl={intl}
      />
    </div>
  )
}

export default WrappedOrderSplitNotice

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, Fragment } from 'react'
import { applyModifiers, useCssHandles } from 'vtex.css-handles'

import { useOrder } from './components/OrderContext'
import ProductList from './components/ProductList'
import StorePickUpHeader from './components/PickUpHeader'

const CSS_HANDLES = ['package', 'packageHeaderColumn']

const PickupPackages: FC = () => {
  const handles = useCssHandles(CSS_HANDLES)
  const { pickUpParcels } = useOrder()

  if (pickUpParcels.length === 0) {
    return null
  }

  return (
    <Fragment>
      {pickUpParcels.map((pickup: Parcel, index: number) => (
        <div
          className={`${applyModifiers(
            handles.package,
            'pickup'
          )} mv8 flex-l justify-between flex-column flex-row-m`}
          key={index}
        >
          <div className={handles.packageHeaderColumn}>
            <StorePickUpHeader
              shippingData={pickup}
              index={index}
              numPackages={pickUpParcels.length}
            />
          </div>
          <ProductList products={pickup.items} />
        </div>
      ))}
    </Fragment>
  )
}

export default PickupPackages

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { Tooltip, IconInfo } from 'vtex.styleguide'
import TranslateTotalizer from 'vtex.totalizer-translator/TranslateTotalizer'

import FormattedPrice from './components/FormattedPrice'

interface Props {
  taxesTotals: OrderItemTotal[]
}

const TaxInfo: FunctionComponent<Props> = ({ taxesTotals }) => {
  const tooltipLabel = (
    <ul className="list pa0 ma0">
      {taxesTotals.map((total) => (
        <li className="flex justify-between items-center" key={total.name}>
          <span className="pr5">
            <TranslateTotalizer totalizer={total} />
          </span>
          <span>
            <FormattedPrice value={total.value} />
          </span>
        </li>
      ))}
    </ul>
  )

  return (
    <Tooltip label={tooltipLabel}>
      <span className="pointer flex items-start">
        <IconInfo size={12} />
      </span>
    </Tooltip>
  )
}

export default TaxInfo

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { useCssHandles, applyModifiers } from 'vtex.css-handles'
import { useResponsiveValues } from 'vtex.responsive-values'

interface Props {
  borderless?: MaybeResponsiveInput<boolean>
  marginBottom?: MaybeResponsiveInput<number>
  paddingBottom?: MaybeResponsiveInput<number>
  width?: MaybeResponsiveInput<string>
  name: string
}

const CSS_HANDLES = ['section']

const Section: FC<Props> = ({ children, name, ...layoutProps }) => {
  const handles = useCssHandles(CSS_HANDLES)

  const {
    borderless,
    width,
    marginBottom,
    paddingBottom,
  } = useResponsiveValues(layoutProps)

  const classes = [
    'center',
    applyModifiers(handles.section, name),
    marginBottom && `mb${marginBottom}`,
    paddingBottom && `pb${paddingBottom}`,
    !borderless && 'bb b--muted-4',
  ]
    .filter(Boolean)
    .join(' ')

  return (
    <section data-testid={name} className={classes} style={{ width }}>
      {children}
    </section>
  )
}

export default Section

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { CustomerInfo } from 'vtex.order-details'

import { useOrder } from './components/OrderContext'

const OrderCustomerInfo = () => {
  const { clientProfileData } = useOrder()

  if (
    clientProfileData.firstName == null ||
    clientProfileData.lastName == null
  ) {
    return null
  }

  return <CustomerInfo profile={clientProfileData} />
}

export default OrderCustomerInfo

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage } from 'react-intl'
import TranslateTotalizer from 'vtex.totalizer-translator/TranslateTotalizer'
import { applyModifiers, useCssHandles } from 'vtex.css-handles'

import FormattedPrice from './components/FormattedPrice'
import { useOrder } from './components/OrderContext'
import { getTotals } from './utils'
import TaxInfo from './TaxInfo'

const CSS_HANDLES = [
  'totalListWrapper',
  'totalList',
  'totalListItem',
  'totalListItemLabel',
  'totalListItemValue',
] as const

const OrderTotal: FC = () => {
  const { items, totals, value: totalValue } = useOrder()
  const handles = useCssHandles(CSS_HANDLES)
  const numItems = items.reduce((acc, item) => {
    if (item.parentItemIndex === null) {
      return acc + item.quantity
    }
    return acc
  }, 0)
  const [newTotals, taxes] = getTotals(totals)

  return (
    <div className={`${handles.totalListWrapper} flex-l justify-end w-100`}>
      <ul
        className={`${handles.totalList} list pa0 mt8 w-100 w-60-l c-muted-1`}
      >
        {newTotals.map((total, i) => {
          if (total.value === 0) {
            return null
          }

          return (
            <li
              className={`${applyModifiers(
                handles.totalListItem,
                total.id
              )} pv3 flex justify-between items-center`}
              key={`${total.id}_${i}`}
            >
              <span className={`${handles.totalListItemLabel} flex`}>
                <TranslateTotalizer totalizer={total} />
                {total.id === 'Items' && ` (${numItems})`}
                {total.id === 'Tax' && taxes.length > 0 && (
                  <div className="ml2 mt1">
                    <TaxInfo taxesTotals={taxes} />
                  </div>
                )}
              </span>
              <span className={`${handles.totalListItemValue} c-on-base`}>
                <FormattedPrice value={total.value} />
              </span>
            </li>
          )
        })}
        <li
          className={`${handles.totalListItem} pv3 flex justify-between items-center c-on-base t-heading-2-ns t-heading-3`}
        >
          <strong className={`${handles.totalListItemLabel}`}>
            <FormattedMessage id="store/order.totals.total" />
          </strong>
          <strong className={`${handles.totalListItemValue}`}>
            <FormattedPrice value={totalValue} />
          </strong>
        </li>
      </ul>
    </div>
  )
}

export default OrderTotal

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FC } from 'react'
import { FormattedMessage, FormattedDate } from 'react-intl'
import { Button } from 'vtex.styleguide'
import { useCssHandles } from 'vtex.css-handles'

import FormattedPrice from './components/FormattedPrice'
import { useOrderGroup } from './components/OrderGroupContext'
import { parseBankInvoiceUrl, getPaymentMethodsInfoFromOrder } from './utils'

const CSS_HANDLES = ['noticesList', 'noticeListItem']

// TODO: add json schema to add/remove extra notice messages
const Notices: FC = () => {
  const handles = useCssHandles(CSS_HANDLES)
  const { orders, totalDeliveryParcels, totalPickUpParcels } = useOrderGroup()
  const hasDelivery = totalDeliveryParcels.length > 0
  const hasPickUp = totalPickUpParcels.length > 0

  if (!hasDelivery && !hasPickUp) {
    return null
  }

  const numOrders = orders.length
  const isSplitOrder = numOrders > 1

  const paymentMethodsFromOrders = orders.map(getPaymentMethodsInfoFromOrder)

  const bankInvoice = paymentMethodsFromOrders
    .flat()
    .find(({ paymentGroup, url }) => paymentGroup === 'bankInvoice' && !!url)

  const listItems = [
    bankInvoice == null && (
      <FormattedMessage id="store/warnings.payment.approval" />
    ),
    hasDelivery && <FormattedMessage id="store/warnings.delivery.time" />,
    hasDelivery && <FormattedMessage id="store/warnings.delivery.tracking" />,
    hasPickUp && <FormattedMessage id="store/warnings.pickup.time" />,
    isSplitOrder && (
      <FormattedMessage
        id="store/warnings.order.split"
        values={{ numOrders }}
      />
    ),
    bankInvoice != null && (
      <FormattedMessage
        id="store/warnings.payment.bankInvoice.approval"
        values={{ paymentSystemName: bankInvoice.paymentSystemName }}
      />
    ),
    bankInvoice != null && (
      <Fragment>
        {bankInvoice.dueDate ? (
          <FormattedMessage
            id="store/warnings.payment.bankInvoice.value.duedate"
            values={{
              paymentDueDate: (
                <strong>
                  <FormattedDate value={bankInvoice.dueDate} timeZone="utc" />
                </strong>
              ),
              paymentValue: (
                <strong>
                  <FormattedPrice value={bankInvoice.value} />
                </strong>
              ),
            }}
          />
        ) : (
          <FormattedMessage
            id="store/warnings.payment.bankInvoice.value"
            values={{
              paymentValue: (
                <strong>
                  <FormattedPrice value={bankInvoice.value} />
                </strong>
              ),
            }}
          />
        )}
        <div className="mt4">
          {bankInvoice.url && (
            <Button
              href={parseBankInvoiceUrl(bankInvoice.url)}
              variation="primary"
              target="_blank"
            >
              <FormattedMessage
                id="store/payments.bankinvoice.print"
                values={{ paymentSystemName: bankInvoice.paymentSystemName }}
              />
            </Button>
          )}
        </div>
      </Fragment>
    ),
  ].filter(Boolean)

  return (
    <ul
      className={`${handles.noticesList} list ma0 pl0 t-body bg-muted-5 tc-m lh-copy`}
    >
      {listItems.map((item, index) => (
        <li
          className={`${handles.noticeListItem} pv6 w-80-ns w-90 center c-on-base b--muted-4 bb`}
          key={index}
        >
          {item}
        </li>
      ))}
    </ul>
  )
}

export default Notices

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['orderPlacedFooter']

const Footer: FC = ({ children }) => {
  const handles = useCssHandles(CSS_HANDLES)
  return <footer className={handles.orderPlacedFooter}>{children}</footer>
}

export default Footer

```


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

[User] Show me the implementation of order-placed/react/Analytics.tsx from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useEffect, FC } from 'react'
import { withPixel } from 'vtex.pixel-manager/PixelContext'
import { useRuntime } from 'vtex.render-runtime'

interface Props {
  push: (...args: any) => void
  runtime: any
  eventList: any[]
}

const Analytics: FC<Props> = ({ eventList, push }) => {
  const { route } = useRuntime()

  useEffect(() => {
    eventList.forEach((event) => push(event))
  }, [eventList, push, route.path])

  return null
}

export default withPixel(Analytics)

```


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

[Assistant]
Here's the implementation:

```json
{
  "version": "2.19.0",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "@vtex/estimate-calculator": "^1.1.0",
    "apollo-client": "^2.6.8",
    "lodash": "^4.17.15",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-clipboard.js": "^2.0.16",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/jest": "^25.1.4",
    "@types/lodash": "^4.14.156",
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^3.1.0",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "typescript": "3.9.7",
    "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.26.1/public/@types/vtex.address-form",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
    "vtex.flex-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.flex-layout@0.21.3/public/@types/vtex.flex-layout",
    "vtex.order-details": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-details@1.10.1/public/@types/vtex.order-details",
    "vtex.order-placed": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-placed@2.18.0/public/@types/vtex.order-placed",
    "vtex.order-placed-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-placed-graphql@1.18.4/public/@types/vtex.order-placed-graphql",
    "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.9.0/public/@types/vtex.pixel-manager",
    "vtex.profile-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.profile-form@3.19.0/public/@types/vtex.profile-form",
    "vtex.pwa-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pwa-components@0.4.1/public/@types/vtex.pwa-components",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.135.1/public/@types/vtex.render-runtime",
    "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.4/public/@types/vtex.responsive-layout",
    "vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-values@0.4.2/public/@types/vtex.responsive-values",
    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/public/@types/vtex.shipping-estimate-translator",
    "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.101.2/public/@types/vtex.store-resources",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.13/public/@types/vtex.styleguide",
    "vtex.totalizer-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.totalizer-translator@2.6.1/public/@types/vtex.totalizer-translator"
  }
}

```


[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-placed/react/styles.global.css from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```css
/* Skeleton animation */
@keyframes shimmer-anim {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(50%, 0, 0);
  }
}

.skeleton-shimmer {
  animation: shimmer-anim 0.7s linear infinite;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0)
  );
  background-size: 50% 100%;
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  width: 200%;
}

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['orderPlacedHeader']

const Header: FC = ({ children }) => {
  const handles = useCssHandles(CSS_HANDLES)
  return <header className={handles.orderPlacedHeader}>{children}</header>
}

export default Header

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { OrderOptions } from 'vtex.order-details'
import { useCssHandles } from 'vtex.css-handles'

import { useOrder } from './components/OrderContext'

interface Props {
  fullWidth?: boolean
  myAccountPath?: string
}

const CSS_HANDLES = ['orderOptionsWrapper']

const WrappedOrderOptions: FC<Props> = ({
  fullWidth = false,
  myAccountPath = '/account',
}) => {
  const order = useOrder()
  const handles = useCssHandles(CSS_HANDLES)
  const hasTakeAwayParcels = order.takeAwayParcels.length > 0

  return (
    <OrderOptions
      className={`${handles.orderOptionsWrapper} flex-l`}
      allowCancellation={order.allowCancellation}
      orderId={order.orderId}
      takeaway={hasTakeAwayParcels}
      fullWidth={fullWidth}
      myAccountPath={myAccountPath}
    />
  )
}

export default WrappedOrderOptions

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, Fragment } from 'react'
import { useCssHandles, applyModifiers } from 'vtex.css-handles'

import ProductList from './components/ProductList'
import DeliveryHeader from './components/DeliveryHeader'
import { useOrder } from './components/OrderContext'

const CSS_HANDLES = ['package', 'packageHeaderColumn']

const DeliveryPackages: FC = () => {
  const handles = useCssHandles(CSS_HANDLES)
  const { deliveryParcels, giftRegistryData } = useOrder()

  if (deliveryParcels.length === 0) {
    return null
  }

  return (
    <Fragment>
      {deliveryParcels.map((deliveryParcel, index) => (
        <div
          className={`${applyModifiers(
            handles.package,
            'delivery'
          )} mv8 flex-l justify-between flex-column flex-row-m`}
          key={index}
        >
          <div className={handles.packageHeaderColumn}>
            <DeliveryHeader
              shippingData={deliveryParcel}
              index={index}
              numPackages={deliveryParcels.length}
              giftRegistry={giftRegistryData}
            />
          </div>
          <ProductList products={deliveryParcel.items} />
        </div>
      ))}
    </Fragment>
  )
}
export default DeliveryPackages

```


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

[Assistant]
Here's the implementation:

```tsx
import { useOrderGroup } from './components/OrderGroupContext'

export default { useOrderGroup }

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { useCssHandles } from 'vtex.css-handles'

import { useOrderGroup } from './components/OrderGroupContext'
import DeliverySummary from './components/DeliverySummary'
import PickupSummary from './components/PickupSummary'
import Section from './Section'

const CSS_HANDLES = ['summaryRow', 'summaryCol']

const SummarySection: FC = () => {
  const handles = useCssHandles(CSS_HANDLES)
  const { totalDeliveryParcels, totalPickUpParcels } = useOrderGroup()

  if (totalPickUpParcels.length === 0 || totalDeliveryParcels.length === 0) {
    return null
  }

  return (
    <Section
      name="summary"
      marginBottom={9}
      paddingBottom={9}
      width={{ mobile: '90%', desktop: '80%' }}
    >
      <div className={`${handles.summaryRow} flex-ns`}>
        <div className={`${handles.summaryCol} w-100 mr4-ns mb4 mb0-ns`}>
          <DeliverySummary />
        </div>
        <div className={`${handles.summaryCol} w-100`}>
          <PickupSummary />
        </div>
      </div>
    </Section>
  )
}

export default SummarySection

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { useCssHandles } from 'vtex.css-handles'

import SuccessIcon from './Icons/Success'

const CSS_HANDLES = ['confirmationIconWrapper']

const ConfirmationIcon: FC = () => {
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <div className={`${handles.confirmationIconWrapper} tc c-success`}>
      <SuccessIcon size={50} />
    </div>
  )
}
export default ConfirmationIcon

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage } from 'react-intl'
import { useRuntime } from 'vtex.render-runtime'
import { useCssHandles } from 'vtex.css-handles'

import { useOrder } from './components/OrderContext'

const CSS_HANDLES = ['orderSoldBy', 'orderSeller']

const OrderSeller: FC = () => {
  const runtime = useRuntime()
  const order = useOrder()
  const handles = useCssHandles(CSS_HANDLES)

  const storeAccount = runtime.account
  const orderSeller = order.sellers[0].name

  if (storeAccount === orderSeller) {
    return null
  }

  return (
    <small className={`${handles.orderSoldBy} c-muted-2 t-body lh-copy`}>
      <FormattedMessage
        id="store/order.header.seller"
        values={{
          seller: (
            <span className={`${handles.orderSeller} c-action-primary`}>
              {orderSeller}
            </span>
          ),
        }}
      />
    </small>
  )
}

export default OrderSeller

```


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

[Assistant]
Here's the implementation:

```tsx
import { useOrder } from './components/OrderContext'

export default { useOrder }

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import './styles.global.css'

const Skeleton = () => {
  const baseSkeletonPiece = 'pa3 br2 relative overflow-hidden'
  return (
    <div className="w-90 mw8 center pv10 flex flex-column justify-between items-center">
      <div
        className={`${baseSkeletonPiece} bg-muted-5 mv3 w-30 mv7`}
        style={{ height: `${24}px` }}
      >
        <div className="skeleton-shimmer" />
      </div>
      <div
        className={`${baseSkeletonPiece} bg-muted-5 mv2 w-75-m w-80 o-80`}
        style={{ height: `${20}px` }}
      >
        <div className="skeleton-shimmer" />
      </div>
      <div
        className={`${baseSkeletonPiece} bg-muted-5 mv2 w-60 o-60`}
        style={{ height: `${20}px` }}
      >
        <div className="skeleton-shimmer" />
      </div>
      <div className="flex justify-center pv8 w-100">
        <div
          className={`${baseSkeletonPiece} bg-muted-5 mv3 w-30 w-20-m mr3 o-40`}
          style={{ height: `${36}px` }}
        >
          <div className="skeleton-shimmer" />
        </div>
        <div
          className={`${baseSkeletonPiece} bg-muted-5 mv3 w-30 w-20-m ml3 o-40`}
          style={{ height: `${36}px` }}
        >
          <div className="skeleton-shimmer" />
        </div>
      </div>
    </div>
  )
}

export default Skeleton

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { FormattedMessage } from 'react-intl'

import ProductList from './components/ProductList'
import { useOrder } from './components/OrderContext'
import Section from './Section'

const TakeAway: FC = () => {
  const { takeAwayParcels } = useOrder()

  if (takeAwayParcels.length === 0) {
    return null
  }

  return (
    <Section name="takeaway">
      <div className="mv8 flex flex-column justify-between">
        <header>
          <p
            data-testid="takeaway-header"
            className="t-heading-4-ns t-heading-5"
          >
            <FormattedMessage id="store/takeaway.header.title" />
          </p>
        </header>
        <ProductList products={takeAwayParcels[0].items} />
      </div>
    </Section>
  )
}
export default TakeAway

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import { useOrder } from './components/OrderContext'

const CSS_HANDLES = ['orderNumber']

const OrderNumber = () => {
  const { orderId } = useOrder()
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <h3 className={`${handles.orderNumber} mv0 t-heading-3 lh-copy`}>
      <FormattedMessage id="store/order.header.number" values={{ orderId }} />
    </h3>
  )
}

export default OrderNumber

```


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

[Assistant]
Here's the implementation:

```json
{
  "order-placed": {
    "blocks": ["op-header", "op-order"]
  },
  "op-header": {
    "children": [
      "op-section#confirmation",
      "op-section#notices",
      "op-summary-section",
      "op-bank-invoice-section"
    ]
  },
  "op-section#confirmation": {
    "props": {
      "name": "confirmation",
      "marginBottom": 9,
      "borderless": true
    },
    "children": [
      "op-confirmation-icon",
      "op-confirmation-title",
      "op-confirmation-message",
      "flex-layout.row#confirmation-buttons"
    ]
  },
  "flex-layout.row#confirmation-buttons": {
    "props": {
      "blockClass": "confirmationButtons",
      "marginTop": 8,
      "marginBottom": 8,
      "horizontalAlign": "center",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true
    },
    "children": ["flex-layout.col#confirmation-buttons"]
  },
  "flex-layout.col#confirmation-buttons": {
    "children": ["op-print-button"]
  },
  "op-section#notices": {
    "props": {
      "name": "notices",
      "marginBottom": 9,
      "borderless": true
    },
    "children": ["op-notices"]
  },
  // each order section
  "op-order": {
    "children": [
      "flex-layout.row#order-header",
      "op-order-split-notice",
      "op-order-customer",
      "op-section#payments",
      "op-section#pickup-packages",
      "op-section#delivery-packages",
      "op-order-takeaway-packages",
      "op-order-total"
    ]
  },
  // each order header
  "flex-layout.row#order-header": {
    "props": {
      "fullWidth": true,
      "colSizing": "auto",
      "colGap": 5,
      "marginBottom": 5
    },
    "children": [
      "flex-layout.col#order-header-info",
      "flex-layout.col#order-header-options"
    ]
  },
  "flex-layout.col#order-header-info": {
    "children": ["op-order-number", "op-order-datetime", "op-order-seller"]
  },
  "flex-layout.col#order-header-options": {
    "children": ["responsive-layout.desktop#order-options-desktop"]
  },
  "responsive-layout.desktop#order-options-desktop": {
    "children": ["op-order-options"]
  },
  // payment section
  "op-section#payments": {
    "props": {
      "name": "paymentMethods"
    },
    "children": [
      "op-order-payment",
      "responsive-layout.mobile#order-options-mobile"
    ]
  },
  // bottom of top section of order header
  "responsive-layout.mobile#order-options-mobile": {
    "children": ["op-order-options#mobile"]
  },
  "op-order-options#mobile": {
    "props": {
      "blockClass": "mobile",
      "fullWidth": true
    }
  },
  "op-section#pickup-packages": {
    "props": {
      "name": "pickupPackages"
    },
    "children": ["op-order-pickup-packages"]
  },
  "op-section#delivery-packages": {
    "props": {
      "name": "deliveryPackages"
    },
    "children": ["op-order-delivery-packages"]
  }
}

```