{"id":39487057,"url":"https://github.com/vtex-apps/order-placed","last_synced_at":"2026-01-18T05:27:33.814Z","repository":{"id":34056247,"uuid":"153323857","full_name":"vtex-apps/order-placed","owner":"vtex-apps","description":"App for the orderPlaced page in IO Stores. It will replace checkout-confirmation-ui. ","archived":false,"fork":false,"pushed_at":"2025-04-09T17:33:51.000Z","size":2490,"stargazers_count":9,"open_issues_count":17,"forks_count":35,"subscribers_count":71,"default_branch":"master","last_synced_at":"2025-04-09T18:42:34.470Z","etag":null,"topics":["hacktoberfest","srv-store-framework","store-framework","vtex-io","xp-post-purchase"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex-apps.png","metadata":{"files":{"readme":"docs/README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-10-16T17:09:21.000Z","updated_at":"2025-02-27T18:45:24.000Z","dependencies_parsed_at":"2024-08-09T10:05:46.576Z","dependency_job_id":"40a6d060-5ba9-47bd-88cd-6a031ac871b6","html_url":"https://github.com/vtex-apps/order-placed","commit_stats":null,"previous_names":[],"tags_count":72,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/order-placed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Forder-placed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Forder-placed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Forder-placed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Forder-placed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/order-placed/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Forder-placed/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530810,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","srv-store-framework","store-framework","vtex-io","xp-post-purchase"],"created_at":"2026-01-18T05:27:33.220Z","updated_at":"2026-01-18T05:27:33.789Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"📢 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).\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n# Order Placed\n\n\u003c!-- @import \"[TOC]\" {cmd=\"toc\" depthFrom=2 depthTo=6 orderedList=false} --\u003e\n\n\u003c!-- code_chunk_output --\u003e\n\n- [Configuration](#configuration)\n- [Blocks](#blocks)\n  - [`order-placed`](#order-placed-1)\n  - [`op-section`](#op-section)\n  - [`op-header`](#op-header)\n  - [`op-footer`](#op-footer)\n  - [`op-confirmation-icon`](#op-confirmation-icon)\n  - [`op-confirmation-title`](#op-confirmation-title)\n  - [`op-confirmation-message`](#op-confirmation-message)\n  - [`op-print-button`](#op-print-button)\n  - [`op-notices`](#op-notices)\n  - [`op-summary-section`](#op-summary-section)\n  - [`op-bank-invoice-section`](#op-bank-invoice-section)\n  - [`op-order`](#op-order)\n  - [`op-order-number`](#op-order-number)\n  - [`op-order-datetime`](#op-order-datetime)\n  - [`op-order-seller`](#op-order-seller)\n  - [`op-order-split-notice`](#op-order-split-notice)\n  - [`op-order-customer`](#op-order-customer)\n  - [`op-order-options`](#op-order-options)\n  - [`op-order-payment`](#op-order-payment)\n  - [`op-order-delivery-packages`](#op-order-delivery-packages)\n  - [`op-order-pickup-packages`](#op-order-pickup-packages)\n  - [`op-order-total`](#op-order-total)\n- [API](#api)\n- [Customization](#customization)\n- [Contributing](#contributing)\n- [Contributors ✨](#contributors)\n\n\u003c!-- /code_chunk_output --\u003e\n\n## Configuration\n\nThe `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.\n\nAfter 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).\n\n_Note: this is the default `order-placed` layout implementation._\n\n```jsonc\n// store/blocks/order-placed.jsonc\n{\n  \"order-placed\": {\n    \"blocks\": [\"op-header\", \"op-order\"]\n  },\n  \"op-header\": {\n    \"children\": [\n      \"op-section#confirmation\",\n      \"op-section#notices\",\n      \"op-summary-section\",\n      \"op-bank-invoice-section\"\n    ]\n  },\n  \"op-section#confirmation\": {\n    \"props\": {\n      \"name\": \"confirmation\",\n      \"marginBottom\": 9,\n      \"borderless\": true\n    },\n    \"children\": [\n      \"op-confirmation-icon\",\n      \"op-confirmation-title\",\n      \"op-confirmation-message\",\n      \"flex-layout.row#confirmation-buttons\"\n    ]\n  },\n  \"flex-layout.row#confirmation-buttons\": {\n    \"props\": {\n      \"blockClass\": \"confirmationButtons\",\n      \"marginTop\": 8,\n      \"marginBottom\": 8,\n      \"horizontalAlign\": \"center\",\n      \"preventHorizontalStretch\": true\n    },\n    \"children\": [\"flex-layout.col#confirmation-buttons\"]\n  },\n  \"flex-layout.col#confirmation-buttons\": {\n    \"children\": [\"op-print-button\"]\n  },\n  \"op-section#notices\": {\n    \"props\": {\n      \"name\": \"notices\",\n      \"marginBottom\": 9,\n      \"borderless\": true\n    },\n    \"children\": [\"op-notices\"]\n  },\n  // each order section\n  \"op-order\": {\n    \"children\": [\n      \"flex-layout.row#order-header\",\n      \"op-order-split-notice\",\n      \"op-order-customer\",\n      \"op-section#payments\",\n      \"op-section#pickup-packages\",\n      \"op-section#delivery-packages\",\n      \"op-order-takeaway-packages\",\n      \"op-order-total\"\n    ]\n  },\n  // each order header\n  \"flex-layout.row#order-header\": {\n    \"props\": {\n      \"fullWidth\": true,\n      \"colSizing\": \"auto\",\n      \"colGap\": 5,\n      \"marginBottom\": 5\n    },\n    \"children\": [\n      \"flex-layout.col#order-header-info\",\n      \"flex-layout.col#order-header-options\"\n    ]\n  },\n  \"flex-layout.col#order-header-info\": {\n    \"children\": [\"op-order-number\", \"op-order-datetime\", \"op-order-seller\"]\n  },\n  \"flex-layout.col#order-header-options\": {\n    \"children\": [\"responsive-layout.desktop#order-options-desktop\"]\n  },\n  \"responsive-layout.desktop#order-options-desktop\": {\n    \"children\": [\"op-order-options\"]\n  },\n  // payment section\n  \"op-section#payments\": {\n    \"props\": {\n      \"name\": \"paymentMethods\"\n    },\n    \"children\": [\n      \"op-order-payment\",\n      \"responsive-layout.mobile#order-options-mobile\"\n    ]\n  },\n  // bottom of top section of order header\n  \"responsive-layout.mobile#order-options-mobile\": {\n    \"children\": [\"op-order-options#mobile\"]\n  },\n  \"op-order-options#mobile\": {\n    \"props\": {\n      \"blockClass\": \"mobile\",\n      \"fullWidth\": true\n    }\n  },\n  \"op-section#pickup-packages\": {\n    \"props\": {\n      \"name\": \"pickupPackages\"\n    },\n    \"children\": [\"op-order-pickup-packages\"]\n  },\n  \"op-section#delivery-packages\": {\n    \"props\": {\n      \"name\": \"deliveryPackages\"\n    },\n    \"children\": [\"op-order-delivery-packages\"]\n  }\n}\n```\n\nMake sure you have the Order Placed page defined in your theme:\n\n```json\n  \"store.orderplaced\": {\n    \"children\": [\"order-placed\"]\n  },\n```\n\n## Blocks\n\n### `order-placed`\n\nMain block, responsible for rendering the whole order placed page. It accepts the following blocks:\n\n- [`op-header`](#op-header)\n- [`op-order`](#op-order)\n- [`op-footer`](#op-footer)\n\n### `op-section`\n\nSplits your page into separate and semantic sections.\n\n**Composition:**\nAccepts an array of any kind of children blocks.\n\n**Props:**\n\n| Prop name       | Type                                             | Description                                                    | Default value |\n| --------------- | ------------------------------------------------ | -------------------------------------------------------------- | ------------- |\n| `borderless`    | `MaybeResponsiveInput\u003cboolean\u003e` \u0026#124; `boolean` | Remove the bottom border of the section                        | `false`       |\n| `marginBottom`  | `MaybeResponsiveInput\u003cnumber\u003e` \u0026#124; `number`   | Margin space below the section                                 | `0`           |\n| `paddingBottom` | `MaybeResponsiveInput\u003cnumber\u003e` \u0026#124; `number`   | Padding space below the section                                | `0`           |\n| `width`         | `MaybeResponsiveInput\u003cstring\u003e` \u0026#124; `string`   | Width of the section                                           | `100%`        |\n| `name`          | `string`                                         | Name of the section. Use it to have custom css handles for it. | `undefined`   |\n\n**CSS Handles:**\n\n| CSS Handles       | Description          |\n| ----------------- | -------------------- |\n| `section`         | All section blocks   |\n| `section--{name}` | Section named `name` |\n\n### `op-header`\n\nDefines the header content of the page.\n\n**Composition:**\nAccepts an array of any kind of children blocks.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handles         | Description     |\n| ------------------- | --------------- |\n| `orderPlacedHeader` | The page header |\n\n### `op-footer`\n\nDefines the footer content of the page.\n\n**Composition:**\nAccepts an array of any kind of children blocks.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handles         | Description     |\n| ------------------- | --------------- |\n| `orderPlacedFooter` | The page footer |\n\n### `op-confirmation-icon`\n\nRenders the confirmation icon.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handle                | Description  |\n| ------------------------- | ------------ |\n| `confirmationIconWrapper` | Icon wrapper |\n\n| Default appearance                                                                                                            |\n| ----------------------------------------------------------------------------------------------------------------------------- |\n| ![op-confirmation-icon](https://user-images.githubusercontent.com/17712401/89224372-c38c5080-d5ae-11ea-8112-9870c854e5a2.png) |\n\n### `op-confirmation-title`\n\nRenders the confirmation title.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handle          | Description                     |\n| ------------------- | ------------------------------- |\n| `confirmationTitle` | Confirmation title `h4` element |\n\n| Default appearance                                                                                                             |\n| ------------------------------------------------------------------------------------------------------------------------------ |\n| ![op-confirmation-title](https://user-images.githubusercontent.com/17712401/89224442-df8ff200-d5ae-11ea-824a-25d7530249dd.png) |\n\n### `op-confirmation-message`\n\nRenders the confirmation message, containing the clients email.\n\n**Composition:** none.\n\n**Props:**\n\n| Prop name            | Type      | Description                                                                                   | Default value |\n| -------------------- | --------- | --------------------------------------------------------------------------------------------- | ------------- |\n| `enableGuestMessage` | `boolean` | Flag that enables a different confirmation message (store/header.guest-email) for guest users | `false`       |\n\n**CSS Handles:**\n\n| CSS Handle            | Description                      |\n| --------------------- | -------------------------------- |\n| `confirmationMessage` | Confirmation message `p` element |\n\n| Default appearance                                                                                                               |\n| -------------------------------------------------------------------------------------------------------------------------------- |\n| ![op-confirmation-message](https://user-images.githubusercontent.com/17712401/89224480-f0406800-d5ae-11ea-8602-0cb9541b0459.png) |\n\n### `op-print-button`\n\nRenders a button that triggers a full page print.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:**: none.\n\n| Default appearance                                                                                                |\n| ----------------------------------------------------------------------------------------------------------------- |\n| ![op-print](https://user-images.githubusercontent.com/17712401/89224547-0817ec00-d5af-11ea-9b6a-9ae33a89daef.png) |\n\n### `op-notices`\n\nRenders a list of important informations relevant to the currently placed order. The messages may vary according to the type of order.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handle       | Description                 |\n| ---------------- | --------------------------- |\n| `noticesList`    | List `ul` element           |\n| `noticeListItem` | Each list `li` item element |\n\n| Default appearance                                                                                                  |\n| ------------------------------------------------------------------------------------------------------------------- |\n| ![op-notices](https://user-images.githubusercontent.com/17712401/89224594-16fe9e80-d5af-11ea-9c3e-4cfddcf76a4c.png) |\n\n### `op-summary-section`\n\nIf 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.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handle             | Description                                 |\n| ---------------------- | ------------------------------------------- |\n| `section--summary`     | Summary whole section                       |\n| `summaryRow`           | Row wrapper of both summary boxes           |\n| `summaryCol`           | Column wrapper of each summary box          |\n| `summaryAddress`       | Wrapper of the pickup address               |\n| `summaryBox`           | Surrounding box of the summary              |\n| `summaryBox--delivery` | Surrounding box of the delivery summary     |\n| `summaryBox--pickup`   | Surrounding box of the pickup summary       |\n| `summaryContent`       | Wrapper of the whole content of the box     |\n| `summaryItems`         | Wrapper of the number of items and packages |\n| `summaryShippingSLA`   | Wrapper of the shipping SLA information     |\n| `summaryTitle`         | Box `h5` title element                      |\n\n| Default appearance                                                                                                          |\n| --------------------------------------------------------------------------------------------------------------------------- |\n| ![op-summary-section](https://user-images.githubusercontent.com/17712401/89224626-267de780-d5af-11ea-80c1-7771c6dae670.png) |\n\n### `op-bank-invoice-section`\n\nRenders the bank invoice section if payment method chosen was bank invoice.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handle                   | Description                                   |\n| ---------------------------- | --------------------------------------------- |\n| `section--bankInvoice`       | Bank invoice whole section                    |\n| `barCodeWrapper`             | Wrapper of the barcode number and copy button |\n| `barCodeNumber`              | Barcode number element                        |\n| `barCodeCopyButtonWrapper`   | Wrapper of the copy button                    |\n| `bankInvoiceEmbedWrapper`    | Wrapper of the bank invoice iframe            |\n| `bankInvoiceEmbedBackground` | Background of the bank invoice iframe         |\n| `bankInvoiceEmbed`           | Embed of the bank invoice PDF                 |\n\n| Default appearance                                                                                                               |\n| -------------------------------------------------------------------------------------------------------------------------------- |\n| ![op-bank-invoice-section](https://user-images.githubusercontent.com/17712401/89224654-3695c700-d5af-11ea-9b17-98c68450370d.png) |\n\n### `op-order`\n\nDefines an order context to be able to render its meta information and packages. Must be used to display order data.\n\n**Composition:**\nAccepts an array of any kind of children blocks.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handle     | Description                                       |\n| -------------- | ------------------------------------------------- |\n| `orderWrapper` | Wrapper of an order meta information and packages |\n\n### `op-order-number`\n\nRenders the order id number. Must be placed inside an [`op-order`](#op-order) block.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handle    | Description               |\n| ------------- | ------------------------- |\n| `orderNumber` | Order number `h3` element |\n\n| Default appearance                                                                                                       |\n| ------------------------------------------------------------------------------------------------------------------------ |\n| ![op-order-number](https://user-images.githubusercontent.com/17712401/89224695-4c0af100-d5af-11ea-866e-bea733073346.png) |\n\n### `op-order-datetime`\n\nRenders the date and time an order was placed. Must be placed inside an [`op-order`](#op-order) block.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handle      | Description                         |\n| --------------- | ----------------------------------- |\n| `orderDatetime` | Order date and time `small` element |\n\n| Default appearance                                                                                                         |\n| -------------------------------------------------------------------------------------------------------------------------- |\n| ![op-order-datetime](https://user-images.githubusercontent.com/17712401/89224728-5a590d00-d5af-11ea-8901-7654c543d9e9.png) |\n\n### `op-order-seller`\n\nRenders the seller of an order. Must be placed inside an [`op-order`](#op-order) block.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handle    | Description                   |\n| ------------- | ----------------------------- |\n| `orderSoldBy` | Seller phrase `small` element |\n| `orderSeller` | Seller name `span` element    |\n\n| Default appearance                                                                                                       |\n| ------------------------------------------------------------------------------------------------------------------------ |\n| ![op-order-seller](https://user-images.githubusercontent.com/17712401/89224779-765cae80-d5af-11ea-9320-29902e7f47dd.png) |\n\n### `op-order-split-notice`\n\nRenders 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.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:**\n\n| CSS Handle    | Description                    |\n| ------------- | ------------------------------ |\n| `splitNotice` | Wrapper of the message element |\n\n| Default appearance                                                                                                             |\n| ------------------------------------------------------------------------------------------------------------------------------ |\n| ![op-order-split-notice](https://user-images.githubusercontent.com/17712401/89224825-88d6e800-d5af-11ea-8801-7f2d5267da5b.png) |\n\n### `op-order-customer`\n\nRenders the customer information. Must be placed inside an [`op-order`](#op-order) block.\n\n**Composition:** none.\n\n**Props:** none.\n\n**CSS Handles:** none.\n\n| Default appearance                                                                                                         |\n| -------------------------------------------------------------------------------------------------------------------------- |\n| ![op-order-customer](https://user-images.githubusercontent.com/17712401/89224880-a015d580-d5af-11ea-8314-bc223b3da0aa.png) |\n\n### `op-order-options`\n\nRenders the customer information. Must be placed inside an [`op-order`](#op-order) block.\n\n**Composition:** none.\n\n**Props:**\n\n| Prop name       | Type      | Description                                                                                | Default value |\n| --------------- | --------- | ------------------------------------------------------------------------------------------ | ------------- |\n| `fullWidth`     | `boolean` | Make the options wrapper take full horizontal space                                        | `false`       |\n| `myAccountPath` | `string`  | The path to redirect a user to their profile page (rendered by the `vtex.my-account` app). | `/account`    |\n\n**CSS Handles:**\n\n| CSS Handles           | Description                   |\n| --------------------- | ----------------------------- |\n| `orderOptionsWrapper` | Wrapper of the option buttons |\n\n| Default appearance                                                                                                        |\n| ------------------------------------------------------------------------------------------------------------------------- |\n| ![op-order-options](https://user-images.githubusercontent.com/17712401/89224923-b754c300-d5af-11ea-8b28-0efa82329e96.png) |\n\n### `op-order-payment`\n\nRenders the customer information. Must be placed inside an [`op-order`](#op-order) block.\n\n**Composition:** none.\n\n**CSS Handles:**\n\n| CSS Handles           | Description                         |\n| --------------------- | ----------------------------------- |\n| `orderPaymentWrapper` | Wrapper of the payment methods list |\n| `orderPaymentItem`    | Wrapper of each payment method item |\n\n| Default appearance                                                                                                        |\n| ------------------------------------------------------------------------------------------------------------------------- |\n| ![op-order-payment](https://user-images.githubusercontent.com/17712401/89225037-eec36f80-d5af-11ea-82af-267cb69c7d7b.png) |\n\n### `op-order-delivery-packages`\n\nRenders an order delivery packages information and product list. Must be placed inside an [`op-order`](#op-order) block.\n\n**Composition:** none.\n\n**CSS Handles:**\n\n| CSS Handles               | Description                                    |\n| ------------------------- | ---------------------------------------------- |\n| `package`                 | All package sections                           |\n| `package--delivery`       | The delivery package section                   |\n| `packageHeaderColumn`     | Column of header of a package section          |\n| `packageHeader`           | Header of a package section                    |\n| `packageHeader--delivery` | Header of the delivery package section         |\n| `packageShippingEstimate` | Delivery estimate `small` element              |\n| `packageAddressWrapper`   | Wrapper of the package shipping address        |\n| `packageAddressTitle`     | Wrapper of the address title                   |\n| `packageDeliveryTitle`    | Wrapper of the delivery title                  |\n| `productList`             | Product list `ul` element                      |\n| `productListItem`         | Product list `li` item element                 |\n| `productWrapper`          | Wrapper of a single product                    |\n| `productImageColumn`      | Column of a product's image                    |\n| `productImageWrapper`     | Wrapper of a product's image                   |\n| `productInfoColumn`       | Column of a product's information              |\n| `productName`             | Product's `a` element                          |\n| `productMeasurementUnit`  | Product's measurement unit `small` element     |\n| `productQuantity`         | Product's quantity `small` element             |\n| `productPrice`            | Product's price                                |\n| `attachmentWrapper`       | Wrapper for a product's attachment             |\n| `attachmentHeader`        | Header of an attachment                        |\n| `attachmentTitle`         | Title of a attachment                          |\n| `attachmentToggleWrapper` | Wrapper of the toggle button of an attachment  |\n| `attachmentToggleButton`  | Button for toggling the attachment's accordion |\n| `attachmentToggleLabel`   | Attachment's toggle label                      |\n| `attachmentContent`       | Attachment's content wrapper                   |\n| `attachmentContentItem`   | Each attachment's content paragraph            |\n\n| Default appearance                                                                                                                  |\n| ----------------------------------------------------------------------------------------------------------------------------------- |\n| ![op-order-delivery-packages](https://user-images.githubusercontent.com/17712401/89225054-f8e56e00-d5af-11ea-9c0a-b2cc37fe34f4.png) |\n\n### `op-order-pickup-packages`\n\nRenders an order pickup packages information and product list. Must be placed inside an [`op-order`](#op-order) block.\n\n**Composition:** none.\n\n**CSS Handles:**\n\n_Note: Include the same CSS handles as [`op-order-delivery-packages`](#op-order-delivery-packages)_\n\n| CSS Handles             | Description                                                  |\n| ----------------------- | ------------------------------------------------------------ |\n| `package`               | All package sections                                         |\n| `package--pickup`       | The pickup package section                                   |\n| `packageInfoWrapper`    | Wrapper of a **pickup** package's information                |\n| `packageReceiver`       | Package's **pickup** receiver information container          |\n| `packageReceiverName`   | Name of the package's **pickup** receiver                    |\n| `packageAdditionalInfo` | Wrapper of additional information about a **pickup** package |\n\n| Default appearance                                                                                                                |\n| --------------------------------------------------------------------------------------------------------------------------------- |\n| ![op-order-pickup-packages](https://user-images.githubusercontent.com/17712401/89225074-03076c80-d5b0-11ea-840e-69998a41ec9d.png) |\n\n### `op-order-total`\n\nRenders an order delivery packages information and product list. Must be placed inside an [`op-order`](#op-order) block.\n\n**Composition:** none.\n\n**CSS Handles:**\n\n| CSS Handles          | Description                                 |\n| -------------------- | ------------------------------------------- |\n| `totalListWrapper`   | Wrapper of the total price list of an order |\n| `totalList`          | An order's total list `ul` element          |\n| `totalListItem`      | An order's total item `li` element          |\n| `totalListItemLabel` | Label of a price item                       |\n| `totalListItemValue` | Value of a price item                       |\n\n| Default appearance                                                                                                      |\n| ----------------------------------------------------------------------------------------------------------------------- |\n| ![op-order-total](https://user-images.githubusercontent.com/17712401/89225092-0b5fa780-d5b0-11ea-976e-da3c64453eff.png) |\n\n## API\n\nThe `order-placed` app exports two hooks to allow customization using the current order data: `useOrderGroup` and `useOrder`.\n\n`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.\n\n```js\nimport { useOrderGroup } from 'vtex.order-placed/OrderGroupContext'\n\n//...\nconst orderGroup = useOrderGroup()\n```\n\n`useOrder`: used to get the data of the current order being accessed in the order loop.\n\n```js\nimport { useOrder } from 'vtex.order-placed/OrderContext'\n\n//...\nconst order = useOrder()\n```\n\n## Customization\n\nIn 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).\n\n| CSS Handles                  |\n| ---------------------------- |\n| `attachmentContent`          |\n| `attachmentContentItem`      |\n| `attachmentHeader`           |\n| `attachmentTitle`            |\n| `attachmentToggleButton`     |\n| `attachmentToggleLabel`      |\n| `attachmentToggleWrapper`    |\n| `attachmentWrapper`          |\n| `bankInvoiceEmbed`           |\n| `bankInvoiceEmbedBackground` |\n| `bankInvoiceEmbedWrapper`    |\n| `barCodeCopyButtonWrapper`   |\n| `barCodeContainer`           |\n| `barCodeNumber`              |\n| `barCodeWrapper`             |\n| `confirmationIconWrapper`    |\n| `confirmationMessage`        |\n| `confirmationTitle`          |\n| `errorMessage`               |\n| `errorTitle`                 |\n| `errorWrapper`               |\n| `noticeListItem`             |\n| `noticesList`                |\n| `orderDatetime`              |\n| `orderList`                  |\n| `orderListItem`              |\n| `orderNumber`                |\n| `orderOptionsWrapper`        |\n| `orderPaymentItem`           |\n| `orderPaymentWrapper`        |\n| `orderPlacedFooter`          |\n| `orderPlacedHeader`          |\n| `orderPlacedMainWrapper`     |\n| `orderPlacedWrapper`         |\n| `orderSeller`                |\n| `orderSoldBy`                |\n| `orderWrapper`               |\n| `package--delivery`          |\n| `package--pickup`            |\n| `package`                    |\n| `packageAdditionalInfo`      |\n| `packageAddressWrapper`      |\n| `packageGiftDescription`     |\n| `packageHeader--delivery`    |\n| `packageHeader--pickup`      |\n| `packageHeader`              |\n| `packageHeaderColumn`        |\n| `packageInfoWrapper`         |\n| `packageReceiver`            |\n| `packageReceiverName`        |\n| `packageShippingEstimate`    |\n| `packageSLA`                 |\n| `printButtonWrapper`         |\n| `printHintWrapper`           |\n| `productImageColumn`         |\n| `productImageWrapper`        |\n| `productInfoColumn`          |\n| `productName`                |\n| `productListItem`            |\n| `productList`                |\n| `productMeasurementUnit`     |\n| `productPrice`               |\n| `productQuantity`            |\n| `productWrapper`             |\n| `section--bank-invoice`      |\n| `section--confirmation`      |\n| `section--deliveryPackages`  |\n| `section--notices`           |\n| `section--paymentMethod`     |\n| `section--pickupPackages`    |\n| `section--summary`           |\n| `section`                    |\n| `splitNotice`                |\n| `summaryRow`                 |\n| `summaryCol`                 |\n| `summaryAddress`             |\n| `summaryBox--delivery`       |\n| `summaryBox--pickup`         |\n| `summaryBox`                 |\n| `summaryContent`             |\n| `summaryItems`               |\n| `summaryShipping`            |\n| `summaryTitle`               |\n| `totalList`                  |\n| `totalListItem`              |\n| `totalListItemLabel`         |\n| `totalListItemValue`         |\n| `totalListWrapper`           |\n\n## Contributing\n\nCheck it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/gustavopvasconcellos\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/49173685?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003egustavopvasconcellos\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/order-placed/commits?author=gustavopvasconcellos\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://razvanudrea.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/71461884?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003erazvanudream\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/order-placed/commits?author=razvanudream\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/claudiu-iviteb\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/73105476?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eClaudiu Ionita\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/order-placed/commits?author=claudiu-iviteb\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Forder-placed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Forder-placed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Forder-placed/lists"}