├── .prettierrc
├── _releasy.json
├── react
    ├── __mocks__
    │   ├── styleMock.ts
    │   ├── vtex.store-resources
    │   │   └── PWAContext.tsx
    │   ├── vtex.shipping-estimate-translator.ts
    │   ├── vtex.responsive-values.ts
    │   ├── vtex.pixel-manager
    │   │   └── PixelContext.tsx
    │   ├── vtex.profile-form.tsx
    │   ├── vtex.address-form.tsx
    │   ├── vtex.css-handles.ts
    │   ├── vtex.totalizer-translator
    │   │   └── TranslateTotalizer.ts
    │   ├── vtex.order-details.tsx
    │   ├── vtex.render-runtime.tsx
    │   └── vtex.styleguide.tsx
    ├── typings
    │   ├── react-clipboardjs.d.ts
    │   ├── vtex.address-form.d.ts
    │   ├── vtex.profile-form.d.ts
    │   ├── vtex.pixel-manager.d.ts
    │   ├── vtex.shipping-estimate-calculator.d.ts
    │   ├── json.d.ts
    │   ├── vtex.store-resources.d.ts
    │   ├── vtex.shipping-estimate-translator.d.ts
    │   ├── vtex.totalizer-translator.d.ts
    │   ├── css.d.ts
    │   ├── vtex.responsive-values.d.ts
    │   ├── graphql.d.ts
    │   ├── vtex.order-details.d.ts
    │   ├── vtex.styleguide.d.ts
    │   ├── render.d.ts
    │   └── global.d.ts
    ├── OrderContext.tsx
    ├── OrderGroupContext.tsx
    ├── components
    │   ├── OrderContext.tsx
    │   ├── CurrencyContext.tsx
    │   ├── OrderGroupContext.tsx
    │   ├── FormattedPrice.tsx
    │   ├── OrderList.tsx
    │   ├── ProductList
    │   │   ├── index.tsx
    │   │   ├── BundleItems.tsx
    │   │   ├── Attachments.tsx
    │   │   ├── Product.tsx
    │   │   └── AttachmentAccordion.tsx
    │   ├── Errors
    │   │   ├── InvalidError.tsx
    │   │   ├── ErrorMessage.tsx
    │   │   └── ForbiddenError.tsx
    │   ├── PickupSummary.tsx
    │   ├── DeliverySummary.tsx
    │   ├── BankInvoice
    │   │   ├── Embedded.tsx
    │   │   └── BarCode.tsx
    │   ├── SummaryBox.tsx
    │   ├── PickUpHeader.tsx
    │   └── DeliveryHeader.tsx
    ├── .eslintrc
    ├── Order.tsx
    ├── Footer.tsx
    ├── Header.tsx
    ├── PrintButton.tsx
    ├── __tests__
    │   ├── OrderNumber.test.tsx
    │   ├── OrderSeller.test.tsx
    │   ├── OrderPlacedConfirmation.test.tsx
    │   ├── PickupSummary.test.tsx
    │   ├── DeliverySummary.test.tsx
    │   ├── PickupItems.test.tsx
    │   ├── DeliveryItems.test.tsx
    │   ├── OrderPlaced.test.tsx
    │   ├── Subscriptions.test.tsx
    │   ├── ProductList.test.tsx
    │   ├── BankInvoiceSection.test.tsx
    │   └── Notices.test.tsx
    ├── ConfirmationIcon.tsx
    ├── OrderCustomerInfo.tsx
    ├── styles.css
    ├── Analytics.tsx
    ├── styles.global.css
    ├── Icons
    │   ├── utils.tsx
    │   ├── Tooltip.tsx
    │   ├── Info.tsx
    │   ├── Forbidden.tsx
    │   ├── PrinterIcon.tsx
    │   ├── MailIcon.tsx
    │   ├── Success.tsx
    │   ├── NotFound.tsx
    │   ├── PickUpIcon.tsx
    │   └── DeliveryIcon.tsx
    ├── OrderNumber.tsx
    ├── tsconfig.json
    ├── utils
    │   ├── useSessionResponse.tsx
    │   ├── testUtils.tsx
    │   └── index.ts
    ├── ConfirmationTitle.tsx
    ├── OrderSplitNotice.tsx
    ├── TakeAwayPackages.tsx
    ├── OrderOptions.tsx
    ├── OrderDatetime.tsx
    ├── OrderPayment.tsx
    ├── TaxInfo.tsx
    ├── OrderSeller.tsx
    ├── Section.tsx
    ├── SummarySection.tsx
    ├── PickupPackages.tsx
    ├── DeliveryPackages.tsx
    ├── Skeleton.tsx
    ├── ConfirmationMessage.tsx
    ├── OrderTotal.tsx
    ├── package.json
    ├── index.tsx
    ├── BankInvoiceSection.tsx
    ├── Notices.tsx
    └── mocks
    │   └── orderWithGift.ts
├── .eslintignore
├── docs
    ├── example.png
    └── images
    │   ├── op-print.png
    │   ├── op-notices.png
    │   ├── op-order-total.png
    │   ├── op-order-number.png
    │   ├── op-order-options.png
    │   ├── op-order-payment.png
    │   ├── op-order-seller.png
    │   ├── op-order-customer.png
    │   ├── op-order-datetime.png
    │   ├── op-pickup-summary.png
    │   ├── op-summary-section.png
    │   ├── op-confirmation-icon.png
    │   ├── op-confirmation-title.png
    │   ├── op-order-split-notice.png
    │   ├── op-bank-invoice-section.png
    │   ├── op-confirmation-message.png
    │   ├── op-order-pickup-packages.png
    │   └── op-order-delivery-packages.png
├── crowdin.yml
├── .eslintrc
├── .vscode
    ├── extensions.json
    └── settings.json
├── .vtexignore
├── .editorconfig
├── .github
    ├── CODEOWNERS
    ├── ISSUE_TEMPLATE
    │   ├── questions-and-help.md
    │   ├── feature_request.md
    │   └── bug_report.md
    ├── PULL_REQUEST_TEMPLATE.md
    └── workflows
    │   └── pull-request.yml
├── .vtex
    ├── ci.yml
    └── catalog-info.yaml
├── .gitignore
├── package.json
├── .all-contributorsrc
├── manifest.json
├── store
    ├── interfaces.json
    └── blocks.jsonc
└── messages
    ├── ko.json
    ├── ja.json
    ├── ar.json
    ├── en.json
    ├── da.json
    ├── sv.json
    ├── nn.json
    ├── no.json
    └── pt.json


/.prettierrc:
--------------------------------------------------------------------------------
1 | "@vtex/prettier-config"


--------------------------------------------------------------------------------
/_releasy.json:
--------------------------------------------------------------------------------
1 | {
2 |   "notes": true
3 | }
4 | 


--------------------------------------------------------------------------------
/react/__mocks__/styleMock.ts:
--------------------------------------------------------------------------------
1 | export default {}
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | coverage/
3 | *.snap.ts


--------------------------------------------------------------------------------
/react/typings/react-clipboardjs.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'react-clipboard.js'
2 | 


--------------------------------------------------------------------------------
/react/typings/vtex.address-form.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vtex.address-form'
2 | 


--------------------------------------------------------------------------------
/react/typings/vtex.profile-form.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vtex.profile-form'
2 | 


--------------------------------------------------------------------------------
/docs/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/example.png


--------------------------------------------------------------------------------
/react/typings/vtex.pixel-manager.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vtex.pixel-manager/PixelContext'
2 | 


--------------------------------------------------------------------------------
/crowdin.yml:
--------------------------------------------------------------------------------
1 | files:
2 |   - source: /messages/en.json
3 |     translation: /messages/%locale%.json


--------------------------------------------------------------------------------
/react/typings/vtex.shipping-estimate-calculator.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@vtex/estimate-calculator'
2 | 


--------------------------------------------------------------------------------
/docs/images/op-print.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-print.png


--------------------------------------------------------------------------------
/docs/images/op-notices.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-notices.png


--------------------------------------------------------------------------------
/react/typings/json.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.json' {
2 |   const value: any
3 |   export default value
4 | }
5 | 


--------------------------------------------------------------------------------
/docs/images/op-order-total.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-order-total.png


--------------------------------------------------------------------------------
/react/OrderContext.tsx:
--------------------------------------------------------------------------------
1 | import { useOrder } from './components/OrderContext'
2 | 
3 | export default { useOrder }
4 | 


--------------------------------------------------------------------------------
/docs/images/op-order-number.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-order-number.png


--------------------------------------------------------------------------------
/docs/images/op-order-options.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-order-options.png


--------------------------------------------------------------------------------
/docs/images/op-order-payment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-order-payment.png


--------------------------------------------------------------------------------
/docs/images/op-order-seller.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-order-seller.png


--------------------------------------------------------------------------------
/docs/images/op-order-customer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-order-customer.png


--------------------------------------------------------------------------------
/docs/images/op-order-datetime.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-order-datetime.png


--------------------------------------------------------------------------------
/docs/images/op-pickup-summary.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-pickup-summary.png


--------------------------------------------------------------------------------
/docs/images/op-summary-section.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-summary-section.png


--------------------------------------------------------------------------------
/react/__mocks__/vtex.store-resources/PWAContext.tsx:
--------------------------------------------------------------------------------
1 | export function usePWA(children: unknown) {
2 |   return children
3 | }
4 | 


--------------------------------------------------------------------------------
/react/typings/vtex.store-resources.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vtex.store-resources/PWAContext' {
2 |   export const usePWA
3 | }
4 | 


--------------------------------------------------------------------------------
/docs/images/op-confirmation-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-confirmation-icon.png


--------------------------------------------------------------------------------
/docs/images/op-confirmation-title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-confirmation-title.png


--------------------------------------------------------------------------------
/docs/images/op-order-split-notice.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-order-split-notice.png


--------------------------------------------------------------------------------
/react/__mocks__/vtex.shipping-estimate-translator.ts:
--------------------------------------------------------------------------------
1 | export function TranslateEstimate() {
2 |   return 'TranslateEstimate'
3 | }
4 | 


--------------------------------------------------------------------------------
/docs/images/op-bank-invoice-section.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-bank-invoice-section.png


--------------------------------------------------------------------------------
/docs/images/op-confirmation-message.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-confirmation-message.png


--------------------------------------------------------------------------------
/docs/images/op-order-pickup-packages.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-order-pickup-packages.png


--------------------------------------------------------------------------------
/react/OrderGroupContext.tsx:
--------------------------------------------------------------------------------
1 | import { useOrderGroup } from './components/OrderGroupContext'
2 | 
3 | export default { useOrderGroup }
4 | 


--------------------------------------------------------------------------------
/docs/images/op-order-delivery-packages.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtex-apps/order-placed/HEAD/docs/images/op-order-delivery-packages.png


--------------------------------------------------------------------------------
/react/__mocks__/vtex.responsive-values.ts:
--------------------------------------------------------------------------------
1 | export const useResponsiveValue = (i: any) => i
2 | export const useResponsiveValues = (i: any) => i
3 | 


--------------------------------------------------------------------------------
/react/typings/vtex.shipping-estimate-translator.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vtex.shipping-estimate-translator' {
2 |   export const TranslateEstimate
3 | }
4 | 


--------------------------------------------------------------------------------
/react/typings/vtex.totalizer-translator.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vtex.totalizer-translator'
2 | declare module 'vtex.totalizer-translator/TranslateTotalizer'
3 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "vtex",
 3 |   "root": true,
 4 |   "env": {
 5 |     "node": true,
 6 |     "es6": true,
 7 |     "jest": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/react/typings/css.d.ts:
--------------------------------------------------------------------------------
1 | // declaration.d.ts
2 | declare module '*.css' {
3 |   const content: { [className: string]: string }
4 |   export default content
5 | }
6 | 


--------------------------------------------------------------------------------
/react/typings/vtex.responsive-values.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vtex.responsive-values' {
2 |   export const useResponsiveValue
3 |   export const useResponsiveValues
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "dbaeumer.vscode-eslint",
4 |     "EditorConfig.EditorConfig",
5 |     "esbenp.prettier-vscode"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/react/typings/graphql.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.graphql' {
2 |   import { DocumentNode } from 'graphql'
3 | 
4 |   const value: DocumentNode
5 |   export default value
6 | }
7 | 


--------------------------------------------------------------------------------
/.vtexignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .editorconfig
 3 | .eslintrc
 4 | .gitignore
 5 | README.md
 6 | react/**/__tests__/**
 7 | react/**/__mocks__/**
 8 | react/**/*.test.tsx
 9 | react/testUtils/**/*
10 | react/.babelrc
11 | 


--------------------------------------------------------------------------------
/react/components/OrderContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react'
2 | 
3 | export const OrderContext = createContext({} as Order)
4 | 
5 | export function useOrder() {
6 |   return useContext(OrderContext)
7 | }
8 | 


--------------------------------------------------------------------------------
/react/components/CurrencyContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react'
2 | 
3 | export const CurrencyContext = createContext<string>('BRL')
4 | 
5 | export function useCurrency() {
6 |   return useContext(CurrencyContext)
7 | }
8 | 


--------------------------------------------------------------------------------
/react/components/OrderGroupContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react'
2 | 
3 | export const OrderGroupContext = createContext({} as OrderGroup)
4 | 
5 | export function useOrderGroup() {
6 |   return useContext(OrderGroupContext)
7 | }
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | indent_style = space
 8 | indent_size = 2
 9 | charset = utf-8
10 | trim_trailing_whitespace = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/react/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "vtex-react/io",
 3 |   "env": {
 4 |     "browser": true
 5 |   },
 6 |   "overrides": [
 7 |     {
 8 |       "files": ["**/__mocks__/**"],
 9 |       "rules": {
10 |         "react/prefer-stateless-function": "off"
11 |       }
12 |     }
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/react/__mocks__/vtex.pixel-manager/PixelContext.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export function withPixel(WrappedComponent: any) {
 4 |   return class Pixel extends Component {
 5 |     public render() {
 6 |       return <WrappedComponent />
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/react/__mocks__/vtex.profile-form.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export class ProfileRules extends Component {
 4 |   public render() {
 5 |     return this.props.children
 6 |   }
 7 | }
 8 | 
 9 | export function ProfileSummary() {
10 |   return <div>ProfileSummary</div>
11 | }
12 | 


--------------------------------------------------------------------------------
/react/typings/vtex.order-details.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'vtex.order-details' {
 2 |   export const OrderOptions
 3 |   export const PaymentMethod
 4 |   export const OrderSplitNotice
 5 |   export const ProductImage
 6 |   export const Address
 7 |   export const ButtonLink: any
 8 |   export const CustomerInfo
 9 | }
10 | 


--------------------------------------------------------------------------------
/react/typings/vtex.styleguide.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'vtex.styleguide' {
 2 |   export const Alert
 3 |   export const Button
 4 |   export const ButtonWithIcon
 5 |   export const IconCaretDown
 6 |   export const IconCaretUp
 7 |   export const IconInfo
 8 |   export const PageBlock
 9 |   export const Tooltip
10 | }
11 | 


--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/about-codeowners/ for more info about CODEOWNERS file It uses the same pattern rule for gitignore file https://git-scm.com/docs/gitignore#_pattern_format
2 | * @vtex-apps/post-purchase-front @vtex-apps/store-framework-devs
3 | docs/ @vtex-apps/technical-writers
4 | messages/ @vtex-apps/localization


--------------------------------------------------------------------------------
/react/__mocks__/vtex.address-form.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export class AddressSummary extends Component {
 4 |   public render() {
 5 |     return <div>AddressSummary</div>
 6 |   }
 7 | }
 8 | 
 9 | export class AddressRules extends Component {
10 |   public render() {
11 |     return this.props.children
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/react/Order.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { useCssHandles } from 'vtex.css-handles'
 3 | 
 4 | const CSS_HANDLES = ['orderWrapper']
 5 | 
 6 | const Order: FC = ({ children }) => {
 7 |   const handles = useCssHandles(CSS_HANDLES)
 8 |   return <div className={handles.orderWrapper}>{children}</div>
 9 | }
10 | 
11 | export default Order
12 | 


--------------------------------------------------------------------------------
/react/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { useCssHandles } from 'vtex.css-handles'
 3 | 
 4 | const CSS_HANDLES = ['orderPlacedFooter']
 5 | 
 6 | const Footer: FC = ({ children }) => {
 7 |   const handles = useCssHandles(CSS_HANDLES)
 8 |   return <footer className={handles.orderPlacedFooter}>{children}</footer>
 9 | }
10 | 
11 | export default Footer
12 | 


--------------------------------------------------------------------------------
/react/Header.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { useCssHandles } from 'vtex.css-handles'
 3 | 
 4 | const CSS_HANDLES = ['orderPlacedHeader']
 5 | 
 6 | const Header: FC = ({ children }) => {
 7 |   const handles = useCssHandles(CSS_HANDLES)
 8 |   return <header className={handles.orderPlacedHeader}>{children}</header>
 9 | }
10 | 
11 | export default Header
12 | 


--------------------------------------------------------------------------------
/.vtex/ci.yml:
--------------------------------------------------------------------------------
 1 | version: 0.2
 2 | phases:
 3 |   install:
 4 |     commands:
 5 |       - echo Installing Packages...
 6 |       - cd react
 7 |       - npm install
 8 |       - echo Packages installed!
 9 |   pre_build:
10 |     commands:
11 |       - echo Running tests...
12 |       - npm run verify
13 |       - echo Lint and tests finished!
14 | cache:
15 |   paths:
16 |     - 'node_modules/**/*'
17 | 


--------------------------------------------------------------------------------
/react/PrintButton.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import { Button } from 'vtex.styleguide'
 4 | 
 5 | const PrintButton: FC = () => {
 6 |   return (
 7 |     <Button variation="secondary" onClick={() => window.print()}>
 8 |       <FormattedMessage id="store/header.print.button" />
 9 |     </Button>
10 |   )
11 | }
12 | export default PrintButton
13 | 


--------------------------------------------------------------------------------
/react/components/FormattedPrice.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { FormattedNumber } from 'react-intl'
 3 | 
 4 | import { useCurrency } from './CurrencyContext'
 5 | 
 6 | interface Props {
 7 |   value: number
 8 | }
 9 | 
10 | const FormattedPrice: FC<Props> = ({ value }) => {
11 |   const currency = useCurrency()
12 | 
13 |   return (
14 |     <FormattedNumber currency={currency} style="currency" value={value / 100} />
15 |   )
16 | }
17 | 
18 | export default FormattedPrice
19 | 


--------------------------------------------------------------------------------
/react/__tests__/OrderNumber.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { orderGroupQuery as oneDelivery } from '../mocks/oneDeliverySimple'
 4 | import { renderWithOrder } from '../utils/testUtils'
 5 | import OrderNumber from '../OrderNumber'
 6 | 
 7 | test('should render correct order number', () => {
 8 |   const { getByText } = renderWithOrder(oneDelivery.orderGroup, <OrderNumber />)
 9 | 
10 |   const orderId = 'Order #905691102273-01'
11 | 
12 |   expect(getByText(orderId)).toBeTruthy()
13 | })
14 | 


--------------------------------------------------------------------------------
/react/ConfirmationIcon.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { useCssHandles } from 'vtex.css-handles'
 3 | 
 4 | import SuccessIcon from './Icons/Success'
 5 | 
 6 | const CSS_HANDLES = ['confirmationIconWrapper']
 7 | 
 8 | const ConfirmationIcon: FC = () => {
 9 |   const handles = useCssHandles(CSS_HANDLES)
10 | 
11 |   return (
12 |     <div className={`${handles.confirmationIconWrapper} tc c-success`}>
13 |       <SuccessIcon size={50} />
14 |     </div>
15 |   )
16 | }
17 | export default ConfirmationIcon
18 | 


--------------------------------------------------------------------------------
/react/OrderCustomerInfo.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { CustomerInfo } from 'vtex.order-details'
 3 | 
 4 | import { useOrder } from './components/OrderContext'
 5 | 
 6 | const OrderCustomerInfo = () => {
 7 |   const { clientProfileData } = useOrder()
 8 | 
 9 |   if (
10 |     clientProfileData.firstName == null ||
11 |     clientProfileData.lastName == null
12 |   ) {
13 |     return null
14 |   }
15 | 
16 |   return <CustomerInfo profile={clientProfileData} />
17 | }
18 | 
19 | export default OrderCustomerInfo
20 | 


--------------------------------------------------------------------------------
/react/__mocks__/vtex.css-handles.ts:
--------------------------------------------------------------------------------
 1 | export const useCssHandles = (arr: string[]) =>
 2 |   arr.reduce<any>((acc, item) => {
 3 |     acc[item] = item
 4 |     return acc
 5 |   }, {})
 6 | 
 7 | export const applyModifiers = (cssHandle: string, mods: string | string[]) => {
 8 |   const splittedHandle = cssHandle.split(' ')
 9 |   if (!Array.isArray(mods)) mods = [mods]
10 | 
11 |   return splittedHandle.concat(
12 |     splittedHandle.map((handle) =>
13 |       (mods as string[]).map((mod) => `${handle}--${mod}`).join(' ')
14 |     )
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/react/__mocks__/vtex.totalizer-translator/TranslateTotalizer.ts:
--------------------------------------------------------------------------------
 1 | export const knownTotalizers = {
 2 |   Discounts: 1,
 3 |   Items: 1,
 4 |   Shipping: 1,
 5 |   Tax: 1,
 6 |   Interest: 1,
 7 | }
 8 | 
 9 | // reference: https://github.com/vtex-apps/totalizer-translator/blob/master/react/TranslateTotalizer.js
10 | const TranslateTotalizer = ({ totalizer }: { totalizer: OrderItemTotal }) => {
11 |   const { id } = totalizer
12 |   if (id in knownTotalizers) return id
13 |   if (!totalizer) return id || ''
14 |   return totalizer.name
15 | }
16 | export default TranslateTotalizer
17 | 


--------------------------------------------------------------------------------
/react/styles.css:
--------------------------------------------------------------------------------
 1 | .errorWrapper {
 2 |   margin: 200px auto;
 3 |   max-width: 36em;
 4 | }
 5 | 
 6 | .errorMessage {
 7 |   max-width: 24em;
 8 | }
 9 | 
10 | .confirmationIconWrapper {
11 |   line-height: 0;
12 | }
13 | 
14 | .orderOptionsWrapper--mobile {
15 |   margin-bottom: 2rem;
16 | }
17 | 
18 | .noticeListItem:last-child {
19 |   border-bottom: none;
20 | }
21 | 
22 | .barCodeNumber {
23 |   word-break: break-all;
24 | }
25 | 
26 | .orderListItem:last-child,
27 | .productListItem:last-child {
28 |   border-bottom: none;
29 |   margin-bottom: 0;
30 |   padding-bottom: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.formatOnSave": true,
 3 |   "eslint.validate": [
 4 |     "javascript",
 5 |     "javascriptreact",
 6 |     "typescript",
 7 |     "typescriptreact"
 8 |   ],
 9 |   "eslint.alwaysShowStatus": true,
10 |   "eslint.packageManager": "yarn",
11 |   "eslint.workingDirectories": [
12 |     {
13 |       "directory": "react",
14 |       "changeProcessCWD": true
15 |     },
16 |     {
17 |       "directory": "node",
18 |       "changeProcessCWD": true
19 |     }
20 |   ],
21 |   "editor.codeActionsOnSave": {
22 |     "source.fixAll.eslint": true
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/react/Analytics.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, FC } from 'react'
 2 | import { withPixel } from 'vtex.pixel-manager/PixelContext'
 3 | import { useRuntime } from 'vtex.render-runtime'
 4 | 
 5 | interface Props {
 6 |   push: (...args: any) => void
 7 |   runtime: any
 8 |   eventList: any[]
 9 | }
10 | 
11 | const Analytics: FC<Props> = ({ eventList, push }) => {
12 |   const { route } = useRuntime()
13 | 
14 |   useEffect(() => {
15 |     eventList.forEach((event) => push(event))
16 |   }, [eventList, push, route.path])
17 | 
18 |   return null
19 | }
20 | 
21 | export default withPixel(Analytics)
22 | 


--------------------------------------------------------------------------------
/react/styles.global.css:
--------------------------------------------------------------------------------
 1 | /* Skeleton animation */
 2 | @keyframes shimmer-anim {
 3 |   0% {
 4 |     transform: translate3d(0, 0, 0);
 5 |   }
 6 |   100% {
 7 |     transform: translate3d(50%, 0, 0);
 8 |   }
 9 | }
10 | 
11 | .skeleton-shimmer {
12 |   animation: shimmer-anim 0.7s linear infinite;
13 |   background: linear-gradient(
14 |     90deg,
15 |     rgba(255, 255, 255, 0),
16 |     rgba(255, 255, 255, 0.7),
17 |     rgba(255, 255, 255, 0)
18 |   );
19 |   background-size: 50% 100%;
20 |   height: 100%;
21 |   left: -100%;
22 |   position: absolute;
23 |   top: 0;
24 |   width: 200%;
25 | }
26 | 


--------------------------------------------------------------------------------
/react/typings/render.d.ts:
--------------------------------------------------------------------------------
 1 | /* Typings for `render-runtime` */
 2 | declare module 'vtex.render-runtime' {
 3 |   import { Component, ReactElement } from 'react'
 4 | 
 5 |   export interface RenderContextProps {
 6 |     runtime: {
 7 |       account: string
 8 |       query: Record<string, string>
 9 |     }
10 |   }
11 | 
12 |   export const Link: any
13 |   export const RenderContextConsumer: ReactElement
14 |   export const canUseDOM: boolean
15 |   export const withRuntimeContext: any
16 |   export const Helmet: any
17 |   export const ExtensionPoint: any
18 |   export const useRuntime: any
19 | }
20 | 


--------------------------------------------------------------------------------
/react/Icons/utils.tsx:
--------------------------------------------------------------------------------
 1 | export const calcIconSize = (
 2 |   iconBase: { height: number; width: number },
 3 |   newSize: number
 4 | ) => {
 5 |   const isHorizontal = iconBase.width >= iconBase.height
 6 | 
 7 |   const width = isHorizontal
 8 |     ? newSize
 9 |     : (newSize * iconBase.width) / iconBase.height
10 | 
11 |   const height = !isHorizontal
12 |     ? newSize
13 |     : (newSize * iconBase.height) / iconBase.width
14 | 
15 |   return { width, height }
16 | }
17 | 
18 | export const baseClassname = (name: string, variation?: string) =>
19 |   `vtex__icon-${name} ${variation ? `vtex__icon-${name}--${variation}` : ''}`
20 | 


--------------------------------------------------------------------------------
/react/OrderNumber.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import { useCssHandles } from 'vtex.css-handles'
 4 | 
 5 | import { useOrder } from './components/OrderContext'
 6 | 
 7 | const CSS_HANDLES = ['orderNumber']
 8 | 
 9 | const OrderNumber = () => {
10 |   const { orderId } = useOrder()
11 |   const handles = useCssHandles(CSS_HANDLES)
12 | 
13 |   return (
14 |     <h3 className={`${handles.orderNumber} mv0 t-heading-3 lh-copy`}>
15 |       <FormattedMessage id="store/order.header.number" values={{ orderId }} />
16 |     </h3>
17 |   )
18 | }
19 | 
20 | export default OrderNumber
21 | 


--------------------------------------------------------------------------------
/react/__tests__/OrderSeller.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { orderGroupQuery as splitOrder } from '../mocks/splitOrderTwoSellers'
 4 | import { renderWithOrder } from '../utils/testUtils'
 5 | import OrderSeller from '../OrderSeller'
 6 | 
 7 | test('should render seller name for an order processed by another seller', () => {
 8 |   const { getByText } = renderWithOrder(splitOrder.orderGroup, <OrderSeller />)
 9 | 
10 |   const seller = 'Sold and delivered by'
11 |   expect(getByText(seller)).toBeTruthy()
12 |   expect(
13 |     getByText(splitOrder.orderGroup.orders[0].sellers[0].name)
14 |   ).toBeTruthy()
15 | })
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | ### SublimeText ###
 2 | *.sublime-workspace
 3 | 
 4 | ### OSX ###
 5 | .DS_Store
 6 | .AppleDouble
 7 | .LSOverride
 8 | Icon
 9 | 
10 | # Thumbnails
11 | ._*
12 | 
13 | # Files that might appear on external disk
14 | .Spotlight-V100
15 | .Trashes
16 | 
17 | ### Windows ###
18 | # Windows image file caches
19 | Thumbs.db
20 | ehthumbs.db
21 | 
22 | # Folder config file
23 | Desktop.ini
24 | 
25 | # Recycle Bin used on file shares
26 | $RECYCLE.BIN/
27 | 
28 | # App specific
29 | node_modules/
30 | docs/_book/
31 | .tmp
32 | .idea
33 | npm-debug.log
34 | .build/
35 | lib
36 | dist
37 | build
38 | lerna-debug.log
39 | yarn-error.log
40 | *.orig
41 | 


--------------------------------------------------------------------------------
/react/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vtex/tsconfig",
 3 |   "compilerOptions": {
 4 |     "jsx": "react",
 5 |     "noEmitOnError": false,
 6 |     "typeRoots": [
 7 |       "node_modules/@types"
 8 |     ],
 9 |     "types": [
10 |       "node",
11 |       "jest",
12 |       "graphql"
13 |     ],
14 |     "module": "esnext",
15 |     "moduleResolution": "node",
16 |     "target": "es2017",
17 |     "lib": [
18 |       "es2019",
19 |       "es2017",
20 |       "dom",
21 |       "es2018.promise",
22 |       "esnext.asynciterable"
23 |     ]
24 |   },
25 |   "include": [
26 |     "./typings/*.d.ts",
27 |     "./**/*.tsx",
28 |     "./**/*.ts"
29 |   ]
30 | }


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/questions-and-help.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Question
 3 | about: Ask a question you had while building a store
 4 | labels: question
 5 | ---
 6 | 
 7 | **What are you trying to accomplish? Please describe.**
 8 | A clear and concise description of what is your question and what you're trying to accomplish in the end is.
 9 | 
10 | **What have you tried so far?**
11 | A clear and concise description of what you tried to do already.
12 | 
13 | **Additional info**
14 | Add extra content here (code samples, screenshots,...)
15 | 
16 | | Account        | Workspace        |
17 | | -------------- | ---------------- |
18 | | `your account` | `your workspace` |
19 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | #### What is the purpose of this pull request?
 2 | <!--- Describe your changes in detail. -->
 3 | 
 4 | #### What problem is this solving?
 5 | <!--- What is the motivation and context for this change? -->
 6 | 
 7 | #### How should this be manually tested?
 8 | 
 9 | #### Screenshots or example usage
10 | 
11 | #### Types of changes
12 | - [ ] Bug fix (non-breaking change which fixes an issue)
13 | - [ ] New feature (non-breaking change which adds functionality)
14 | - [ ] Breaking change (fix or feature that would cause existing functionality to change)
15 | - [ ] Requires change to documentation, which has been updated accordingly.
16 | 


--------------------------------------------------------------------------------
/react/Icons/Tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | import { baseClassname } from './utils'
 4 | 
 5 | const Tooltip: FC<{ colorToken?: string }> = ({ colorToken }) => (
 6 |   <svg
 7 |     className={`${baseClassname('tooltip')} ${colorToken ?? ''}`}
 8 |     width="20"
 9 |     height="9"
10 |     viewBox="0 0 20 9"
11 |     fill="none"
12 |     xmlns="http://www.w3.org/2000/svg"
13 |     style={{ paddingLeft: '7.75rem' }}
14 |   >
15 |     <path
16 |       d="M12.1213 1.12132L20 9L0 9L7.87868 1.12132C9.05025 -0.050251 10.9497 -0.0502493 12.1213 1.12132Z"
17 |       fill="currentColor"
18 |     />
19 |   </svg>
20 | )
21 | 
22 | export default Tooltip
23 | 


--------------------------------------------------------------------------------
/react/Icons/Info.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | import { baseClassname } from './utils'
 4 | 
 5 | const InfoIcon: FC<{ colorToken: string }> = ({ colorToken }) => (
 6 |   <svg
 7 |     className={`${baseClassname('info')} ${colorToken || ''}`}
 8 |     width="16"
 9 |     height="16"
10 |     viewBox="0 0 16 16"
11 |     fill="none"
12 |     xmlns="http://www.w3.org/2000/svg"
13 |   >
14 |     <path
15 |       d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM9 12H7V7H9V12ZM8 6C7.4 6 7 5.6 7 5C7 4.4 7.4 4 8 4C8.6 4 9 4.4 9 5C9 5.6 8.6 6 8 6Z"
16 |       fill="currentColor"
17 |     />
18 |   </svg>
19 | )
20 | 
21 | export default InfoIcon
22 | 


--------------------------------------------------------------------------------
/react/__mocks__/vtex.order-details.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | export function FormattedDate() {
 4 |   return <span>FormattedDate</span>
 5 | }
 6 | 
 7 | export function Address() {
 8 |   return <span>Address</span>
 9 | }
10 | 
11 | export function CustomerInfo() {
12 |   return <span>CustomerInfo</span>
13 | }
14 | 
15 | export const ProductImage: FC = () => <div>ProductImage</div>
16 | 
17 | export const PaymentMethod: FC<{ payment: any }> = ({ payment }) => (
18 |   <div>{payment.group}</div>
19 | )
20 | 
21 | export const ButtonLink: FC<{ to: string }> = ({ to, children }) => (
22 |   <a href={to} data-testid="button-link">
23 |     {children}
24 |   </a>
25 | )
26 | 


--------------------------------------------------------------------------------
/react/utils/useSessionResponse.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-explicit-any */
 2 | import { useEffect, useMemo, useState } from 'react'
 3 | 
 4 | export const useSessionResponse = () => {
 5 |   const [session, setSession] = useState<any>()
 6 |   const sessionPromise = useMemo(
 7 |     () =>
 8 |       ((window as any).__RENDER_8_SESSION__?.sessionPromise as Promise<any>) ??
 9 |       undefined,
10 |     []
11 |   )
12 | 
13 |   useEffect(() => {
14 |     if (!sessionPromise) {
15 |       return
16 |     }
17 | 
18 |     sessionPromise.then((sessionResponse: any) => {
19 |       setSession(sessionResponse?.response)
20 |     })
21 |   }, [sessionPromise, setSession])
22 | 
23 |   return session
24 | }
25 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: 'New Feature'
 6 | assignees: ''
 7 | ---
 8 | 
 9 | **Is your feature request related to a problem? Please describe.**
10 | A clear and concise description of what the problem is. For example: I'm always frustrated when [...]
11 | 
12 | **Describe the solution you'd like**
13 | A clear and concise description of what you want to happen.
14 | 
15 | **Describe alternatives you've considered**
16 | A clear and concise description of any alternative solutions or features you've considered.
17 | 
18 | **Additional context**
19 | Add any other context or screenshots about the feature request here.
20 | 


--------------------------------------------------------------------------------
/.vtex/catalog-info.yaml:
--------------------------------------------------------------------------------
 1 | apiVersion: backstage.io/v1alpha1
 2 | kind: Component
 3 | metadata:
 4 |   name: order-placed
 5 |   description: "VTEX IO app for order placed storefront page "
 6 |   annotations:
 7 |     github.com/project-slug: vtex-apps/order-placed
 8 |     vtex.com/o11y-os-index: ""
 9 |     vtex.com/janus-acronym: ""
10 |     grafana/dashboard-selector: ""
11 |     backstage.io/techdocs-ref: dir:../
12 |     vtex.com/application-id: GZ20FRE0
13 |     vtex.com/platform-flow-id: Shopper#4
14 |   tags:
15 |     - typescript
16 |     - react
17 | spec:
18 |   type: frontend-ui
19 |   lifecycle: experimental
20 |   owner: te-0001
21 |   system: checkout
22 |   dependsOn:
23 |     - component:order-placed-graphql
24 |     - component:address-form
25 | 


--------------------------------------------------------------------------------
/react/Icons/Forbidden.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | const Forbidden: FC = () => (
 4 |   <svg
 5 |     width="72"
 6 |     height="60"
 7 |     viewBox="0 0 72 60"
 8 |     fill="none"
 9 |     xmlns="http://www.w3.org/2000/svg"
10 |   >
11 |     <rect width="72" height="60" rx="4" fill="#F71963" />
12 |     <path
13 |       d="M6 15H66V50C66 52.2091 64.2091 54 62 54H10C7.79086 54 6 52.2091 6 50V15Z"
14 |       fill="white"
15 |     />
16 |     <circle cx="36" cy="34" r="9.5" stroke="#142032" strokeWidth="3" />
17 |     <path d="M42 28L29.2721 40.7279" stroke="#142032" strokeWidth="3" />
18 |     <circle cx="24.5" cy="7.5" r="2.5" fill="#FFE6E6" />
19 |     <circle cx="16.5" cy="7.5" r="2.5" fill="#FFE6E6" />
20 |     <circle cx="8.5" cy="7.5" r="2.5" fill="#FFE6E6" />
21 |   </svg>
22 | )
23 | 
24 | export default Forbidden
25 | 


--------------------------------------------------------------------------------
/react/Icons/PrinterIcon.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | import { calcIconSize } from './utils'
 4 | 
 5 | const iconBase = {
 6 |   height: 16,
 7 |   width: 16,
 8 | }
 9 | 
10 | const PrinterIcon: FC<IconProps> = ({ color = 'currentColor', size = 16 }) => {
11 |   const newSize = calcIconSize(iconBase, size)
12 | 
13 |   return (
14 |     <svg
15 |       width={newSize.width}
16 |       height={newSize.height}
17 |       viewBox="0 0 16 16"
18 |       fill="none"
19 |       xmlns="http://www.w3.org/2000/svg"
20 |     >
21 |       <path d="M13 0H3V3H13V0Z" fill={color} />
22 |       <path
23 |         d="M15 5H1C0.4 5 0 5.4 0 6V12C0 12.6 0.4 13 1 13H3V15C3 15.6 3.4 16 4 16H12C12.6 16 13 15.6 13 15V13H15C15.6 13 16 12.6 16 12V6C16 5.4 15.6 5 15 5ZM11 14H5V9H11V14Z"
24 |         fill={color}
25 |       />
26 |     </svg>
27 |   )
28 | }
29 | 
30 | export default PrinterIcon
31 | 


--------------------------------------------------------------------------------
/react/ConfirmationTitle.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import { useCssHandles } from 'vtex.css-handles'
 4 | 
 5 | import { useOrderGroup } from './components/OrderGroupContext'
 6 | 
 7 | const CSS_HANDLES = ['confirmationTitle'] as const
 8 | 
 9 | const ConfirmationTitle: FC = () => {
10 |   const handles = useCssHandles(CSS_HANDLES)
11 |   const orderGroup = useOrderGroup()
12 |   const profile = orderGroup.orders[0].clientProfileData
13 | 
14 |   return (
15 |     <h4
16 |       className={`${handles.confirmationTitle} tc c-on-base mt7 mb0 t-heading-4`}
17 |     >
18 |       <FormattedMessage
19 |         id="store/header.thanks"
20 |         values={{
21 |           firstName: profile.firstName,
22 |           lastName: profile.lastName,
23 |         }}
24 |       />
25 |     </h4>
26 |   )
27 | }
28 | export default ConfirmationTitle
29 | 


--------------------------------------------------------------------------------
/react/__mocks__/vtex.render-runtime.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export function withRuntimeContext(WrappedComponent: any) {
 4 |   return class WithRuntimeContext extends Component {
 5 |     public render() {
 6 |       return (
 7 |         <WrappedComponent {...this.props} runtime={{ account: 'vtexgame1' }} />
 8 |       )
 9 |     }
10 |   }
11 | }
12 | 
13 | export function ExtensionPoint({ id }: { id: string }) {
14 |   return <div>Extension point {id}</div>
15 | }
16 | 
17 | export function useRuntime() {
18 |   return {
19 |     query: window.location.search
20 |       .substr(1)
21 |       .split('&')
22 |       .map((pair) => pair.split('='))
23 |       .reduce((acc: any, [key, val]) => {
24 |         acc[key] = encodeURIComponent(val)
25 |         return acc
26 |       }, {}),
27 |   }
28 | }
29 | 
30 | export function Link({ children }: any) {
31 |   return <>{children}</>
32 | }
33 | 


--------------------------------------------------------------------------------
/react/__tests__/OrderPlacedConfirmation.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import ConfirmationIcon from '../ConfirmationIcon'
 4 | import ConfirmationTitle from '../ConfirmationTitle'
 5 | import { orderGroupQuery as oneDelivery } from '../mocks/oneDeliverySimple'
 6 | import { renderWithOrderGroup } from '../utils/testUtils'
 7 | 
 8 | test('should render success icon', () => {
 9 |   const { getByTestId } = renderWithOrderGroup(
10 |     oneDelivery.orderGroup,
11 |     <ConfirmationIcon />
12 |   )
13 | 
14 |   const icon = getByTestId('sucessIcon')
15 |   expect(icon).toBeTruthy()
16 | })
17 | 
18 | test('should render thank you message', () => {
19 |   const { getByText } = renderWithOrderGroup(
20 |     oneDelivery.orderGroup,
21 |     <ConfirmationTitle />
22 |   )
23 | 
24 |   const thankYouMessage = getByText(/Thank you for your purchase!/)
25 |   expect(thankYouMessage.textContent).toBeTruthy()
26 | })
27 | 


--------------------------------------------------------------------------------
/react/Icons/MailIcon.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | import { calcIconSize } from './utils'
 4 | 
 5 | const iconBase = {
 6 |   height: 14,
 7 |   width: 16,
 8 | }
 9 | 
10 | const MailIcon: FC<IconProps> = ({ color = 'currentColor', size = 16 }) => {
11 |   const newSize = calcIconSize(iconBase, size)
12 | 
13 |   return (
14 |     <svg
15 |       width={newSize.width}
16 |       height={newSize.height}
17 |       viewBox="0 0 16 14"
18 |       fill="none"
19 |       xmlns="http://www.w3.org/2000/svg"
20 |     >
21 |       <path
22 |         d="M15 0H1C0.4 0 0 0.4 0 1V2.4L8 6.9L16 2.5V1C16 0.4 15.6 0 15 0Z"
23 |         fill={color}
24 |       />
25 |       <path
26 |         d="M7.5 8.90001L0 4.70001V13C0 13.6 0.4 14 1 14H15C15.6 14 16 13.6 16 13V4.70001L8.5 8.90001C8.22 9.04001 7.78 9.04001 7.5 8.90001Z"
27 |         fill={color}
28 |       />
29 |     </svg>
30 |   )
31 | }
32 | 
33 | export default MailIcon
34 | 


--------------------------------------------------------------------------------
/react/OrderSplitNotice.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { OrderSplitNotice } from 'vtex.order-details'
 3 | import { useIntl } from 'react-intl'
 4 | import { useCssHandles } from 'vtex.css-handles'
 5 | 
 6 | import { useOrder } from './components/OrderContext'
 7 | 
 8 | const CSS_HANDLES = ['splitNotice']
 9 | 
10 | const WrappedOrderSplitNotice = () => {
11 |   const handles = useCssHandles(CSS_HANDLES)
12 |   const order = useOrder()
13 |   const intl = useIntl()
14 | 
15 |   if (order.deliveryParcels.length < 2) {
16 |     return null
17 |   }
18 | 
19 |   return (
20 |     <div className={`${handles.splitNotice} mb5`}>
21 |       <OrderSplitNotice
22 |         deliveries={order.deliveryParcels.length}
23 |         pickups={order.pickUpParcels.length}
24 |         takeaways={order.takeAwayParcels.length}
25 |         intl={intl}
26 |       />
27 |     </div>
28 |   )
29 | }
30 | 
31 | export default WrappedOrderSplitNotice
32 | 


--------------------------------------------------------------------------------
/react/components/OrderList.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { ExtensionPoint } from 'vtex.render-runtime'
 3 | import { useCssHandles } from 'vtex.css-handles'
 4 | 
 5 | import { useOrderGroup } from './OrderGroupContext'
 6 | import { OrderContext } from './OrderContext'
 7 | 
 8 | const CSS_HANDLES = ['orderList', 'orderListItem']
 9 | 
10 | const OrderList: FC = () => {
11 |   const handles = useCssHandles(CSS_HANDLES)
12 |   const orderGroup = useOrderGroup()
13 |   return (
14 |     <ul className={`${handles.orderList} list pa0 ma0`}>
15 |       {orderGroup.orders.map((order) => (
16 |         <OrderContext.Provider key={order.orderId} value={order}>
17 |           <li className={`${handles.orderListItem} db bb b--muted-4 pb9 mb9`}>
18 |             <ExtensionPoint id="op-order" />
19 |           </li>
20 |         </OrderContext.Provider>
21 |       ))}
22 |     </ul>
23 |   )
24 | }
25 | 
26 | export default OrderList
27 | 


--------------------------------------------------------------------------------
/react/TakeAwayPackages.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | 
 4 | import ProductList from './components/ProductList'
 5 | import { useOrder } from './components/OrderContext'
 6 | import Section from './Section'
 7 | 
 8 | const TakeAway: FC = () => {
 9 |   const { takeAwayParcels } = useOrder()
10 | 
11 |   if (takeAwayParcels.length === 0) {
12 |     return null
13 |   }
14 | 
15 |   return (
16 |     <Section name="takeaway">
17 |       <div className="mv8 flex flex-column justify-between">
18 |         <header>
19 |           <p
20 |             data-testid="takeaway-header"
21 |             className="t-heading-4-ns t-heading-5"
22 |           >
23 |             <FormattedMessage id="store/takeaway.header.title" />
24 |           </p>
25 |         </header>
26 |         <ProductList products={takeAwayParcels[0].items} />
27 |       </div>
28 |     </Section>
29 |   )
30 | }
31 | export default TakeAway
32 | 


--------------------------------------------------------------------------------
/react/components/ProductList/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { useCssHandles } from 'vtex.css-handles'
 3 | 
 4 | import BundleInfo from './BundleItems'
 5 | import Attachment from './Attachments'
 6 | import Product from './Product'
 7 | 
 8 | interface Props {
 9 |   products: OrderItem[]
10 | }
11 | 
12 | const CSS_HANDLES = ['productList', 'productListItem']
13 | 
14 | const ProductList: FC<Props> = ({ products }) => {
15 |   const handles = useCssHandles(CSS_HANDLES)
16 |   return (
17 |     <ul className={`${handles.productList} w-60-l w-100 list pl0`}>
18 |       {products.map((product) => (
19 |         <li
20 |           key={product.id}
21 |           className={`${handles.productListItem} db bb b--muted-4 mb7 pb7`}
22 |         >
23 |           <Product product={product} />
24 |           <BundleInfo product={product} />
25 |           <Attachment product={product} />
26 |         </li>
27 |       ))}
28 |     </ul>
29 |   )
30 | }
31 | 
32 | export default ProductList
33 | 


--------------------------------------------------------------------------------
/react/__tests__/PickupSummary.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import PickupSummary from '../components/PickupSummary'
 4 | import { orderGroupQuery as fiftyItemOrder } from '../mocks/fiftyItemOrder'
 5 | import { renderWithOrderGroup } from '../utils/testUtils'
 6 | 
 7 | test('renders the number of items', () => {
 8 |   const { queryByText } = renderWithOrderGroup(
 9 |     fiftyItemOrder.orderGroup,
10 |     <PickupSummary />
11 |   )
12 | 
13 |   expect(queryByText(/30 items/)).toBeTruthy()
14 | })
15 | 
16 | test('renders the number of stores', () => {
17 |   const { queryByText } = renderWithOrderGroup(
18 |     fiftyItemOrder.orderGroup,
19 |     <PickupSummary />
20 |   )
21 | 
22 |   expect(queryByText(/one store/)).toBeTruthy()
23 | })
24 | 
25 | test('renders the pickup address', () => {
26 |   const { queryByText } = renderWithOrderGroup(
27 |     fiftyItemOrder.orderGroup,
28 |     <PickupSummary />
29 |   )
30 | 
31 |   expect(queryByText(/copacabana no rio de janeiro/i)).toBeTruthy()
32 | })
33 | 


--------------------------------------------------------------------------------
/react/OrderOptions.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { OrderOptions } from 'vtex.order-details'
 3 | import { useCssHandles } from 'vtex.css-handles'
 4 | 
 5 | import { useOrder } from './components/OrderContext'
 6 | 
 7 | interface Props {
 8 |   fullWidth?: boolean
 9 |   myAccountPath?: string
10 | }
11 | 
12 | const CSS_HANDLES = ['orderOptionsWrapper']
13 | 
14 | const WrappedOrderOptions: FC<Props> = ({
15 |   fullWidth = false,
16 |   myAccountPath = '/account',
17 | }) => {
18 |   const order = useOrder()
19 |   const handles = useCssHandles(CSS_HANDLES)
20 |   const hasTakeAwayParcels = order.takeAwayParcels.length > 0
21 | 
22 |   return (
23 |     <OrderOptions
24 |       className={`${handles.orderOptionsWrapper} flex-l`}
25 |       allowCancellation={order.allowCancellation}
26 |       orderId={order.orderId}
27 |       takeaway={hasTakeAwayParcels}
28 |       fullWidth={fullWidth}
29 |       myAccountPath={myAccountPath}
30 |     />
31 |   )
32 | }
33 | 
34 | export default WrappedOrderOptions
35 | 


--------------------------------------------------------------------------------
/react/__tests__/DeliverySummary.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import DeliverySummary from '../components/DeliverySummary'
 4 | import { orderGroupQuery as fiftyItemOrder } from '../mocks/fiftyItemOrder'
 5 | import { renderWithOrderGroup } from '../utils/testUtils'
 6 | 
 7 | test('renders the number of items', () => {
 8 |   const { queryByText } = renderWithOrderGroup(
 9 |     fiftyItemOrder.orderGroup,
10 |     <DeliverySummary />
11 |   )
12 | 
13 |   expect(queryByText(/20 items/)).toBeTruthy()
14 | })
15 | 
16 | test('renders the number of deliveries', () => {
17 |   const { queryByText } = renderWithOrderGroup(
18 |     fiftyItemOrder.orderGroup,
19 |     <DeliverySummary />
20 |   )
21 | 
22 |   expect(queryByText(/9 deliveries/)).toBeTruthy()
23 | })
24 | 
25 | test('renders the shipping address', () => {
26 |   const { queryByText } = renderWithOrderGroup(
27 |     fiftyItemOrder.orderGroup,
28 |     <DeliverySummary />
29 |   )
30 | 
31 |   expect(queryByText(/praia de botafogo, 300/i)).toBeTruthy()
32 | })
33 | 


--------------------------------------------------------------------------------
/react/components/Errors/InvalidError.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { FormattedMessage, defineMessages } from 'react-intl'
 3 | import { Button } from 'vtex.styleguide'
 4 | import { Link } from 'vtex.render-runtime'
 5 | 
 6 | import ErrorMessage from './ErrorMessage'
 7 | import NotFound from '../../Icons/NotFound'
 8 | 
 9 | const messages = defineMessages({
10 |   invalidTitle: {
11 |     id: 'store/order.error.invalid.title',
12 |     defaultMessage: '',
13 |   },
14 |   invalidMessage: {
15 |     id: 'store/order.error.invalid.message',
16 |     defaultMessage: '',
17 |   },
18 | })
19 | 
20 | const InvalidError: FC = () => {
21 |   return (
22 |     <ErrorMessage
23 |       icon={<NotFound />}
24 |       errorId={messages.invalidTitle.id}
25 |       messageId={messages.invalidMessage.id}
26 |     >
27 |       <Link to="/">
28 |         <Button>
29 |           <FormattedMessage id="store/go-to-home" />
30 |         </Button>
31 |       </Link>
32 |     </ErrorMessage>
33 |   )
34 | }
35 | 
36 | export default InvalidError
37 | 


--------------------------------------------------------------------------------
/react/OrderDatetime.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { FormattedMessage, FormattedTime, FormattedDate } from 'react-intl'
 3 | import { useCssHandles } from 'vtex.css-handles'
 4 | 
 5 | import { useOrder } from './components/OrderContext'
 6 | 
 7 | const CSS_HANDLES = ['orderDatetime']
 8 | 
 9 | const OrderDate = () => {
10 |   const { creationDate } = useOrder()
11 |   const handles = useCssHandles(CSS_HANDLES)
12 | 
13 |   return (
14 |     <small className={`${handles.orderDatetime} c-muted-2 t-body lh-copy`}>
15 |       <FormattedMessage
16 |         id="store/order.header.date"
17 |         values={{
18 |           orderDate: (
19 |             <time dateTime={creationDate}>
20 |               <FormattedDate value={creationDate} />
21 |             </time>
22 |           ),
23 |           orderTime: (
24 |             <time dateTime={creationDate}>
25 |               <FormattedTime value={creationDate} />
26 |             </time>
27 |           ),
28 |         }}
29 |       />
30 |     </small>
31 |   )
32 | }
33 | 
34 | export default OrderDate
35 | 


--------------------------------------------------------------------------------
/react/components/Errors/ErrorMessage.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactNode, FC } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import { useCssHandles } from 'vtex.css-handles'
 4 | 
 5 | interface Props {
 6 |   errorId: string
 7 |   messageId?: string
 8 |   children?: ReactNode
 9 |   icon: ReactNode
10 | }
11 | 
12 | const CSS_HANDLES = ['errorWrapper', 'errorTitle', 'errorMessage']
13 | 
14 | const ErrorMessage: FC<Props> = ({ icon, errorId, messageId, children }) => {
15 |   const handles = useCssHandles(CSS_HANDLES)
16 |   return (
17 |     <div className={`${handles.errorWrapper} tc`}>
18 |       <main>
19 |         {icon}
20 |         <h2 className={`${handles.errorTitle} f2`}>
21 |           <FormattedMessage id={errorId} />
22 |         </h2>
23 |         {typeof messageId === 'string' && (
24 |           <p className={`${handles.errorMessage} center mb7 c-muted-1 lh-copy`}>
25 |             <FormattedMessage id={messageId} />
26 |           </p>
27 |         )}
28 |         {children}
29 |       </main>
30 |     </div>
31 |   )
32 | }
33 | 
34 | export default ErrorMessage
35 | 


--------------------------------------------------------------------------------
/react/OrderPayment.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { PaymentMethod } from 'vtex.order-details'
 3 | import { useCssHandles } from 'vtex.css-handles'
 4 | 
 5 | import { useOrder } from './components/OrderContext'
 6 | import { useCurrency } from './components/CurrencyContext'
 7 | 
 8 | const CSS_HANDLES = ['orderPaymentWrapper', 'orderPaymentItem']
 9 | 
10 | const OrderPayment = () => {
11 |   const order = useOrder()
12 |   const currency = useCurrency()
13 |   const handles = useCssHandles(CSS_HANDLES)
14 | 
15 |   const [{ payments, transactionId }] = order.paymentData.transactions
16 | 
17 |   return (
18 |     <div
19 |       className={`${handles.orderPaymentWrapper} flex flex-column flex-row-m`}
20 |     >
21 |       {payments.map((payment, idx) => (
22 |         <div key={idx} className={`${handles.orderPaymentItem} pb8-s mr9-m`}>
23 |           <PaymentMethod
24 |             payment={payment}
25 |             transactionId={transactionId}
26 |             currency={currency}
27 |           />
28 |         </div>
29 |       ))}
30 |     </div>
31 |   )
32 | }
33 | 
34 | export default OrderPayment
35 | 


--------------------------------------------------------------------------------
/react/TaxInfo.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FunctionComponent } from 'react'
 2 | import { Tooltip, IconInfo } from 'vtex.styleguide'
 3 | import TranslateTotalizer from 'vtex.totalizer-translator/TranslateTotalizer'
 4 | 
 5 | import FormattedPrice from './components/FormattedPrice'
 6 | 
 7 | interface Props {
 8 |   taxesTotals: OrderItemTotal[]
 9 | }
10 | 
11 | const TaxInfo: FunctionComponent<Props> = ({ taxesTotals }) => {
12 |   const tooltipLabel = (
13 |     <ul className="list pa0 ma0">
14 |       {taxesTotals.map((total) => (
15 |         <li className="flex justify-between items-center" key={total.name}>
16 |           <span className="pr5">
17 |             <TranslateTotalizer totalizer={total} />
18 |           </span>
19 |           <span>
20 |             <FormattedPrice value={total.value} />
21 |           </span>
22 |         </li>
23 |       ))}
24 |     </ul>
25 |   )
26 | 
27 |   return (
28 |     <Tooltip label={tooltipLabel}>
29 |       <span className="pointer flex items-start">
30 |         <IconInfo size={12} />
31 |       </span>
32 |     </Tooltip>
33 |   )
34 | }
35 | 
36 | export default TaxInfo
37 | 


--------------------------------------------------------------------------------
/react/components/Errors/ForbiddenError.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from 'vtex.styleguide'
 2 | import React, { FC } from 'react'
 3 | import { FormattedMessage, defineMessages } from 'react-intl'
 4 | import { Link } from 'vtex.render-runtime'
 5 | 
 6 | import ForbiddenIcon from '../../Icons/Forbidden'
 7 | import ErrorMessage from './ErrorMessage'
 8 | 
 9 | const messages = defineMessages({
10 |   notLoggedInTitle: {
11 |     id: 'store/order.error.not-logged-in.title',
12 |     defaultMessage: '',
13 |   },
14 |   notLoggedInMessage: {
15 |     id: 'store/order.error.not-logged-in.message',
16 |     defaultMessage: '',
17 |   },
18 | })
19 | 
20 | const ForbiddenError: FC = () => {
21 |   return (
22 |     <ErrorMessage
23 |       icon={<ForbiddenIcon />}
24 |       errorId={messages.notLoggedInTitle.id}
25 |       messageId={messages.notLoggedInMessage.id}
26 |     >
27 |       <Link to={`/login?returnUrl=${window.location.href}`}>
28 |         <Button>
29 |           <FormattedMessage id="store/go-to-login" />
30 |         </Button>
31 |       </Link>
32 |     </ErrorMessage>
33 |   )
34 | }
35 | 
36 | export default ForbiddenError
37 | 


--------------------------------------------------------------------------------
/react/Icons/Success.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | import { calcIconSize } from './utils'
 4 | 
 5 | const iconBase = {
 6 |   height: 42,
 7 |   width: 42,
 8 | }
 9 | 
10 | const SuccessIcon: FC<IconProps> = ({ color = 'currentColor', size = 42 }) => {
11 |   const newSize = calcIconSize(iconBase, size)
12 | 
13 |   return (
14 |     <svg
15 |       data-testid="sucessIcon"
16 |       width={newSize.width}
17 |       height={newSize.height}
18 |       viewBox="0 0 42 42"
19 |       fill="none"
20 |       xmlns="http://www.w3.org/2000/svg"
21 |     >
22 |       <path
23 |         d="M11.666 22.333L16.9993 27.6663L30.3327 14.333"
24 |         stroke={color}
25 |         strokeWidth="2"
26 |         strokeMiterlimit="10"
27 |         strokeLinecap="square"
28 |       />
29 |       <path
30 |         d="M21 41C32.0457 41 41 32.0457 41 21C41 9.95431 32.0457 1 21 1C9.95431 1 1 9.95431 1 21C1 32.0457 9.95431 41 21 41Z"
31 |         stroke={color}
32 |         strokeWidth="2"
33 |         strokeMiterlimit="10"
34 |         strokeLinecap="square"
35 |       />
36 |     </svg>
37 |   )
38 | }
39 | 
40 | export default SuccessIcon
41 | 


--------------------------------------------------------------------------------
/react/OrderSeller.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import { useRuntime } from 'vtex.render-runtime'
 4 | import { useCssHandles } from 'vtex.css-handles'
 5 | 
 6 | import { useOrder } from './components/OrderContext'
 7 | 
 8 | const CSS_HANDLES = ['orderSoldBy', 'orderSeller']
 9 | 
10 | const OrderSeller: FC = () => {
11 |   const runtime = useRuntime()
12 |   const order = useOrder()
13 |   const handles = useCssHandles(CSS_HANDLES)
14 | 
15 |   const storeAccount = runtime.account
16 |   const orderSeller = order.sellers[0].name
17 | 
18 |   if (storeAccount === orderSeller) {
19 |     return null
20 |   }
21 | 
22 |   return (
23 |     <small className={`${handles.orderSoldBy} c-muted-2 t-body lh-copy`}>
24 |       <FormattedMessage
25 |         id="store/order.header.seller"
26 |         values={{
27 |           seller: (
28 |             <span className={`${handles.orderSeller} c-action-primary`}>
29 |               {orderSeller}
30 |             </span>
31 |           ),
32 |         }}
33 |       />
34 |     </small>
35 |   )
36 | }
37 | 
38 | export default OrderSeller
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | labels: bug
 5 | ---
 6 | 
 7 | **Describe the bug**
 8 | A clear and concise description of what the bug is.
 9 | 
10 | **To Reproduce**
11 | Steps to reproduce the behavior:
12 | 
13 | 1. Go to '...'
14 | 2. Click on '....'
15 | 3. Scroll down to '....'
16 | 4. See error
17 | 
18 | **Expected behavior**
19 | A clear and concise description of what you expected to happen.
20 | 
21 | **Screenshots**
22 | If applicable, add screenshots to help explain your problem.
23 | 
24 | **Desktop environment:**
25 | 
26 | <!--
27 | Please paste the ouput of the following command in your issue. It helps us identify your environment and act more quickly to solve your problem.
28 | 
29 | $ npx envinfo --system --binaries --browsers
30 | 
31 | If the problem happens in a specific browser, please state which browser.
32 | --->
33 | 
34 | **Smartphone environment:**
35 | 
36 | - Device: [e.g. iPhone6]
37 | - OS: [e.g. iOS8.1]
38 | - Browser [e.g. stock browser, safari]
39 | - Version [e.g. 22]
40 | 
41 | **Additional context**
42 | Add any other context about the problem here.
43 | 


--------------------------------------------------------------------------------
/react/__mocks__/vtex.styleguide.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | export const Button: FC<{ href?: string }> = (props) => {
 4 |   if (props.href)
 5 |     return (
 6 |       <a href={props.href}>
 7 |         <button>{props.children}</button>
 8 |       </a>
 9 |     )
10 |   return <button>{props.children}</button>
11 | }
12 | 
13 | export const ButtonWithIcon: FC = (props) => {
14 |   return <Button {...props}>{props.children}</Button>
15 | }
16 | 
17 | export const IconCaretDown: FC = () => {
18 |   return <div data-testid="icon-caret-down">IconCaretDown</div>
19 | }
20 | 
21 | export const IconCaretUp: FC = () => {
22 |   return <div data-testid="icon-caret-up">IconCaretUp</div>
23 | }
24 | 
25 | export const PageBlock: FC = () => {
26 |   return <div data-testid="summary">PageBlock</div>
27 | }
28 | 
29 | export const Alert: FC = (props) => {
30 |   return <div data-testid="alert">{props.children}</div>
31 | }
32 | 
33 | export const Tooltip: FC = (props) => {
34 |   return <div data-testid="tooltip">{props.children}</div>
35 | }
36 | 
37 | export const IconInfo: FC = (props) => {
38 |   return <div data-testid="icon-info">{props.children}</div>
39 | }
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "order-placed",
 3 |   "private": true,
 4 |   "license": "UNLICENSED",
 5 |   "scripts": {
 6 |     "lint": "eslint --ext js,jsx,ts,tsx .",
 7 |     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
 8 |     "test": "yarn --cwd react test",
 9 |     "locales:lint": "intl-equalizer",
10 |     "locales:fix": "intl-equalizer --fix",
11 |     "verify": "yarn lint && yarn locales:lint && yarn test"
12 |   },
13 |   "husky": {
14 |     "hooks": {
15 |       "pre-commit": "lint-staged && yarn locales:lint && yarn locales:fix"
16 |     }
17 |   },
18 |   "lint-staged": {
19 |     "*.{ts,js,tsx,jsx}": [
20 |       "eslint --fix",
21 |       "prettier --write"
22 |     ],
23 |     "*.{json,graphql,gql}": [
24 |       "prettier --write"
25 |     ]
26 |   },
27 |   "devDependencies": {
28 |     "@types/node": "^14.0.13",
29 |     "@vtex/intl-equalizer": "^2.4.2",
30 |     "@vtex/prettier-config": "^0.3.1",
31 |     "eslint": "^7.3.0",
32 |     "eslint-config-vtex": "^12.5.1",
33 |     "eslint-config-vtex-react": "^6.5.1",
34 |     "husky": "^4.2.5",
35 |     "lint-staged": "^10.2.11",
36 |     "prettier": "^2.0.5",
37 |     "typescript": "^3.9.5"
38 |   },
39 |   "version": "1.3.0"
40 | }
41 | 


--------------------------------------------------------------------------------
/react/Section.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 3 | import { useResponsiveValues } from 'vtex.responsive-values'
 4 | 
 5 | interface Props {
 6 |   borderless?: MaybeResponsiveInput<boolean>
 7 |   marginBottom?: MaybeResponsiveInput<number>
 8 |   paddingBottom?: MaybeResponsiveInput<number>
 9 |   width?: MaybeResponsiveInput<string>
10 |   name: string
11 | }
12 | 
13 | const CSS_HANDLES = ['section']
14 | 
15 | const Section: FC<Props> = ({ children, name, ...layoutProps }) => {
16 |   const handles = useCssHandles(CSS_HANDLES)
17 | 
18 |   const {
19 |     borderless,
20 |     width,
21 |     marginBottom,
22 |     paddingBottom,
23 |   } = useResponsiveValues(layoutProps)
24 | 
25 |   const classes = [
26 |     'center',
27 |     applyModifiers(handles.section, name),
28 |     marginBottom && `mb${marginBottom}`,
29 |     paddingBottom && `pb${paddingBottom}`,
30 |     !borderless && 'bb b--muted-4',
31 |   ]
32 |     .filter(Boolean)
33 |     .join(' ')
34 | 
35 |   return (
36 |     <section data-testid={name} className={classes} style={{ width }}>
37 |       {children}
38 |     </section>
39 |   )
40 | }
41 | 
42 | export default Section
43 | 


--------------------------------------------------------------------------------
/react/SummarySection.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { useCssHandles } from 'vtex.css-handles'
 3 | 
 4 | import { useOrderGroup } from './components/OrderGroupContext'
 5 | import DeliverySummary from './components/DeliverySummary'
 6 | import PickupSummary from './components/PickupSummary'
 7 | import Section from './Section'
 8 | 
 9 | const CSS_HANDLES = ['summaryRow', 'summaryCol']
10 | 
11 | const SummarySection: FC = () => {
12 |   const handles = useCssHandles(CSS_HANDLES)
13 |   const { totalDeliveryParcels, totalPickUpParcels } = useOrderGroup()
14 | 
15 |   if (totalPickUpParcels.length === 0 || totalDeliveryParcels.length === 0) {
16 |     return null
17 |   }
18 | 
19 |   return (
20 |     <Section
21 |       name="summary"
22 |       marginBottom={9}
23 |       paddingBottom={9}
24 |       width={{ mobile: '90%', desktop: '80%' }}
25 |     >
26 |       <div className={`${handles.summaryRow} flex-ns`}>
27 |         <div className={`${handles.summaryCol} w-100 mr4-ns mb4 mb0-ns`}>
28 |           <DeliverySummary />
29 |         </div>
30 |         <div className={`${handles.summaryCol} w-100`}>
31 |           <PickupSummary />
32 |         </div>
33 |       </div>
34 |     </Section>
35 |   )
36 | }
37 | 
38 | export default SummarySection
39 | 


--------------------------------------------------------------------------------
/.all-contributorsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "projectName": "order-placed",
 3 |   "projectOwner": "vtex-apps",
 4 |   "repoType": "github",
 5 |   "repoHost": "https://github.com",
 6 |   "files": [
 7 |     "docs/README.md"
 8 |   ],
 9 |   "imageSize": 100,
10 |   "commit": true,
11 |   "commitConvention": "none",
12 |   "contributors": [
13 |     {
14 |       "login": "gustavopvasconcellos",
15 |       "name": "gustavopvasconcellos",
16 |       "avatar_url": "https://avatars1.githubusercontent.com/u/49173685?v=4",
17 |       "profile": "https://github.com/gustavopvasconcellos",
18 |       "contributions": [
19 |         "code"
20 |       ]
21 |     },
22 |     {
23 |       "login": "razvanudream",
24 |       "name": "razvanudream",
25 |       "avatar_url": "https://avatars.githubusercontent.com/u/71461884?v=4",
26 |       "profile": "https://razvanudrea.com",
27 |       "contributions": [
28 |         "code"
29 |       ]
30 |     },
31 |     {
32 |       "login": "claudiu-iviteb",
33 |       "name": "Claudiu Ionita",
34 |       "avatar_url": "https://avatars.githubusercontent.com/u/73105476?v=4",
35 |       "profile": "https://github.com/claudiu-iviteb",
36 |       "contributions": [
37 |         "code"
38 |       ]
39 |     }
40 |   ],
41 |   "contributorsPerLine": 7,
42 |   "skipCi": true
43 | }
44 | 


--------------------------------------------------------------------------------
/react/Icons/NotFound.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | const NotFound: FC = () => (
 4 |   <svg
 5 |     width="72"
 6 |     height="60"
 7 |     viewBox="0 0 72 60"
 8 |     fill="none"
 9 |     xmlns="http://www.w3.org/2000/svg"
10 |   >
11 |     <rect width="72" height="60" rx="4" fill="#F71963" />
12 |     <path
13 |       d="M6 15H66V50C66 52.2091 64.2091 54 62 54H10C7.79086 54 6 52.2091 6 50V15Z"
14 |       fill="white"
15 |     />
16 |     <circle cx="35.5" cy="32.5" r="9" stroke="#142032" strokeWidth="3" />
17 |     <path
18 |       d="M33 30L37.9497 34.9497"
19 |       stroke="#142032"
20 |       strokeWidth="3"
21 |       strokeLinecap="round"
22 |       strokeLinejoin="round"
23 |     />
24 |     <path
25 |       d="M43 40L46.8995 43.8995"
26 |       stroke="#142032"
27 |       strokeWidth="3"
28 |       strokeLinecap="round"
29 |       strokeLinejoin="round"
30 |     />
31 |     <path
32 |       d="M33 35L37.9497 30.0503"
33 |       stroke="#142032"
34 |       strokeWidth="3"
35 |       strokeLinecap="round"
36 |       strokeLinejoin="round"
37 |     />
38 |     <circle cx="24.5" cy="7.5" r="2.5" fill="#FFE6E6" />
39 |     <circle cx="16.5" cy="7.5" r="2.5" fill="#FFE6E6" />
40 |     <circle cx="8.5" cy="7.5" r="2.5" fill="#FFE6E6" />
41 |   </svg>
42 | )
43 | 
44 | export default NotFound
45 | 


--------------------------------------------------------------------------------
/react/PickupPackages.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, Fragment } from 'react'
 2 | import { applyModifiers, useCssHandles } from 'vtex.css-handles'
 3 | 
 4 | import { useOrder } from './components/OrderContext'
 5 | import ProductList from './components/ProductList'
 6 | import StorePickUpHeader from './components/PickUpHeader'
 7 | 
 8 | const CSS_HANDLES = ['package', 'packageHeaderColumn']
 9 | 
10 | const PickupPackages: FC = () => {
11 |   const handles = useCssHandles(CSS_HANDLES)
12 |   const { pickUpParcels } = useOrder()
13 | 
14 |   if (pickUpParcels.length === 0) {
15 |     return null
16 |   }
17 | 
18 |   return (
19 |     <Fragment>
20 |       {pickUpParcels.map((pickup: Parcel, index: number) => (
21 |         <div
22 |           className={`${applyModifiers(
23 |             handles.package,
24 |             'pickup'
25 |           )} mv8 flex-l justify-between flex-column flex-row-m`}
26 |           key={index}
27 |         >
28 |           <div className={handles.packageHeaderColumn}>
29 |             <StorePickUpHeader
30 |               shippingData={pickup}
31 |               index={index}
32 |               numPackages={pickUpParcels.length}
33 |             />
34 |           </div>
35 |           <ProductList products={pickup.items} />
36 |         </div>
37 |       ))}
38 |     </Fragment>
39 |   )
40 | }
41 | 
42 | export default PickupPackages
43 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "vendor": "vtex",
 3 |   "name": "order-placed",
 4 |   "version": "2.19.0",
 5 |   "title": "Order Placed",
 6 |   "description": "",
 7 |   "registries": [
 8 |     "smartcheckout"
 9 |   ],
10 |   "scripts": {
11 |     "postreleasy": "vtex publish --public"
12 |   },
13 |   "builders": {
14 |     "react": "3.x",
15 |     "store": "0.x",
16 |     "messages": "1.x",
17 |     "docs": "0.x"
18 |   },
19 |   "dependencies": {
20 |     "vtex.order-placed-graphql": "1.x",
21 |     "vtex.styleguide": "9.x",
22 |     "vtex.order-details": "1.x",
23 |     "vtex.shipping-estimate-translator": "2.x",
24 |     "vtex.address-form": "4.x",
25 |     "vtex.profile-form": "3.x",
26 |     "vtex.pixel-manager": "1.x",
27 |     "vtex.pwa-components": "0.x",
28 |     "vtex.store-resources": "0.x",
29 |     "vtex.totalizer-translator": "2.x",
30 |     "vtex.flex-layout": "0.x",
31 |     "vtex.responsive-layout": "0.x",
32 |     "vtex.css-handles": "0.x",
33 |     "vtex.responsive-values": "0.x"
34 |   },
35 |   "credentialType": "absolute",
36 |   "policies": [
37 |     {
38 |       "name": "outbound-access",
39 |       "attrs": {
40 |         "host": "{{account}}.vtexcommercestable.com.br",
41 |         "path": "/api/checkout/pub/orders/*"
42 |       }
43 |     }
44 |   ],
45 |   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
46 | }
47 | 


--------------------------------------------------------------------------------
/react/DeliveryPackages.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, Fragment } from 'react'
 2 | import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 3 | 
 4 | import ProductList from './components/ProductList'
 5 | import DeliveryHeader from './components/DeliveryHeader'
 6 | import { useOrder } from './components/OrderContext'
 7 | 
 8 | const CSS_HANDLES = ['package', 'packageHeaderColumn']
 9 | 
10 | const DeliveryPackages: FC = () => {
11 |   const handles = useCssHandles(CSS_HANDLES)
12 |   const { deliveryParcels, giftRegistryData } = useOrder()
13 | 
14 |   if (deliveryParcels.length === 0) {
15 |     return null
16 |   }
17 | 
18 |   return (
19 |     <Fragment>
20 |       {deliveryParcels.map((deliveryParcel, index) => (
21 |         <div
22 |           className={`${applyModifiers(
23 |             handles.package,
24 |             'delivery'
25 |           )} mv8 flex-l justify-between flex-column flex-row-m`}
26 |           key={index}
27 |         >
28 |           <div className={handles.packageHeaderColumn}>
29 |             <DeliveryHeader
30 |               shippingData={deliveryParcel}
31 |               index={index}
32 |               numPackages={deliveryParcels.length}
33 |               giftRegistry={giftRegistryData}
34 |             />
35 |           </div>
36 |           <ProductList products={deliveryParcel.items} />
37 |         </div>
38 |       ))}
39 |     </Fragment>
40 |   )
41 | }
42 | export default DeliveryPackages
43 | 


--------------------------------------------------------------------------------
/react/Skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './styles.global.css'
 3 | 
 4 | const Skeleton = () => {
 5 |   const baseSkeletonPiece = 'pa3 br2 relative overflow-hidden'
 6 |   return (
 7 |     <div className="w-90 mw8 center pv10 flex flex-column justify-between items-center">
 8 |       <div
 9 |         className={`${baseSkeletonPiece} bg-muted-5 mv3 w-30 mv7`}
10 |         style={{ height: `${24}px` }}
11 |       >
12 |         <div className="skeleton-shimmer" />
13 |       </div>
14 |       <div
15 |         className={`${baseSkeletonPiece} bg-muted-5 mv2 w-75-m w-80 o-80`}
16 |         style={{ height: `${20}px` }}
17 |       >
18 |         <div className="skeleton-shimmer" />
19 |       </div>
20 |       <div
21 |         className={`${baseSkeletonPiece} bg-muted-5 mv2 w-60 o-60`}
22 |         style={{ height: `${20}px` }}
23 |       >
24 |         <div className="skeleton-shimmer" />
25 |       </div>
26 |       <div className="flex justify-center pv8 w-100">
27 |         <div
28 |           className={`${baseSkeletonPiece} bg-muted-5 mv3 w-30 w-20-m mr3 o-40`}
29 |           style={{ height: `${36}px` }}
30 |         >
31 |           <div className="skeleton-shimmer" />
32 |         </div>
33 |         <div
34 |           className={`${baseSkeletonPiece} bg-muted-5 mv3 w-30 w-20-m ml3 o-40`}
35 |           style={{ height: `${36}px` }}
36 |         >
37 |           <div className="skeleton-shimmer" />
38 |         </div>
39 |       </div>
40 |     </div>
41 |   )
42 | }
43 | 
44 | export default Skeleton
45 | 


--------------------------------------------------------------------------------
/react/__tests__/PickupItems.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { orderGroupQuery as onePickup } from '../mocks/onePickupSimple'
 4 | import { orderGroupQuery as twoPickups } from '../mocks/twoPickups'
 5 | import { renderWithOrder } from '../utils/testUtils'
 6 | import PickupPackages from '../PickupPackages'
 7 | 
 8 | test('should render StorePickUpHeader with shipping estimate and receiver info', () => {
 9 |   const { getByText } = renderWithOrder(
10 |     onePickup.orderGroup,
11 |     <PickupPackages />
12 |   )
13 | 
14 |   expect(getByText('Pickup')).toBeDefined()
15 |   expect(getByText('TranslateEstimate')).toBeDefined()
16 |   expect(getByText('Victor Hugo')).toBeDefined()
17 |   expect(getByText('não entre de sunga não entre sem sunga')).toBeDefined()
18 | })
19 | 
20 | test('should render pickup counter when multiple store pickups', () => {
21 |   const { queryAllByText } = renderWithOrder(
22 |     twoPickups.orderGroup,
23 |     <PickupPackages />
24 |   )
25 | 
26 |   expect(queryAllByText(/- n˚ \d of \d/)).toHaveLength(2)
27 | })
28 | 
29 | test('should not pickup counter when there is only one store pickup', () => {
30 |   const { queryByText } = renderWithOrder(
31 |     onePickup.orderGroup,
32 |     <PickupPackages />
33 |   )
34 | 
35 |   expect(queryByText(/ - n˚ \d of \d/)).toBeNull()
36 | })
37 | 
38 | test('should render product list', () => {
39 |   const { queryAllByText } = renderWithOrder(
40 |     twoPickups.orderGroup,
41 |     <PickupPackages />
42 |   )
43 | 
44 |   expect(queryAllByText('Pickup múltiplas SLAs RJ Tipo 1')).toHaveLength(2)
45 | })
46 | 


--------------------------------------------------------------------------------
/react/components/PickupSummary.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import estimateCalculator from '@vtex/estimate-calculator'
 3 | import { FormattedMessage } from 'react-intl'
 4 | 
 5 | import { useOrderGroup } from './OrderGroupContext'
 6 | import SummaryBox from './SummaryBox'
 7 | 
 8 | const PickupSummary: FC = () => {
 9 |   const { totalPickUpParcels } = useOrderGroup()
10 | 
11 |   if (totalPickUpParcels.length === 0) {
12 |     return null
13 |   }
14 | 
15 |   const pickUpItemsQuantity = totalPickUpParcels.reduce(
16 |     (acc, pickupPackage) => acc + pickupPackage.items.length,
17 |     0
18 |   )
19 | 
20 |   const longestPickUpEstimate = estimateCalculator.getLatestSla(
21 |     totalPickUpParcels
22 |   )
23 | 
24 |   return (
25 |     <SummaryBox
26 |       type="pickup"
27 |       title={<FormattedMessage id="store/summary.pickup" />}
28 |       itemQuantity={
29 |         <FormattedMessage
30 |           id="store/summary.items"
31 |           values={{ itemsQuantity: pickUpItemsQuantity }}
32 |         />
33 |       }
34 |       parcelQuantity={
35 |         <FormattedMessage
36 |           id="store/summary.pickup.quantity"
37 |           values={{ pickups: totalPickUpParcels.length }}
38 |         />
39 |       }
40 |       shippingEstimate={longestPickUpEstimate.shippingEstimate}
41 |       shippingAddress={
42 |         <FormattedMessage
43 |           id="store/summary.pickup.friendlyName"
44 |           values={{
45 |             friendlyName: totalPickUpParcels[0].pickupFriendlyName,
46 |           }}
47 |         />
48 |       }
49 |     />
50 |   )
51 | }
52 | 
53 | export default PickupSummary
54 | 


--------------------------------------------------------------------------------
/react/components/ProductList/BundleItems.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, Fragment } from 'react'
 2 | import { ProductImage } from 'vtex.order-details'
 3 | 
 4 | import FormattedPrice from '../FormattedPrice'
 5 | import AttachmentAccordion from './AttachmentAccordion'
 6 | 
 7 | interface Props {
 8 |   product: OrderItem
 9 | }
10 | 
11 | const BundleItems: FC<Props> = ({ product }) => {
12 |   const { bundleItems } = product
13 | 
14 |   if (!bundleItems?.length) {
15 |     return null
16 |   }
17 | 
18 |   return (
19 |     <Fragment>
20 |       {bundleItems.map((bundleItem) => {
21 |         const isMessage = bundleItem?.attachments?.[0]?.name === 'message'
22 |         const content = isMessage
23 |           ? [bundleItem.attachments[0].content.text]
24 |           : ([] as string[]).concat(
25 |               ...bundleItem.attachments.map((attachmentItem) => {
26 |                 return Object.keys(attachmentItem.content).map(
27 |                   (key) => `${key}: ${attachmentItem.content[key]}`
28 |                 )
29 |               })
30 |             )
31 | 
32 |         return (
33 |           <AttachmentAccordion
34 |             key={bundleItem.id}
35 |             beforeTitleLabel={
36 |               bundleItem.imageUrl && (
37 |                 <ProductImage url={bundleItem.imageUrl} alt={bundleItem.name} />
38 |               )
39 |             }
40 |             titleLabel={bundleItem.name}
41 |             toggleLabel={<FormattedPrice value={bundleItem.price} />}
42 |             content={content}
43 |           />
44 |         )
45 |       })}
46 |     </Fragment>
47 |   )
48 | }
49 | 
50 | export default BundleItems
51 | 


--------------------------------------------------------------------------------
/react/components/DeliverySummary.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import estimateCalculator from '@vtex/estimate-calculator'
 3 | import { FormattedMessage } from 'react-intl'
 4 | 
 5 | import { useOrderGroup } from './OrderGroupContext'
 6 | import SummaryBox from './SummaryBox'
 7 | 
 8 | const DeliverySummary: FC = () => {
 9 |   const { totalDeliveryParcels } = useOrderGroup()
10 | 
11 |   if (totalDeliveryParcels.length === 0) {
12 |     return null
13 |   }
14 | 
15 |   const deliveryItemsQuantity = totalDeliveryParcels.reduce(
16 |     (acc, deliveryPackage) => acc + deliveryPackage.items.length,
17 |     0
18 |   )
19 | 
20 |   const longestDeliveryEstimate = estimateCalculator.getLatestSla(
21 |     totalDeliveryParcels
22 |   )
23 | 
24 |   return (
25 |     <SummaryBox
26 |       type="delivery"
27 |       title={<FormattedMessage id="store/summary.shipping" />}
28 |       itemQuantity={
29 |         <FormattedMessage
30 |           id="store/summary.items"
31 |           values={{ itemsQuantity: deliveryItemsQuantity }}
32 |         />
33 |       }
34 |       parcelQuantity={
35 |         <FormattedMessage
36 |           id="store/summary.shipping.quantity"
37 |           values={{ shippings: totalDeliveryParcels.length }}
38 |         />
39 |       }
40 |       shippingEstimate={longestDeliveryEstimate.shippingEstimate}
41 |       shippingAddress={
42 |         <FormattedMessage
43 |           id="store/summary.shipping.address"
44 |           values={{
45 |             addressNumber: totalDeliveryParcels[0].address.number,
46 |             addressStreet: totalDeliveryParcels[0].address.street,
47 |           }}
48 |         />
49 |       }
50 |     />
51 |   )
52 | }
53 | 
54 | export default DeliverySummary
55 | 


--------------------------------------------------------------------------------
/react/components/BankInvoice/Embedded.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, useState } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import { ButtonWithIcon, IconCaretDown, IconCaretUp } from 'vtex.styleguide'
 4 | import { useCssHandles } from 'vtex.css-handles'
 5 | 
 6 | interface Props {
 7 |   url: string
 8 | }
 9 | 
10 | const CSS_HANDLES = [
11 |   'bankInvoiceEmbedWrapper',
12 |   'bankInvoiceEmbedBackground',
13 |   'bankInvoiceEmbed',
14 | ]
15 | 
16 | const Embedded: FC<Props> = ({ url }) => {
17 |   const handles = useCssHandles(CSS_HANDLES)
18 |   const [isOpen, setIsOpen] = useState(false)
19 | 
20 |   const toggle = () => setIsOpen(!isOpen)
21 | 
22 |   return (
23 |     <div className={`${handles.bankInvoiceEmbedWrapper} b--muted-4 ba br3 bw1`}>
24 |       <div className={`${handles.bankInvoiceEmbedBackground} bg-muted-1`}>
25 |         <embed
26 |           width="80%"
27 |           height={isOpen ? 900 : 300}
28 |           src={url}
29 |           data-testid="embedded-bank-invoice"
30 |           className={`${handles.bankInvoiceEmbed} db center`}
31 |         />
32 |       </div>
33 |       {isOpen ? (
34 |         <ButtonWithIcon
35 |           icon={<IconCaretUp />}
36 |           variation="tertiary"
37 |           onClick={toggle}
38 |           block
39 |         >
40 |           <FormattedMessage id="store/header.bankinvoice.embeded.collapse" />
41 |         </ButtonWithIcon>
42 |       ) : (
43 |         <ButtonWithIcon
44 |           icon={<IconCaretDown />}
45 |           variation="tertiary"
46 |           onClick={toggle}
47 |           block
48 |         >
49 |           <FormattedMessage id="store/header.bankinvoice.embeded.expand" />
50 |         </ButtonWithIcon>
51 |       )}
52 |     </div>
53 |   )
54 | }
55 | 
56 | export default Embedded
57 | 


--------------------------------------------------------------------------------
/react/components/ProductList/Attachments.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, Fragment, ReactNode } from 'react'
 2 | import { FormattedMessage, useIntl } from 'react-intl'
 3 | 
 4 | import { isSubscription, getSubscriptionInfo } from '../../utils'
 5 | import AttachmentAccordion from './AttachmentAccordion'
 6 | 
 7 | interface Props {
 8 |   product: OrderItem
 9 | }
10 | 
11 | const ProductAttachment: FC<Props> = ({ product }) => {
12 |   const intl = useIntl()
13 |   const { attachments } = product
14 | 
15 |   if (!attachments?.length) {
16 |     return null
17 |   }
18 | 
19 |   return (
20 |     <Fragment>
21 |       {attachments.map((attachmentItem) => {
22 |         let content: string[]
23 |         let titleLabel: string | ReactNode
24 |         let toggleLabel: string | ReactNode
25 | 
26 |         if (isSubscription(attachmentItem)) {
27 |           const { subsFrequency, subsPurchaseDay } = getSubscriptionInfo(
28 |             attachmentItem,
29 |             intl
30 |           )
31 |           titleLabel = (
32 |             <FormattedMessage id="store/items.attachments.subscription" />
33 |           )
34 |           content = [subsFrequency, subsPurchaseDay]
35 |         } else {
36 |           titleLabel = attachmentItem.name
37 |           toggleLabel = <FormattedMessage id="store/order.totals.pickup.free" />
38 |           content = Object.keys(attachmentItem.content).map(
39 |             (key) => `${key}: ${attachmentItem.content[key]}`
40 |           )
41 |         }
42 | 
43 |         return (
44 |           <AttachmentAccordion
45 |             key={attachmentItem.name}
46 |             titleLabel={titleLabel}
47 |             toggleLabel={toggleLabel}
48 |             content={content}
49 |           />
50 |         )
51 |       })}
52 |     </Fragment>
53 |   )
54 | }
55 | 
56 | export default ProductAttachment
57 | 


--------------------------------------------------------------------------------
/react/components/SummaryBox.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, ReactNode } from 'react'
 2 | import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 3 | import { TranslateEstimate } from 'vtex.shipping-estimate-translator'
 4 | 
 5 | interface Props {
 6 |   type: 'pickup' | 'delivery'
 7 |   title: ReactNode
 8 |   itemQuantity: ReactNode
 9 |   parcelQuantity: ReactNode
10 |   shippingEstimate: unknown
11 |   shippingAddress: ReactNode
12 | }
13 | 
14 | const CSS_HANDLES = [
15 |   'summaryBox',
16 |   'summaryTitle',
17 |   'summaryContent',
18 |   'summaryItems',
19 |   'summaryShippingSLA',
20 |   'summaryAddress',
21 | ]
22 | 
23 | const SummaryBox: FC<Props> = ({
24 |   type,
25 |   title,
26 |   itemQuantity,
27 |   parcelQuantity,
28 |   shippingEstimate,
29 |   shippingAddress,
30 | }) => {
31 |   const handles = useCssHandles(CSS_HANDLES)
32 | 
33 |   return (
34 |     <div
35 |       data-testid={`summary-${type}`}
36 |       className={`${applyModifiers(
37 |         handles.summaryBox,
38 |         type
39 |       )} ba b--muted-5 bw1 br3`}
40 |     >
41 |       <h5
42 |         className={`${handles.summaryTitle} mv0 pv5 t-heading-5 tc bb b--muted-5 bw1 c-on-base`}
43 |       >
44 |         {title}
45 |       </h5>
46 |       <div className={`${handles.summaryContent} pa6 t-body`}>
47 |         <div className={`${handles.summaryItems} mb4`}>
48 |           <strong>{itemQuantity}</strong>
49 |           {parcelQuantity}
50 |         </div>
51 |         <div className={`${handles.summaryShippingSLA} t-heading-5 mb8`}>
52 |           <TranslateEstimate shippingEstimate={shippingEstimate} />
53 |         </div>
54 |         <div className={`${handles.summaryAddress} c-muted-2 lh-copy`}>
55 |           {shippingAddress}
56 |         </div>
57 |       </div>
58 |     </div>
59 |   )
60 | }
61 | 
62 | export default SummaryBox
63 | 


--------------------------------------------------------------------------------
/react/components/BankInvoice/BarCode.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import Clipboard from 'react-clipboard.js'
 3 | import { FormattedMessage } from 'react-intl'
 4 | import { Button } from 'vtex.styleguide'
 5 | import { useCssHandles } from 'vtex.css-handles'
 6 | 
 7 | import { getLoginUrl } from '../../utils'
 8 | 
 9 | interface Props {
10 |   barCodeNumber: string
11 | }
12 | 
13 | const CSS_HANDLES = [
14 |   'barCodeWrapper',
15 |   'barCodeNumber',
16 |   'barCodeCopyButtonWrapper',
17 | ]
18 | 
19 | const BarCode: FC<Props> = ({ barCodeNumber }) => {
20 |   const handles = useCssHandles(CSS_HANDLES)
21 |   const isEncrypted = barCodeNumber.includes('*')
22 | 
23 |   return (
24 |     <div
25 |       data-testid="bank-invoice-barcode"
26 |       className={`${handles.barCodeWrapper} flex-l b--muted-4 ba br3 bw1`}
27 |     >
28 |       <div
29 |         className={`${handles.barCodeNumber} tc ph7 ph9-m pv4 lh-copy c-on-base`}
30 |       >
31 |         {barCodeNumber}
32 |       </div>
33 |       {isEncrypted ? (
34 |         <div
35 |           className={`${handles.barCodeCopyButtonWrapper} b--muted-4 bl-l bt bt-0-l bw1 flex flex-row-l flex-column`}
36 |         >
37 |           <Button variation="tertiary" href={getLoginUrl()} target="_blank">
38 |             <FormattedMessage id="store/header.bankinvoice.copy" />
39 |           </Button>
40 |         </div>
41 |       ) : (
42 |         <Clipboard
43 |           component="div"
44 |           data-clipboard-text={barCodeNumber}
45 |           className={`${handles.barCodeCopyButtonWrapper} b--muted-4 bl-l bt bt-0-l bw1 flex flex-row-l flex-column`}
46 |         >
47 |           <Button variation="tertiary">
48 |             <FormattedMessage id="store/header.bankinvoice.copy" />
49 |           </Button>
50 |         </Clipboard>
51 |       )}
52 |     </div>
53 |   )
54 | }
55 | 
56 | export default BarCode
57 | 


--------------------------------------------------------------------------------
/react/ConfirmationMessage.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, useEffect, useState } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import { useCssHandles } from 'vtex.css-handles'
 4 | 
 5 | import { useOrderGroup } from './components/OrderGroupContext'
 6 | import { useSessionResponse } from './utils/useSessionResponse'
 7 | 
 8 | const CSS_HANDLES = ['confirmationMessage']
 9 | 
10 | interface Props {
11 |   enableGuestMessage: boolean
12 | }
13 | 
14 | const ConfirmationMessage: FC<Props> = ({
15 |   enableGuestMessage = false,
16 | }: Props) => {
17 |   const handles = useCssHandles(CSS_HANDLES)
18 |   const orderGroup = useOrderGroup()
19 |   const profile = orderGroup.orders[0].clientProfileData
20 |   const sessionResponse = useSessionResponse()
21 |   const [isLoggedIn, setIsLoggedIn] = useState(true)
22 | 
23 |   useEffect(() => {
24 |     setIsLoggedIn(!!sessionResponse?.namespaces?.profile?.email)
25 |   }, [sessionResponse, setIsLoggedIn])
26 | 
27 |   // by default "header.email" and "header.guest-email" texts are the same
28 |   // if the customer enables the guest message option, they will also need to change the guest text via GraphQL
29 | 
30 |   return (
31 |     <p
32 |       className={`${handles.confirmationMessage} mt5 t-body tc c-muted-1 lh-copy`}
33 |     >
34 |       {!isLoggedIn && enableGuestMessage ? (
35 |         <FormattedMessage
36 |           id="store/header.guest-email"
37 |           values={{
38 |             lineBreak: <br />,
39 |             userEmail: <strong className="nowrap">{profile.email}</strong>,
40 |           }}
41 |         />
42 |       ) : (
43 |         <FormattedMessage
44 |           id="store/header.email"
45 |           values={{
46 |             lineBreak: <br />,
47 |             userEmail: <strong className="nowrap">{profile.email}</strong>,
48 |           }}
49 |         />
50 |       )}
51 |     </p>
52 |   )
53 | }
54 | export default ConfirmationMessage
55 | 


--------------------------------------------------------------------------------
/react/Icons/PickUpIcon.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | import { calcIconSize } from './utils'
 4 | 
 5 | const iconBase = {
 6 |   height: 24,
 7 |   width: 26,
 8 | }
 9 | 
10 | const PickUpIcon: FC<IconProps> = ({ color = 'currentColor', size = 26 }) => {
11 |   const newSize = calcIconSize(iconBase, size)
12 | 
13 |   return (
14 |     <svg
15 |       width={newSize.width}
16 |       height={newSize.height}
17 |       viewBox="0 0 26 24"
18 |       fill="none"
19 |       xmlns="http://www.w3.org/2000/svg"
20 |     >
21 |       <path
22 |         d="M21.6575 4.79333H4.17969"
23 |         stroke={color}
24 |         strokeWidth="2"
25 |         strokeMiterlimit="10"
26 |         strokeLinecap="square"
27 |       />
28 |       <path
29 |         d="M10.9273 14.276H6.95508V18.0691H10.9273V14.276Z"
30 |         stroke={color}
31 |         strokeWidth="2"
32 |         strokeMiterlimit="10"
33 |         strokeLinecap="square"
34 |       />
35 |       <path
36 |         d="M3.38672 13.5171V22.9999H14.5089V16.1723H19.2756V22.9999H22.4534V13.5171"
37 |         stroke={color}
38 |         strokeWidth="2"
39 |         strokeMiterlimit="10"
40 |         strokeLinecap="square"
41 |       />
42 |       <path
43 |         d="M21.6556 4.79314V1H4.17778V4.79314L1 8.58627C1 10.0527 2.24489 11.2415 3.78056 11.2415C4.66795 11.2415 5.45604 10.8432 5.96528 10.2253C6.47452 10.8432 7.26261 11.2415 8.15 11.2415C9.16331 11.2415 10.0475 10.7222 10.5333 9.94877C11.0191 10.7222 11.9034 11.2415 12.9167 11.2415C13.93 11.2415 14.8142 10.7222 15.3 9.94877C15.7858 10.7222 16.67 11.2415 17.6833 11.2415C18.5707 11.2415 19.3588 10.8432 19.8681 10.2253C20.3773 10.8432 21.1654 11.2415 22.0528 11.2415C23.5884 11.2415 24.8333 10.0527 24.8333 8.58627L21.6556 4.79314Z"
44 |         stroke={color}
45 |         strokeWidth="2"
46 |         strokeMiterlimit="10"
47 |         strokeLinecap="square"
48 |       />
49 |     </svg>
50 |   )
51 | }
52 | 
53 | export default PickUpIcon
54 | 


--------------------------------------------------------------------------------
/react/utils/testUtils.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from 'react'
 2 | import { render, queryByText } from '@vtex/test-tools/react'
 3 | import { IntlProvider } from 'react-intl'
 4 | 
 5 | import * as defaultStrings from '../../messages/en.json'
 6 | import { OrderGroupContext } from '../components/OrderGroupContext'
 7 | import { OrderContext } from '../components/OrderContext'
 8 | import { CurrencyContext } from '../components/CurrencyContext'
 9 | 
10 | const doesNodeMatchesText = (node: HTMLElement, regexp: RegExp) =>
11 |   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
12 |   !!node.textContent!.match(regexp)
13 | 
14 | export const queryByTextWithMarkup = (container: HTMLElement, regexp: RegExp) =>
15 |   queryByText(container, (_: string, node: HTMLElement) => {
16 |     const childrenDontHaveText = Array.from(node.children).every(
17 |       (child) => !doesNodeMatchesText(child as HTMLElement, regexp)
18 |     )
19 |     return doesNodeMatchesText(node, regexp) && childrenDontHaveText
20 |   })
21 | 
22 | export const renderWithIntl = (component: ReactElement, options?: any) => {
23 |   return render(
24 |     <IntlProvider locale="en-US" messages={defaultStrings}>
25 |       {component}
26 |     </IntlProvider>,
27 |     options
28 |   )
29 | }
30 | 
31 | export const renderWithOrderGroup = (
32 |   orderGroup: OrderGroup,
33 |   component: ReactElement,
34 |   options?: any
35 | ) => {
36 |   return renderWithIntl(
37 |     <CurrencyContext.Provider value="BRL">
38 |       <OrderGroupContext.Provider value={orderGroup}>
39 |         {component}
40 |       </OrderGroupContext.Provider>
41 |     </CurrencyContext.Provider>,
42 |     options
43 |   )
44 | }
45 | 
46 | export const renderWithOrder = (
47 |   orderGroup: OrderGroup,
48 |   component: ReactElement,
49 |   options?: any
50 | ) => {
51 |   return renderWithOrderGroup(
52 |     orderGroup,
53 |     <OrderContext.Provider value={orderGroup.orders[0]}>
54 |       {component}
55 |     </OrderContext.Provider>,
56 |     options
57 |   )
58 | }
59 | 


--------------------------------------------------------------------------------
/react/__tests__/DeliveryItems.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { orderGroupQuery as giftRegistry } from '../mocks/giftRegistry'
 4 | import { orderGroupQuery as oneDelivery } from '../mocks/oneDeliverySimple'
 5 | import { orderGroupQuery as twoDeliveries } from '../mocks/twoDeliveries'
 6 | import DeliveryPackages from '../DeliveryPackages'
 7 | import { renderWithOrder } from '../utils/testUtils'
 8 | 
 9 | test('renders ShippingHeader with shipping estimate', () => {
10 |   const { getByText } = renderWithOrder(
11 |     oneDelivery.orderGroup,
12 |     <DeliveryPackages />
13 |   )
14 | 
15 |   expect(getByText('Delivery')).toBeDefined()
16 |   expect(getByText('TranslateEstimate')).toBeDefined()
17 | })
18 | 
19 | test('renders delivery counter when multiple deliveries', () => {
20 |   const { queryAllByText } = renderWithOrder(
21 |     twoDeliveries.orderGroup,
22 |     <DeliveryPackages />
23 |   )
24 | 
25 |   expect(queryAllByText(/- n˚ \d of \d/)).toHaveLength(2)
26 | })
27 | 
28 | test("doesn't render delivery counter when there is only one delivery", () => {
29 |   const { queryByText } = renderWithOrder(
30 |     oneDelivery.orderGroup,
31 |     <DeliveryPackages />
32 |   )
33 | 
34 |   expect(queryByText(/- n˚ \d of \d/)).toBeNull()
35 | })
36 | 
37 | test('renders product list', () => {
38 |   const { getByText } = renderWithOrder(
39 |     twoDeliveries.orderGroup,
40 |     <DeliveryPackages />
41 |   )
42 | 
43 |   expect(
44 |     getByText('Delivery entrega agendada e Delivery com várias SLAs Tipo 1')
45 |   ).toBeDefined()
46 |   expect(getByText('Camisa Seleção Brasileira')).toBeDefined()
47 |   expect(getByText('Camisa America Vermelha')).toBeDefined()
48 | })
49 | 
50 | test('renders correct messsage when order is from a Gift Registry and not render address component', () => {
51 |   const { queryByText, queryByTestId } = renderWithOrder(
52 |     giftRegistry.orderGroup,
53 |     <DeliveryPackages />
54 |   )
55 | 
56 |   expect(queryByText('Address from: Lista Lucas QA')).toBeDefined()
57 |   expect(queryByTestId('address-component')).toBeNull()
58 | })
59 | 


--------------------------------------------------------------------------------
/react/__tests__/OrderPlaced.test.tsx:
--------------------------------------------------------------------------------
 1 | import { wait } from '@vtex/test-tools/react'
 2 | import React from 'react'
 3 | 
 4 | import GET_ORDER_GROUP from '../graphql/getOrderGroup.graphql'
 5 | import OrderPlaced from '../index'
 6 | import requestNotFound from './fixtures/graphql/not-found.json'
 7 | import requestForbidden from './fixtures/graphql/forbidden.json'
 8 | import { renderWithIntl } from '../utils/testUtils'
 9 | 
10 | const orderGroupId = '123123123'
11 | 
12 | const requestSample = {
13 |   request: {
14 |     query: GET_ORDER_GROUP,
15 |     name: 'orderGroupQuery',
16 |     variables: { orderGroup: orderGroupId },
17 |   },
18 | }
19 | 
20 | const { location } = window
21 | 
22 | beforeAll(() => {
23 |   delete window.location
24 |   window.location = { search: `?og=${orderGroupId}` } as Location
25 | })
26 | 
27 | afterAll(() => {
28 |   window.location = location
29 | })
30 | 
31 | beforeEach(() => jest.useFakeTimers())
32 | 
33 | test('should first render as as skeleton loading', async () => {
34 |   const { container } = renderWithIntl(<OrderPlaced />)
35 | 
36 |   expect(container.querySelector('.skeleton-shimmer')).toBeTruthy()
37 | 
38 |   await wait(() => jest.runAllTimers())
39 | 
40 |   expect(container.querySelector('.skeleton-shimmer')).toBeNull()
41 | })
42 | 
43 | test('should render an alert for users not logged in', async () => {
44 |   const { queryAllByText } = renderWithIntl(<OrderPlaced />, {
45 |     graphql: {
46 |       mocks: [
47 |         {
48 |           ...requestSample,
49 |           result: requestForbidden,
50 |         },
51 |       ],
52 |     },
53 |   })
54 | 
55 |   await wait(() => jest.runAllTimers())
56 | 
57 |   expect(queryAllByText(/permission/)).toBeTruthy()
58 | })
59 | 
60 | test('should render an alert for invalid orders', async () => {
61 |   const { queryByText } = renderWithIntl(<OrderPlaced />, {
62 |     graphql: {
63 |       mocks: [
64 |         {
65 |           ...requestSample,
66 |           result: requestNotFound,
67 |         },
68 |       ],
69 |     },
70 |   })
71 | 
72 |   await wait(() => jest.runAllTimers())
73 | 
74 |   expect(queryByText(/not found/i)).toBeTruthy()
75 | })
76 | 


--------------------------------------------------------------------------------
/store/interfaces.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "order-placed": {
 3 |     "component": "index",
 4 |     "allowed": [
 5 |       "op-header",
 6 |       "op-order",
 7 |       "op-footer",
 8 |       "promotion-banner"
 9 |     ],
10 |     "render": "client"
11 |   },
12 |   "op-section": {
13 |     "component": "Section",
14 |     "composition": "children",
15 |     "allowed": "*"
16 |   },
17 |   "op-header": {
18 |     "component": "Header",
19 |     "composition": "children",
20 |     "allowed": "*"
21 |   },
22 |   "op-footer": {
23 |     "component": "Footer",
24 |     "composition": "children",
25 |     "allowed": "*"
26 |   },
27 |   "op-confirmation-icon": {
28 |     "component": "ConfirmationIcon"
29 |   },
30 |   "op-confirmation-title": {
31 |     "component": "ConfirmationTitle"
32 |   },
33 |   "op-confirmation-message": {
34 |     "component": "ConfirmationMessage"
35 |   },
36 |   "op-print-button": {
37 |     "component": "PrintButton"
38 |   },
39 |   "op-notices": {
40 |     "component": "Notices"
41 |   },
42 |   "op-summary-section": {
43 |     "component": "SummarySection"
44 |   },
45 |   "op-bank-invoice-section": {
46 |     "component": "BankInvoiceSection"
47 |   },
48 |   "op-order": {
49 |     "component": "Order",
50 |     "composition": "children",
51 |     "allowed": "*"
52 |   },
53 |   "op-order-number": {
54 |     "component": "OrderNumber"
55 |   },
56 |   "op-order-datetime": {
57 |     "component": "OrderDatetime"
58 |   },
59 |   "op-order-seller": {
60 |     "component": "OrderSeller"
61 |   },
62 |   "op-order-split-notice": {
63 |     "component": "OrderSplitNotice"
64 |   },
65 |   "op-order-customer": {
66 |     "component": "OrderCustomerInfo"
67 |   },
68 |   "op-order-options": {
69 |     "component": "OrderOptions"
70 |   },
71 |   "op-order-payment": {
72 |     "component": "OrderPayment"
73 |   },
74 |   "op-order-pickup-packages": {
75 |     "component": "PickupPackages"
76 |   },
77 |   "op-order-delivery-packages": {
78 |     "component": "DeliveryPackages"
79 |   },
80 |   "op-order-takeaway-packages": {
81 |     "component": "TakeAwayPackages"
82 |   },
83 |   "op-order-total": {
84 |     "component": "OrderTotal"
85 |   }
86 | }


--------------------------------------------------------------------------------
/.github/workflows/pull-request.yml:
--------------------------------------------------------------------------------
 1 | name: PR actions
 2 | 'on':
 3 |   pull_request:
 4 |     branches:
 5 |       - master
 6 | jobs:
 7 |   danger-ci:
 8 |     name: Danger CI
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@master
12 |       - uses: actions/setup-node@master
13 |         with:
14 |           node-version: 12.x
15 |         env:
16 |           RUNNER_TEMP: /tmp
17 |       - name: Danger CI
18 |         uses: vtex/danger@master
19 |         env:
20 |           GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
21 |           REQUIRE_CHANGELOG_VERSION: false
22 |   io-app-test:
23 |     name: IO app test
24 |     runs-on: ubuntu-latest
25 |     steps:
26 |       - uses: actions/checkout@master
27 |       - uses: actions/setup-node@master
28 |         with:
29 |           node-version: 12.x
30 |         env:
31 |           RUNNER_TEMP: /tmp
32 |       - name: Get yarn cache directory path
33 |         id: yarn-cache-dir-path
34 |         run: 'echo "::set-output name=dir::$(yarn cache dir)"'
35 |       - uses: actions/cache@v4
36 |         id: yarn-cache
37 |         with:
38 |           path: '${{ steps.yarn-cache-dir-path.outputs.dir }}'
39 |           key: '${{ runner.os }}-yarn-${{ hashFiles(''**/yarn.lock'') }}'
40 |           restore-keys: |
41 |             ${{ runner.os }}-yarn-
42 |       - name: Run test on every builder directory
43 |         uses: vtex/action-io-app-test@master
44 |   lint:
45 |     name: Lint
46 |     runs-on: ubuntu-latest
47 |     steps:
48 |       - uses: actions/checkout@master
49 |       - uses: actions/setup-node@master
50 |         with:
51 |           node-version: 12.x
52 |         env:
53 |           RUNNER_TEMP: /tmp
54 |       - name: Get yarn cache directory path
55 |         id: yarn-cache-dir-path
56 |         run: 'echo "::set-output name=dir::$(yarn cache dir)"'
57 |       - uses: actions/cache@v4
58 |         id: yarn-cache
59 |         with:
60 |           path: '${{ steps.yarn-cache-dir-path.outputs.dir }}'
61 |           key: '${{ runner.os }}-yarn-${{ hashFiles(''**/yarn.lock'') }}'
62 |           restore-keys: |
63 |             ${{ runner.os }}-yarn-
64 |       - name: Lint project
65 |         uses: vtex/action-lint@master


--------------------------------------------------------------------------------
/react/Icons/DeliveryIcon.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | 
 3 | import { calcIconSize } from './utils'
 4 | 
 5 | const iconBase = {
 6 |   height: 22,
 7 |   width: 30,
 8 | }
 9 | 
10 | export const DeliveryIcon: FC<IconProps> = ({
11 |   color = 'currentColor',
12 |   size = 30,
13 | }) => {
14 |   const newSize = calcIconSize(iconBase, size)
15 | 
16 |   return (
17 |     <svg
18 |       width={newSize.width}
19 |       height={newSize.height}
20 |       viewBox="0 0 30 22"
21 |       fill="none"
22 |       xmlns="http://www.w3.org/2000/svg"
23 |     >
24 |       <path
25 |         d="M18.7344 4.80957H26.2004L29.0001 12.4286V18.1428H25.2205"
26 |         stroke={color}
27 |         strokeWidth="2"
28 |         strokeMiterlimit="10"
29 |         strokeLinecap="square"
30 |       />
31 |       <path
32 |         d="M19.6624 18.1426H9.86328"
33 |         stroke={color}
34 |         strokeWidth="2"
35 |         strokeMiterlimit="10"
36 |         strokeLinecap="square"
37 |       />
38 |       <path
39 |         d="M4.26637 18.1428H1V1H18.7317V11.9523"
40 |         stroke={color}
41 |         strokeWidth="2"
42 |         strokeMiterlimit="10"
43 |         strokeLinecap="square"
44 |       />
45 |       <path
46 |         d="M21.9922 8.14258V11.4759H25.2586"
47 |         stroke={color}
48 |         strokeWidth="2"
49 |         strokeMiterlimit="10"
50 |         strokeLinecap="square"
51 |       />
52 |       <path
53 |         d="M7.06733 20.9999C8.61359 20.9999 9.86708 19.7207 9.86708 18.1428C9.86708 16.5648 8.61359 15.2856 7.06733 15.2856C5.52107 15.2856 4.26758 16.5648 4.26758 18.1428C4.26758 19.7207 5.52107 20.9999 7.06733 20.9999Z"
54 |         stroke={color}
55 |         strokeWidth="2"
56 |         strokeMiterlimit="10"
57 |         strokeLinecap="square"
58 |       />
59 |       <path
60 |         d="M22.4638 20.9999C24.0101 20.9999 25.2636 19.7207 25.2636 18.1428C25.2636 16.5648 24.0101 15.2856 22.4638 15.2856C20.9176 15.2856 19.6641 16.5648 19.6641 18.1428C19.6641 19.7207 20.9176 20.9999 22.4638 20.9999Z"
61 |         stroke={color}
62 |         strokeWidth="2"
63 |         strokeMiterlimit="10"
64 |         strokeLinecap="square"
65 |       />
66 |     </svg>
67 |   )
68 | }
69 | 
70 | export default DeliveryIcon
71 | 


--------------------------------------------------------------------------------
/react/components/ProductList/Product.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import { ProductImage } from 'vtex.order-details'
 4 | import { useCssHandles } from 'vtex.css-handles'
 5 | import { Link } from 'vtex.render-runtime'
 6 | 
 7 | import FormattedPrice from '../FormattedPrice'
 8 | 
 9 | interface Props {
10 |   product: OrderItem
11 | }
12 | 
13 | const CSS_HANDLES = [
14 |   'productWrapper',
15 |   'productImageColumn',
16 |   'productImageWrapper',
17 |   'productInfoColumn',
18 |   'productName',
19 |   'productMeasurementUnit',
20 |   'productQuantity',
21 |   'productPrice',
22 | ]
23 | 
24 | const Product: FC<Props> = ({ product }) => {
25 |   const {
26 |     detailUrl,
27 |     imageUrl,
28 |     measurementUnit,
29 |     name,
30 |     sellingPrice,
31 |     quantity,
32 |     unitMultiplier,
33 |     isGift,
34 |   } = product
35 |   const handles = useCssHandles(CSS_HANDLES)
36 |   const showMeasurementUnit = unitMultiplier !== 1 || measurementUnit !== 'un'
37 |   const productSubtotal = sellingPrice * quantity
38 | 
39 |   return (
40 |     <div className={`${handles.productWrapper} w-100 flex-m tc tl-m`}>
41 |       <div className={`${handles.productImageColumn} mr6-m mb6-s mb0-m`}>
42 |         <div className={`${handles.productImageWrapper} w4 h4 center`}>
43 |           <ProductImage url={imageUrl} alt={name} />
44 |         </div>
45 |       </div>
46 |       <div
47 |         className={`${handles.productInfoColumn} flex-m flex-column justify-between lh-copy`}
48 |       >
49 |         <Link
50 |           to={detailUrl}
51 |           className={`${handles.productName} t-body c-muted-1 no-underline`}
52 |           target="_blank"
53 |           rel="noopener noreferrer"
54 |         >
55 |           {name}
56 |           {showMeasurementUnit && (
57 |             <small
58 |               className={`${handles.productMeasurementUnit} db mt3 t-mini c-on-base`}
59 |             >
60 |               {`${unitMultiplier} ${measurementUnit}`}
61 |             </small>
62 |           )}
63 |         </Link>
64 |         <small
65 |           className={`${handles.productQuantity} t-mini c-muted-1 mt3 mt0-m`}
66 |         >
67 |           <FormattedMessage
68 |             id="store/products.quantity"
69 |             values={{ quantity }}
70 |           />
71 |         </small>
72 |       </div>
73 |       <div className={`${handles.productPrice} ml-auto mt3 mt0-m`}>
74 |         {isGift ? (
75 |           <FormattedMessage id="store/products.isGift" />
76 |         ) : (
77 |           <FormattedPrice value={productSubtotal} />
78 |         )}
79 |       </div>
80 |     </div>
81 |   )
82 | }
83 | 
84 | export default Product
85 | 


--------------------------------------------------------------------------------
/react/__tests__/Subscriptions.test.tsx:
--------------------------------------------------------------------------------
 1 | import { IntlProvider } from 'react-intl'
 2 | 
 3 | import * as defaultStrings from '../../messages/en.json'
 4 | import { getSubscriptionInfo } from '../utils'
 5 | 
 6 | const {
 7 |   state: { intl },
 8 | } = new IntlProvider(
 9 |   {
10 |     locale: 'en-US',
11 |     messages: defaultStrings,
12 |   },
13 |   {}
14 | )
15 | 
16 | const mockAttachmentItemNoSubscription = {
17 |   content: {
18 |     anything: false,
19 |     mock: true,
20 |   },
21 |   name: 'testing out',
22 | }
23 | 
24 | const mockItemSubscriptionNoPurchaseDay = {
25 |   name: 'vtex.subscription._plan1_',
26 |   content: {
27 |     'vtex.subscription.key.frequency': ' 1 week',
28 |     'vtex.subscription.key.purchaseday': '',
29 |     'vtex.subscription.key.validity.begin': '2019-02-13',
30 |     'vtex.subscription.key.validity.end': '2019-10-16',
31 |   },
32 | }
33 | 
34 | const mockItemSubscriptionComplete = {
35 |   name: 'vtex.subscription._plan1_',
36 |   content: {
37 |     'vtex.subscription.key.frequency': ' 1 week',
38 |     'vtex.subscription.key.purchaseday': '12',
39 |     'vtex.subscription.key.validity.begin': '2019-02-13',
40 |     'vtex.subscription.key.validity.end': '2019-10-16',
41 |   },
42 | }
43 | 
44 | describe('getSubscriptionInfo function tests', () => {
45 |   it('should return correct object for attachmentItem that is not a subscription', () => {
46 |     const {
47 |       subsFrequency,
48 |       subsPurchaseDay,
49 |       subsValidityBegin,
50 |       subsValidityEnd,
51 |     } = getSubscriptionInfo(mockAttachmentItemNoSubscription, intl)
52 | 
53 |     expect(subsFrequency).toBeUndefined()
54 |     expect(subsPurchaseDay).toBeUndefined()
55 |     expect(subsValidityBegin).toBeUndefined()
56 |     expect(subsValidityEnd).toBeUndefined()
57 |   })
58 | 
59 |   it('should return correct object for subscription with no purchaseDay', () => {
60 |     const {
61 |       subsFrequency,
62 |       subsPurchaseDay,
63 |       subsValidityBegin,
64 |       subsValidityEnd,
65 |     } = getSubscriptionInfo(mockItemSubscriptionNoPurchaseDay, intl)
66 | 
67 |     expect(subsFrequency).toBe('Every 1 week')
68 |     expect(subsPurchaseDay).toBeNull()
69 |     expect(subsValidityBegin).toBe('2019-02-13')
70 |     expect(subsValidityEnd).toBe('2019-10-16')
71 |   })
72 | 
73 |   it('should return correct object for a complete subscription attachment', () => {
74 |     const {
75 |       subsFrequency,
76 |       subsPurchaseDay,
77 |       subsValidityBegin,
78 |       subsValidityEnd,
79 |     } = getSubscriptionInfo(mockItemSubscriptionComplete, intl)
80 | 
81 |     expect(subsFrequency).toBe('Every 1 week')
82 |     expect(subsPurchaseDay).toBe('Charged monthly at day 12')
83 |     expect(subsValidityBegin).toBe('2019-02-13')
84 |     expect(subsValidityEnd).toBe('2019-10-16')
85 |   })
86 | })
87 | 


--------------------------------------------------------------------------------
/react/components/PickUpHeader.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, Fragment } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import { TranslateEstimate } from 'vtex.shipping-estimate-translator'
 4 | import { Address } from 'vtex.order-details'
 5 | import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 6 | 
 7 | interface Props {
 8 |   shippingData: Parcel
 9 |   index: number
10 |   numPackages: number
11 | }
12 | 
13 | const CSS_HANDLES = [
14 |   'packageHeader',
15 |   'packageShippingEstimate',
16 |   'packageInfoWrapper',
17 |   'packageAddressWrapper',
18 |   'packageReceiver',
19 |   'packageReceiverName',
20 |   'packageAdditionalInfo',
21 |   'packageAddressTitle',
22 | ] as const
23 | 
24 | const StorePickUpHeader: FC<Props> = ({ shippingData, index, numPackages }) => {
25 |   const handles = useCssHandles(CSS_HANDLES)
26 |   const multiplePickups = numPackages > 1
27 |   const { receiverName } = shippingData.address
28 |   const {
29 |     additionalInfo,
30 |     address,
31 |   } = shippingData.selectedSlaObj.pickupStoreInfo
32 | 
33 |   return (
34 |     <Fragment>
35 |       <div
36 |         className={`${applyModifiers(
37 |           handles.packageHeader,
38 |           'pickup'
39 |         )} t-heading-4-ns t-heading-5 mb5`}
40 |         data-testid="storepickup-header"
41 |       >
42 |         <FormattedMessage id="store/pickup.header.title" />
43 |         {multiplePickups && (
44 |           <FormattedMessage
45 |             id="store/common.header.counter"
46 |             values={{ index: index + 1, numPackages }}
47 |           />
48 |         )}
49 |         <br />
50 |         <small
51 |           className={`${handles.packageShippingEstimate} c-muted-2 t-small`}
52 |         >
53 |           <TranslateEstimate
54 |             shippingEstimate={shippingData.shippingEstimate}
55 |             scheduled={shippingData.deliveryWindow}
56 |             isPickup
57 |           />
58 |         </small>
59 |       </div>
60 | 
61 |       <div
62 |         className={`${handles.packageInfoWrapper} flex justify-left-m flex-column-s flex-column-l flex-row-m justify-between-l justify-start-l`}
63 |       >
64 |         <span className={`${handles.packageAddressTitle} dn`}>
65 |           <FormattedMessage id="store/shipping.header.address" />
66 |         </span>
67 |         <div className={`${handles.packageAddressWrapper} mb5 mr10-m`}>
68 |           <Address address={address} pickup={shippingData} />
69 |         </div>
70 |         <div className={`${handles.packageReceiver} c-on-base lh-copy`}>
71 |           <p className={`${handles.packageReceiverName}`}>{receiverName}</p>
72 |           <p className={`${handles.packageAdditionalInfo} c-muted-1`}>
73 |             {additionalInfo}
74 |           </p>
75 |         </div>
76 |       </div>
77 |     </Fragment>
78 |   )
79 | }
80 | 
81 | export default StorePickUpHeader
82 | 


--------------------------------------------------------------------------------
/react/OrderTotal.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import TranslateTotalizer from 'vtex.totalizer-translator/TranslateTotalizer'
 4 | import { applyModifiers, useCssHandles } from 'vtex.css-handles'
 5 | 
 6 | import FormattedPrice from './components/FormattedPrice'
 7 | import { useOrder } from './components/OrderContext'
 8 | import { getTotals } from './utils'
 9 | import TaxInfo from './TaxInfo'
10 | 
11 | const CSS_HANDLES = [
12 |   'totalListWrapper',
13 |   'totalList',
14 |   'totalListItem',
15 |   'totalListItemLabel',
16 |   'totalListItemValue',
17 | ] as const
18 | 
19 | const OrderTotal: FC = () => {
20 |   const { items, totals, value: totalValue } = useOrder()
21 |   const handles = useCssHandles(CSS_HANDLES)
22 |   const numItems = items.reduce((acc, item) => {
23 |     if (item.parentItemIndex === null) {
24 |       return acc + item.quantity
25 |     }
26 |     return acc
27 |   }, 0)
28 |   const [newTotals, taxes] = getTotals(totals)
29 | 
30 |   return (
31 |     <div className={`${handles.totalListWrapper} flex-l justify-end w-100`}>
32 |       <ul
33 |         className={`${handles.totalList} list pa0 mt8 w-100 w-60-l c-muted-1`}
34 |       >
35 |         {newTotals.map((total, i) => {
36 |           if (total.value === 0) {
37 |             return null
38 |           }
39 | 
40 |           return (
41 |             <li
42 |               className={`${applyModifiers(
43 |                 handles.totalListItem,
44 |                 total.id
45 |               )} pv3 flex justify-between items-center`}
46 |               key={`${total.id}_${i}`}
47 |             >
48 |               <span className={`${handles.totalListItemLabel} flex`}>
49 |                 <TranslateTotalizer totalizer={total} />
50 |                 {total.id === 'Items' && ` (${numItems})`}
51 |                 {total.id === 'Tax' && taxes.length > 0 && (
52 |                   <div className="ml2 mt1">
53 |                     <TaxInfo taxesTotals={taxes} />
54 |                   </div>
55 |                 )}
56 |               </span>
57 |               <span className={`${handles.totalListItemValue} c-on-base`}>
58 |                 <FormattedPrice value={total.value} />
59 |               </span>
60 |             </li>
61 |           )
62 |         })}
63 |         <li
64 |           className={`${handles.totalListItem} pv3 flex justify-between items-center c-on-base t-heading-2-ns t-heading-3`}
65 |         >
66 |           <strong className={`${handles.totalListItemLabel}`}>
67 |             <FormattedMessage id="store/order.totals.total" />
68 |           </strong>
69 |           <strong className={`${handles.totalListItemValue}`}>
70 |             <FormattedPrice value={totalValue} />
71 |           </strong>
72 |         </li>
73 |       </ul>
74 |     </div>
75 |   )
76 | }
77 | 
78 | export default OrderTotal
79 | 


--------------------------------------------------------------------------------
/react/__tests__/ProductList.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { orderGroupQuery as serviceWithAttachment } from '../mocks/bundleServiceWithAttachment'
 4 | import { orderGroupQuery as serviceWithNoAttachments } from '../mocks/bundleServiceWithNoAttachments'
 5 | import { orderGroupQuery as serviceAndAttachment } from '../mocks/serviceAndAttachment'
 6 | import { orderGroupQuery as subscription } from '../mocks/subscriptions'
 7 | import { orderWithGift } from '../mocks/orderWithGift'
 8 | import { renderWithOrderGroup, renderWithIntl } from '../utils/testUtils'
 9 | import ProductList from '../components/ProductList'
10 | 
11 | const getItemsFromOrderGroup = (
12 |   orderGroup: OrderGroup,
13 |   type: 'deliveryParcels' | 'pickUpParcels'
14 | ) => orderGroup.orders[0][type][0].items
15 | 
16 | test('renders Attachment component if product has service or attachment', () => {
17 |   const { queryByText } = renderWithOrderGroup(
18 |     serviceWithNoAttachments.orderGroup,
19 |     <ProductList
20 |       products={getItemsFromOrderGroup(
21 |         serviceWithNoAttachments.orderGroup,
22 |         'deliveryParcels'
23 |       )}
24 |     />
25 |   )
26 | 
27 |   expect(queryByText('[TESTE QA]')).toBeTruthy()
28 | })
29 | 
30 | test('renders attachment from bundleItems item', () => {
31 |   const { queryByText } = renderWithOrderGroup(
32 |     serviceWithAttachment.orderGroup,
33 |     <ProductList
34 |       products={getItemsFromOrderGroup(
35 |         serviceWithAttachment.orderGroup,
36 |         'deliveryParcels'
37 |       )}
38 |     />
39 |   )
40 | 
41 |   expect(queryByText('This is a mock message')).toBeTruthy()
42 | })
43 | 
44 | test('renders attachments from item and also bundle items', () => {
45 |   const { queryByText } = renderWithOrderGroup(
46 |     serviceAndAttachment.orderGroup,
47 |     <ProductList
48 |       products={getItemsFromOrderGroup(
49 |         serviceAndAttachment.orderGroup,
50 |         'deliveryParcels'
51 |       )}
52 |     />
53 |   )
54 | 
55 |   expect(queryByText('[TESTE QA]')).toBeTruthy()
56 |   expect(queryByText(/1\ssemana/)).toBeTruthy()
57 | })
58 | 
59 | test('renders correct information and messages for an item with a subscription', () => {
60 |   const { queryByText } = renderWithOrderGroup(
61 |     subscription.orderGroup,
62 |     <ProductList
63 |       products={getItemsFromOrderGroup(
64 |         subscription.orderGroup,
65 |         'deliveryParcels'
66 |       )}
67 |     />
68 |   )
69 | 
70 |   expect(queryByText('Subscription')).toBeTruthy()
71 |   expect(queryByText('Every 1 week')).toBeTruthy()
72 |   expect(queryByText('Charged monthly at day 15')).toBeTruthy()
73 | })
74 | 
75 | test('renders FREE instead of the price for all items that are gifts', async () => {
76 |   const { queryByText } = renderWithIntl(
77 |     <ProductList products={orderWithGift.products} />
78 |   )
79 | 
80 |   expect(queryByText('Free')).toBeTruthy()
81 | })
82 | 


--------------------------------------------------------------------------------
/react/components/DeliveryHeader.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, Fragment } from 'react'
 2 | import { FormattedMessage } from 'react-intl'
 3 | import { TranslateEstimate } from 'vtex.shipping-estimate-translator'
 4 | import { Address } from 'vtex.order-details'
 5 | import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 6 | 
 7 | interface Props {
 8 |   shippingData: Parcel
 9 |   index: number
10 |   numPackages: number
11 |   giftRegistry?: GiftRegistry | null
12 | }
13 | 
14 | const CSS_HANDLES = [
15 |   'packageHeader',
16 |   'packageShippingEstimate',
17 |   'packageSLA',
18 |   'packageGiftDescription',
19 |   'packageAddressWrapper',
20 |   'packageAddressTitle',
21 |   'packageDeliveryTitle',
22 | ] as const
23 | 
24 | const DeliveryHeader: FC<Props> = ({
25 |   shippingData,
26 |   index,
27 |   numPackages,
28 |   giftRegistry,
29 | }) => {
30 |   const handles = useCssHandles(CSS_HANDLES)
31 |   const multipleDeliveries = numPackages > 1
32 | 
33 |   return (
34 |     <Fragment>
35 |       <div
36 |         className={`${applyModifiers(
37 |           handles.packageHeader,
38 |           'delivery'
39 |         )} t-heading-4-ns t-heading-5 mb5`}
40 |         data-testid="shipping-header"
41 |       >
42 |         <span className={`${handles.packageDeliveryTitle}`}>
43 |           <FormattedMessage id="store/shipping.header.title" />
44 |           {multipleDeliveries && (
45 |             <FormattedMessage
46 |               id="store/common.header.counter"
47 |               values={{ index: index + 1, numPackages }}
48 |             />
49 |           )}
50 |         </span>
51 |         <br />
52 |         <small
53 |           className={`${handles.packageShippingEstimate} c-muted-2 t-small`}
54 |         >
55 |           <TranslateEstimate
56 |             shippingEstimate={shippingData.shippingEstimate}
57 |             scheduled={shippingData.deliveryWindow}
58 |           />
59 |         </small>
60 |         <br />
61 |         <small className={`${handles.packageSLA} c-muted-2 t-small`}>
62 |           {shippingData.selectedSla}
63 |         </small>
64 |       </div>
65 | 
66 |       {giftRegistry &&
67 |       giftRegistry.addressId === shippingData.address.addressId ? (
68 |         <div className={`${handles.packageGiftDescription} c-muted-1`}>
69 |           <span className={`${handles.packageAddressTitle} dn`}>
70 |             <FormattedMessage id="store/shipping.header.address" />
71 |           </span>
72 |           <FormattedMessage
73 |             id="store/shipping.header.wishlist.address"
74 |             values={{ giftRegistryName: giftRegistry.description }}
75 |           />
76 |         </div>
77 |       ) : (
78 |         <div className={`${handles.packageAddressWrapper} mb5 mr10-m`}>
79 |           <span className={`${handles.packageAddressTitle} dn`}>
80 |             <FormattedMessage id="store/shipping.header.address" />
81 |           </span>
82 |           <Address address={shippingData.address} />
83 |         </div>
84 |       )}
85 |     </Fragment>
86 |   )
87 | }
88 | 
89 | export default DeliveryHeader
90 | 


--------------------------------------------------------------------------------
/react/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "2.19.0",
 3 |   "scripts": {
 4 |     "test": "vtex-test-tools test"
 5 |   },
 6 |   "dependencies": {
 7 |     "@vtex/estimate-calculator": "^1.1.0",
 8 |     "apollo-client": "^2.6.8",
 9 |     "lodash": "^4.17.15",
10 |     "react": "^16.12.0",
11 |     "react-apollo": "^3.1.3",
12 |     "react-clipboard.js": "^2.0.16",
13 |     "react-dom": "^16.12.0",
14 |     "react-intl": "^3.12.0"
15 |   },
16 |   "devDependencies": {
17 |     "@apollo/react-testing": "^3.1.3",
18 |     "@types/jest": "^25.1.4",
19 |     "@types/lodash": "^4.14.156",
20 |     "@types/node": "^13.9.8",
21 |     "@types/react": "^16.9.31",
22 |     "@vtex/test-tools": "^3.1.0",
23 |     "@vtex/tsconfig": "^0.4.4",
24 |     "apollo-cache-inmemory": "^1.6.5",
25 |     "graphql": "^14.6.0",
26 |     "typescript": "3.9.7",
27 |     "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.26.1/public/@types/vtex.address-form",
28 |     "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
29 |     "vtex.flex-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.flex-layout@0.21.3/public/@types/vtex.flex-layout",
30 |     "vtex.order-details": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-details@1.10.1/public/@types/vtex.order-details",
31 |     "vtex.order-placed": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-placed@2.18.0/public/@types/vtex.order-placed",
32 |     "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",
33 |     "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.9.0/public/@types/vtex.pixel-manager",
34 |     "vtex.profile-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.profile-form@3.19.0/public/@types/vtex.profile-form",
35 |     "vtex.pwa-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pwa-components@0.4.1/public/@types/vtex.pwa-components",
36 |     "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.135.1/public/@types/vtex.render-runtime",
37 |     "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.4/public/@types/vtex.responsive-layout",
38 |     "vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-values@0.4.2/public/@types/vtex.responsive-values",
39 |     "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",
40 |     "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.101.2/public/@types/vtex.store-resources",
41 |     "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.13/public/@types/vtex.styleguide",
42 |     "vtex.totalizer-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.totalizer-translator@2.6.1/public/@types/vtex.totalizer-translator"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/react/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC, useState } from 'react'
 2 | import { useQuery } from 'react-apollo'
 3 | import { useIntl, defineMessages } from 'react-intl'
 4 | import { Helmet, ExtensionPoint, useRuntime } from 'vtex.render-runtime'
 5 | import { usePWA } from 'vtex.store-resources/PWAContext'
 6 | import { useCssHandles } from 'vtex.css-handles'
 7 | 
 8 | import { OrderGroupContext } from './components/OrderGroupContext'
 9 | import { CurrencyContext } from './components/CurrencyContext'
10 | import ForbiddenError from './components/Errors/ForbiddenError'
11 | import InvalidError from './components/Errors/InvalidError'
12 | import OrderList from './components/OrderList'
13 | import Skeleton from './Skeleton'
14 | import Analytics from './Analytics'
15 | import GET_ORDER_GROUP from './graphql/getOrderGroup.graphql'
16 | 
17 | // to load default css handle styles
18 | import './styles.css'
19 | 
20 | interface OrderGroupData {
21 |   orderGroup: OrderGroup
22 | }
23 | 
24 | const messages = defineMessages({
25 |   title: { id: 'store/page.title', defaultMessage: '' },
26 | })
27 | 
28 | const CSS_HANDLES = ['orderPlacedWrapper', 'orderPlacedMainWrapper']
29 | 
30 | const OrderPlaced: FC = () => {
31 |   const handles = useCssHandles(CSS_HANDLES)
32 |   const { formatMessage } = useIntl()
33 |   const runtime = useRuntime()
34 |   const { settings = {} } = usePWA() || {}
35 |   const [installDismissed, setInstallDismissed] = useState(false)
36 |   const { data, loading, error } = useQuery<OrderGroupData>(GET_ORDER_GROUP, {
37 |     variables: {
38 |       orderGroup: runtime.query.og,
39 |     },
40 |   })
41 | 
42 |   // render loading skeleton if query is still loading
43 |   if (loading) return <Skeleton />
44 | 
45 |   // forbidden error
46 |   if (
47 |     error?.message.includes('403') ||
48 |     // 'any' needed because graphql error type doesn't have 'extensions' prop
49 |     (error as any)?.extensions?.response?.status === 403
50 |   ) {
51 |     return <ForbiddenError />
52 |   }
53 | 
54 |   // not found error
55 |   if (data?.orderGroup?.orders == null) {
56 |     return <InvalidError />
57 |   }
58 | 
59 |   const { orderGroup }: { orderGroup: OrderGroup } = data
60 |   const { promptOnCustomEvent } = settings
61 | 
62 |   return (
63 |     <OrderGroupContext.Provider value={orderGroup}>
64 |       <CurrencyContext.Provider
65 |         value={orderGroup.orders[0].storePreferencesData.currencyCode}
66 |       >
67 |         <Helmet>
68 |           <title>{formatMessage(messages.title)}</title>
69 |         </Helmet>
70 | 
71 |         <div className={`${handles.orderPlacedWrapper} pt9 sans-serif`}>
72 |           <Analytics eventList={orderGroup.analyticsData} />
73 | 
74 |           <ExtensionPoint id="op-header" />
75 | 
76 |           <div
77 |             role="main"
78 |             className={`${handles.orderPlacedMainWrapper} mv6 w-80-ns w-90 center`}
79 |           >
80 |             <OrderList />
81 | 
82 |             {promptOnCustomEvent === 'checkout' && !installDismissed && (
83 |               <ExtensionPoint
84 |                 id="promotion-banner"
85 |                 type="install"
86 |                 onDismiss={() => setInstallDismissed(true)}
87 |               />
88 |             )}
89 |           </div>
90 | 
91 |           <ExtensionPoint id="op-footer" />
92 |         </div>
93 |       </CurrencyContext.Provider>
94 |     </OrderGroupContext.Provider>
95 |   )
96 | }
97 | 
98 | export default OrderPlaced
99 | 


--------------------------------------------------------------------------------
/store/blocks.jsonc:
--------------------------------------------------------------------------------
  1 | {
  2 |   "order-placed": {
  3 |     "blocks": ["op-header", "op-order"]
  4 |   },
  5 |   "op-header": {
  6 |     "children": [
  7 |       "op-section#confirmation",
  8 |       "op-section#notices",
  9 |       "op-summary-section",
 10 |       "op-bank-invoice-section"
 11 |     ]
 12 |   },
 13 |   "op-section#confirmation": {
 14 |     "props": {
 15 |       "name": "confirmation",
 16 |       "marginBottom": 9,
 17 |       "borderless": true
 18 |     },
 19 |     "children": [
 20 |       "op-confirmation-icon",
 21 |       "op-confirmation-title",
 22 |       "op-confirmation-message",
 23 |       "flex-layout.row#confirmation-buttons"
 24 |     ]
 25 |   },
 26 |   "flex-layout.row#confirmation-buttons": {
 27 |     "props": {
 28 |       "blockClass": "confirmationButtons",
 29 |       "marginTop": 8,
 30 |       "marginBottom": 8,
 31 |       "horizontalAlign": "center",
 32 |       "preventHorizontalStretch": true,
 33 |       "preserveLayoutOnMobile": true
 34 |     },
 35 |     "children": ["flex-layout.col#confirmation-buttons"]
 36 |   },
 37 |   "flex-layout.col#confirmation-buttons": {
 38 |     "children": ["op-print-button"]
 39 |   },
 40 |   "op-section#notices": {
 41 |     "props": {
 42 |       "name": "notices",
 43 |       "marginBottom": 9,
 44 |       "borderless": true
 45 |     },
 46 |     "children": ["op-notices"]
 47 |   },
 48 |   // each order section
 49 |   "op-order": {
 50 |     "children": [
 51 |       "flex-layout.row#order-header",
 52 |       "op-order-split-notice",
 53 |       "op-order-customer",
 54 |       "op-section#payments",
 55 |       "op-section#pickup-packages",
 56 |       "op-section#delivery-packages",
 57 |       "op-order-takeaway-packages",
 58 |       "op-order-total"
 59 |     ]
 60 |   },
 61 |   // each order header
 62 |   "flex-layout.row#order-header": {
 63 |     "props": {
 64 |       "fullWidth": true,
 65 |       "colSizing": "auto",
 66 |       "colGap": 5,
 67 |       "marginBottom": 5
 68 |     },
 69 |     "children": [
 70 |       "flex-layout.col#order-header-info",
 71 |       "flex-layout.col#order-header-options"
 72 |     ]
 73 |   },
 74 |   "flex-layout.col#order-header-info": {
 75 |     "children": ["op-order-number", "op-order-datetime", "op-order-seller"]
 76 |   },
 77 |   "flex-layout.col#order-header-options": {
 78 |     "children": ["responsive-layout.desktop#order-options-desktop"]
 79 |   },
 80 |   "responsive-layout.desktop#order-options-desktop": {
 81 |     "children": ["op-order-options"]
 82 |   },
 83 |   // payment section
 84 |   "op-section#payments": {
 85 |     "props": {
 86 |       "name": "paymentMethods"
 87 |     },
 88 |     "children": [
 89 |       "op-order-payment",
 90 |       "responsive-layout.mobile#order-options-mobile"
 91 |     ]
 92 |   },
 93 |   // bottom of top section of order header
 94 |   "responsive-layout.mobile#order-options-mobile": {
 95 |     "children": ["op-order-options#mobile"]
 96 |   },
 97 |   "op-order-options#mobile": {
 98 |     "props": {
 99 |       "blockClass": "mobile",
100 |       "fullWidth": true
101 |     }
102 |   },
103 |   "op-section#pickup-packages": {
104 |     "props": {
105 |       "name": "pickupPackages"
106 |     },
107 |     "children": ["op-order-pickup-packages"]
108 |   },
109 |   "op-section#delivery-packages": {
110 |     "props": {
111 |       "name": "deliveryPackages"
112 |     },
113 |     "children": ["op-order-delivery-packages"]
114 |   }
115 | }
116 | 


--------------------------------------------------------------------------------
/react/__tests__/BankInvoiceSection.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { orderGroupQuery as bankInvoiceLoggedIn } from '../mocks/bankInvoiceLoggedIn'
 4 | import { orderGroupQuery as bankInvoiceNotLoggedIn } from '../mocks/bankInvoiceNotLoggedIn'
 5 | import { orderGroupQuery as bankInvoiceNumberLoggedIn } from '../mocks/bankInvoiceNumberLoggedIn'
 6 | import { orderGroupQuery as bankInvoiceNumberNotLoggedIn } from '../mocks/bankInvoiceNumberNotLoggedIn'
 7 | import { orderGroupQuery as bankInvoiceDisplayNonBankUrlPayment } from '../mocks/bankInvoiceDisplayNonBankUrlPayment'
 8 | import BankInvoiceSection from '../BankInvoiceSection'
 9 | import { renderWithOrderGroup } from '../utils/testUtils'
10 | 
11 | test('renders embedded bank invoice for logged in customer, but no number', () => {
12 |   const { getByTestId, queryByTestId } = renderWithOrderGroup(
13 |     bankInvoiceLoggedIn.orderGroup,
14 |     <BankInvoiceSection />
15 |   )
16 | 
17 |   const bankInvoiceSection = getByTestId('bank-invoice')
18 |   const barCodeNumber = queryByTestId('bank-invoice-barcode')
19 |   const embedded = queryByTestId('embedded-bank-invoice')
20 | 
21 |   expect(bankInvoiceSection).toBeTruthy()
22 |   expect(barCodeNumber).toBeNull()
23 |   expect(embedded).toBeTruthy()
24 | })
25 | 
26 | test('renders embedded bank invoice for logged in customer, along with barcode number', () => {
27 |   const { getByTestId, queryByTestId } = renderWithOrderGroup(
28 |     bankInvoiceNumberLoggedIn.orderGroup,
29 |     <BankInvoiceSection />
30 |   )
31 | 
32 |   const bankInvoiceSection = getByTestId('bank-invoice')
33 |   const barCodeNumber = queryByTestId('bank-invoice-barcode')
34 |   const embedded = queryByTestId('embedded-bank-invoice')
35 | 
36 |   expect(bankInvoiceSection).toBeTruthy()
37 |   expect(barCodeNumber).toBeTruthy()
38 |   expect(embedded).toBeTruthy()
39 | })
40 | 
41 | test("doesn't render bank invoice section for customer not logged in", () => {
42 |   const { queryByTestId } = renderWithOrderGroup(
43 |     bankInvoiceNotLoggedIn.orderGroup,
44 |     <BankInvoiceSection />
45 |   )
46 | 
47 |   const bankInvoiceSection = queryByTestId('bank-invoice')
48 |   const barCodeNumber = queryByTestId('bank-invoice-barcode')
49 |   const embedded = queryByTestId('embedded-bank-invoice')
50 | 
51 |   expect(bankInvoiceSection).toBeNull()
52 |   expect(barCodeNumber).toBeNull()
53 |   expect(embedded).toBeNull()
54 | })
55 | 
56 | test('renders bank invoice barcode number for user not logged in', () => {
57 |   const { queryByTestId } = renderWithOrderGroup(
58 |     bankInvoiceNumberNotLoggedIn.orderGroup,
59 |     <BankInvoiceSection />
60 |   )
61 | 
62 |   const bankInvoiceSection = queryByTestId('bank-invoice')
63 |   const barCodeNumber = queryByTestId('bank-invoice-barcode')
64 |   const embedded = queryByTestId('embedded-bank-invoice')
65 | 
66 |   expect(bankInvoiceSection).toBeTruthy()
67 |   expect(barCodeNumber).toBeTruthy()
68 |   expect(embedded).toBeNull()
69 | })
70 | 
71 | test('has the invoice url if the user is logged in.', () => {
72 |   const { container } = renderWithOrderGroup(
73 |     bankInvoiceLoggedIn.orderGroup,
74 |     <BankInvoiceSection />
75 |   )
76 | 
77 |   const printButton = container.querySelector('a[href]') as HTMLAnchorElement
78 |   expect(printButton.href).not.toContain('login')
79 | })
80 | 
81 | test('renders embedded for other types of payments besides bank invoice', () => {
82 |   const { queryByTestId } = renderWithOrderGroup(
83 |     bankInvoiceDisplayNonBankUrlPayment.orderGroup,
84 |     <BankInvoiceSection />
85 |   )
86 | 
87 |   const embedded = queryByTestId('embedded-bank-invoice')
88 | 
89 |   expect(embedded).toBeTruthy()
90 | })
91 | 


--------------------------------------------------------------------------------
/react/components/ProductList/AttachmentAccordion.tsx:
--------------------------------------------------------------------------------
  1 | import React, { FC, useState, ReactNode } from 'react'
  2 | import { IconCaretDown, IconCaretUp } from 'vtex.styleguide'
  3 | import { useCssHandles } from 'vtex.css-handles'
  4 | 
  5 | interface Props {
  6 |   content: ReactNode[]
  7 |   beforeTitleLabel?: ReactNode
  8 |   titleLabel: ReactNode
  9 |   toggleLabel?: ReactNode
 10 | }
 11 | 
 12 | const CSS_HANDLES = [
 13 |   'attachmentWrapper',
 14 |   'attachmentHeader',
 15 |   'attachmentTitle',
 16 |   'attachmentToggleWrapper',
 17 |   'attachmentToggleButton',
 18 |   'attachmentToggleLabel',
 19 |   'attachmentContent',
 20 |   'attachmentContentItem',
 21 | ]
 22 | 
 23 | const AttachmentAccordion: FC<Props> = ({
 24 |   beforeTitleLabel,
 25 |   titleLabel,
 26 |   toggleLabel,
 27 |   content,
 28 | }) => {
 29 |   const handles = useCssHandles(CSS_HANDLES)
 30 |   const [isOpen, setIsOpen] = useState(false)
 31 | 
 32 |   const filteredContent = content.filter(Boolean)
 33 |   const hasContent = filteredContent.length > 0
 34 | 
 35 |   const handleKeyDown = (e: React.KeyboardEvent) => {
 36 |     if (e.key !== ' ' && e.key !== 'Enter') {
 37 |       return
 38 |     }
 39 |     e.preventDefault()
 40 |     setIsOpen(!isOpen)
 41 |   }
 42 | 
 43 |   const attachmentWrapperClass = `${handles.attachmentWrapper} mt7 bg-muted-5 br2`
 44 |   const attachmentHeaderClass = `${handles.attachmentHeader} flex pa5 justify-between items-center`
 45 |   const attachmentTitleClass = `${handles.attachmentTitle} c-on-base`
 46 |   const attachmentToggleWrapperClass = `${handles.attachmentToggleWrapper} flex items-center`
 47 |   const attachmentToggleLabelClass = `${handles.attachmentToggleLabel}`
 48 |   const attachmentToggleButtonClass = `${handles.attachmentToggleButton} c-action-primary ml5`
 49 |   const attachmentContentClass = `${handles.attachmentContent} ph5 pv3`
 50 |   const attachmentContentItemClass = `${handles.attachmentContentItem} mb4 c-muted-1`
 51 | 
 52 |   // if it has no attachment content, no accordion is needed
 53 |   if (!hasContent) {
 54 |     return (
 55 |       <div className={attachmentWrapperClass}>
 56 |         <div className={attachmentHeaderClass}>
 57 |           {beforeTitleLabel}
 58 |           <span className={attachmentTitleClass}>{titleLabel}</span>
 59 |           <div className={attachmentToggleWrapperClass}>
 60 |             <div className={attachmentToggleLabelClass}>{toggleLabel}</div>
 61 |           </div>
 62 |         </div>
 63 |       </div>
 64 |     )
 65 |   }
 66 | 
 67 |   return (
 68 |     <div className={attachmentWrapperClass} aria-expanded={isOpen}>
 69 |       <div
 70 |         className={attachmentHeaderClass}
 71 |         role="button"
 72 |         tabIndex={0}
 73 |         onKeyDown={handleKeyDown}
 74 |         onClick={() => setIsOpen(!isOpen)}
 75 |       >
 76 |         {beforeTitleLabel}
 77 |         <span className={attachmentTitleClass}>{titleLabel}</span>
 78 |         <div className={attachmentToggleWrapperClass}>
 79 |           <div className={attachmentToggleLabelClass}>{toggleLabel}</div>
 80 |           {hasContent && (
 81 |             <div className={attachmentToggleButtonClass}>
 82 |               {isOpen ? <IconCaretUp /> : <IconCaretDown />}
 83 |             </div>
 84 |           )}
 85 |         </div>
 86 |       </div>
 87 |       {hasContent && (
 88 |         <div hidden={!isOpen} className={attachmentContentClass}>
 89 |           {filteredContent.map((line, i) => (
 90 |             <div key={i} className={attachmentContentItemClass}>
 91 |               {line}
 92 |             </div>
 93 |           ))}
 94 |         </div>
 95 |       )}
 96 |     </div>
 97 |   )
 98 | }
 99 | 
100 | export default AttachmentAccordion
101 | 


--------------------------------------------------------------------------------
/react/BankInvoiceSection.tsx:
--------------------------------------------------------------------------------
  1 | import React, { FC } from 'react'
  2 | import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
  3 | import { ButtonWithIcon, Tooltip, IconInfo } from 'vtex.styleguide'
  4 | import { useCssHandles } from 'vtex.css-handles'
  5 | 
  6 | import PrinterIcon from './Icons/PrinterIcon'
  7 | import BarCode from './components/BankInvoice/BarCode'
  8 | import Embedded from './components/BankInvoice/Embedded'
  9 | import { useOrderGroup } from './components/OrderGroupContext'
 10 | import { getPaymentMethodsInfoFromOrder, parseBankInvoiceUrl } from './utils'
 11 | import Section from './Section'
 12 | 
 13 | const CSS_HANDLES = [
 14 |   'barCodeContainer',
 15 |   'printButtonWrapper',
 16 |   'printHintWrapper',
 17 | ] as const
 18 | 
 19 | const messages = defineMessages({
 20 |   print: { id: 'store/header.bankinvoice.print', defaultMessage: '' },
 21 |   tooltip: { id: 'store/header.bankinvoice.tooltip', defaultMessage: '' },
 22 | })
 23 | 
 24 | const BankInvoiceSection: FC = () => {
 25 |   const handles = useCssHandles(CSS_HANDLES)
 26 |   const orderGroup = useOrderGroup()
 27 |   const { formatMessage } = useIntl()
 28 | 
 29 |   const paymentMethodsFromOrder = getPaymentMethodsInfoFromOrder(
 30 |     orderGroup.orders[0]
 31 |   )
 32 |   const bankInvoice = paymentMethodsFromOrder
 33 |     .flat()
 34 |     .find(({ paymentGroup, url }) => paymentGroup === 'bankInvoice' && !!url)
 35 | 
 36 |   const { url, paymentSystemName, barCodeNumber } =
 37 |     bankInvoice ?? paymentMethodsFromOrder[0]
 38 |   const isURLValid = url && !url.match(/(\*.\*.)+\*\w\*/g)
 39 | 
 40 |   if (!isURLValid && !barCodeNumber) {
 41 |     return null
 42 |   }
 43 | 
 44 |   const parsedUrl = url ? parseBankInvoiceUrl(url) : ''
 45 |   const printInvoice = formatMessage(messages.print, { paymentSystemName })
 46 |   const tooltip = formatMessage(messages.tooltip, {
 47 |     paymentSystemName,
 48 |     message: `"${printInvoice}"`,
 49 |   })
 50 | 
 51 |   return (
 52 |     <Section
 53 |       name="bank-invoice"
 54 |       marginBottom={9}
 55 |       paddingBottom={9}
 56 |       width={{ mobile: '90%', desktop: '80%' }}
 57 |     >
 58 |       <header className="t-heading-4">
 59 |         <FormattedMessage
 60 |           id="store/header.bankinvoice.header"
 61 |           values={{ paymentSystemName }}
 62 |         />
 63 |       </header>
 64 |       <div
 65 |         className={`${handles.barCodeContainer} flex-l justify-between items-center mt6`}
 66 |       >
 67 |         {barCodeNumber && <BarCode barCodeNumber={barCodeNumber} />}
 68 |         {isURLValid && (
 69 |           <div
 70 |             className={`${handles.printButtonWrapper} mt5 mt0-l ${
 71 |               barCodeNumber ? 'ml5-l' : ''
 72 |             }`}
 73 |           >
 74 |             <ButtonWithIcon
 75 |               href={parsedUrl}
 76 |               icon={<PrinterIcon />}
 77 |               variation="secondary"
 78 |               target="_blank"
 79 |             >
 80 |               {printInvoice}
 81 |             </ButtonWithIcon>
 82 |           </div>
 83 |         )}
 84 |       </div>
 85 |       {isURLValid && (
 86 |         <div className="mt6">
 87 |           <Embedded url={parsedUrl} />
 88 |         </div>
 89 |       )}
 90 |       <div
 91 |         className={`${handles.printHintWrapper} c-muted-1 mt6 t-small mb9 flex`}
 92 |       >
 93 |         <FormattedMessage
 94 |           id="store/header.bankinvoice.help"
 95 |           values={{ paymentSystemName }}
 96 |         />
 97 |         <Tooltip label={tooltip} position="bottom">
 98 |           <span className="c-muted-3 flex items-center ml3">
 99 |             <IconInfo size={12} />
100 |           </span>
101 |         </Tooltip>
102 |       </div>
103 |     </Section>
104 |   )
105 | }
106 | 
107 | export default BankInvoiceSection
108 | 


--------------------------------------------------------------------------------
/react/Notices.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Fragment, FC } from 'react'
  2 | import { FormattedMessage, FormattedDate } from 'react-intl'
  3 | import { Button } from 'vtex.styleguide'
  4 | import { useCssHandles } from 'vtex.css-handles'
  5 | 
  6 | import FormattedPrice from './components/FormattedPrice'
  7 | import { useOrderGroup } from './components/OrderGroupContext'
  8 | import { parseBankInvoiceUrl, getPaymentMethodsInfoFromOrder } from './utils'
  9 | 
 10 | const CSS_HANDLES = ['noticesList', 'noticeListItem']
 11 | 
 12 | // TODO: add json schema to add/remove extra notice messages
 13 | const Notices: FC = () => {
 14 |   const handles = useCssHandles(CSS_HANDLES)
 15 |   const { orders, totalDeliveryParcels, totalPickUpParcels } = useOrderGroup()
 16 |   const hasDelivery = totalDeliveryParcels.length > 0
 17 |   const hasPickUp = totalPickUpParcels.length > 0
 18 | 
 19 |   if (!hasDelivery && !hasPickUp) {
 20 |     return null
 21 |   }
 22 | 
 23 |   const numOrders = orders.length
 24 |   const isSplitOrder = numOrders > 1
 25 | 
 26 |   const paymentMethodsFromOrders = orders.map(getPaymentMethodsInfoFromOrder)
 27 | 
 28 |   const bankInvoice = paymentMethodsFromOrders
 29 |     .flat()
 30 |     .find(({ paymentGroup, url }) => paymentGroup === 'bankInvoice' && !!url)
 31 | 
 32 |   const listItems = [
 33 |     bankInvoice == null && (
 34 |       <FormattedMessage id="store/warnings.payment.approval" />
 35 |     ),
 36 |     hasDelivery && <FormattedMessage id="store/warnings.delivery.time" />,
 37 |     hasDelivery && <FormattedMessage id="store/warnings.delivery.tracking" />,
 38 |     hasPickUp && <FormattedMessage id="store/warnings.pickup.time" />,
 39 |     isSplitOrder && (
 40 |       <FormattedMessage
 41 |         id="store/warnings.order.split"
 42 |         values={{ numOrders }}
 43 |       />
 44 |     ),
 45 |     bankInvoice != null && (
 46 |       <FormattedMessage
 47 |         id="store/warnings.payment.bankInvoice.approval"
 48 |         values={{ paymentSystemName: bankInvoice.paymentSystemName }}
 49 |       />
 50 |     ),
 51 |     bankInvoice != null && (
 52 |       <Fragment>
 53 |         {bankInvoice.dueDate ? (
 54 |           <FormattedMessage
 55 |             id="store/warnings.payment.bankInvoice.value.duedate"
 56 |             values={{
 57 |               paymentDueDate: (
 58 |                 <strong>
 59 |                   <FormattedDate value={bankInvoice.dueDate} timeZone="utc" />
 60 |                 </strong>
 61 |               ),
 62 |               paymentValue: (
 63 |                 <strong>
 64 |                   <FormattedPrice value={bankInvoice.value} />
 65 |                 </strong>
 66 |               ),
 67 |             }}
 68 |           />
 69 |         ) : (
 70 |           <FormattedMessage
 71 |             id="store/warnings.payment.bankInvoice.value"
 72 |             values={{
 73 |               paymentValue: (
 74 |                 <strong>
 75 |                   <FormattedPrice value={bankInvoice.value} />
 76 |                 </strong>
 77 |               ),
 78 |             }}
 79 |           />
 80 |         )}
 81 |         <div className="mt4">
 82 |           {bankInvoice.url && (
 83 |             <Button
 84 |               href={parseBankInvoiceUrl(bankInvoice.url)}
 85 |               variation="primary"
 86 |               target="_blank"
 87 |             >
 88 |               <FormattedMessage
 89 |                 id="store/payments.bankinvoice.print"
 90 |                 values={{ paymentSystemName: bankInvoice.paymentSystemName }}
 91 |               />
 92 |             </Button>
 93 |           )}
 94 |         </div>
 95 |       </Fragment>
 96 |     ),
 97 |   ].filter(Boolean)
 98 | 
 99 |   return (
100 |     <ul
101 |       className={`${handles.noticesList} list ma0 pl0 t-body bg-muted-5 tc-m lh-copy`}
102 |     >
103 |       {listItems.map((item, index) => (
104 |         <li
105 |           className={`${handles.noticeListItem} pv6 w-80-ns w-90 center c-on-base b--muted-4 bb`}
106 |           key={index}
107 |         >
108 |           {item}
109 |         </li>
110 |       ))}
111 |     </ul>
112 |   )
113 | }
114 | 
115 | export default Notices
116 | 


--------------------------------------------------------------------------------
/react/typings/global.d.ts:
--------------------------------------------------------------------------------
  1 | interface OrderGroup {
  2 |   orders: Order[]
  3 |   totalDeliveryParcels: Parcel[]
  4 |   totalPickUpParcels: Parcel[]
  5 |   totalTakeAwayParcels: Parcel[]
  6 |   analyticsData?: any[]
  7 | }
  8 | 
  9 | interface Order {
 10 |   allowCancellation: boolean
 11 |   orderId: string
 12 |   deliveryParcels: Parcel[]
 13 |   pickUpParcels: Parcel[]
 14 |   takeAwayParcels: Parcel[]
 15 |   items: OrderItem[]
 16 |   sellers: OrderItemSeller[]
 17 |   totals: OrderItemTotal[]
 18 |   giftRegistryData?: GiftRegistry | null
 19 |   clientProfileData: ClientProfile
 20 |   paymentData: PaymentData
 21 |   storePreferencesData: StorePreferencesData
 22 |   creationDate: string
 23 |   value: number
 24 | }
 25 | 
 26 | interface GiftRegistry {
 27 |   attachmentId: string
 28 |   giftRegistryId: string
 29 |   giftRegistryType: string
 30 |   giftRegistryTypeName: string
 31 |   addressId: string
 32 |   description: string
 33 | }
 34 | 
 35 | interface ClientProfile {
 36 |   email: string
 37 |   firstName: string | null
 38 |   lastName: string | null
 39 |   document: string | null
 40 |   documentType: string | null
 41 |   phone: string | null
 42 | }
 43 | 
 44 | interface OrderItem {
 45 |   id: string
 46 |   attachments: Attachment[]
 47 |   skuName: string
 48 |   name: string
 49 |   productId: string
 50 |   price: number
 51 |   sellingPrice: number
 52 |   listPrice: number
 53 |   bundleItems: Bundle[]
 54 |   isGift: boolean
 55 |   parentItemIndex: null | number
 56 |   quantity: number
 57 |   seller: string
 58 |   imageUrl: string
 59 |   detailUrl: string
 60 |   measurementUnit: string
 61 |   unitMultiplier: number
 62 | }
 63 | 
 64 | interface Bundle {
 65 |   id
 66 |   attachments: Attachment[]
 67 |   name: string
 68 |   price: number
 69 |   quantity: number
 70 |   imageUrl: string | null
 71 |   measurementUnit: string
 72 |   unitMultiplier: number
 73 | }
 74 | 
 75 | interface Attachment {
 76 |   content: any
 77 |   name: string
 78 | }
 79 | 
 80 | interface StorePreferencesData {
 81 |   countryCode: string | null
 82 |   currencyCode: string
 83 | }
 84 | 
 85 | interface PaymentData {
 86 |   transactions: Transaction[]
 87 | }
 88 | 
 89 | interface Transaction {
 90 |   transactionId: string
 91 |   payments: Payment[]
 92 | }
 93 | 
 94 | interface DeliveryWindow {
 95 |   endDateUtc: string | null
 96 |   startDateUtc: string | null
 97 | }
 98 | 
 99 | interface ShippingSLA {
100 |   id: string
101 |   name: string
102 |   shippingEstimate: string
103 |   deliveryWindow: DeliveryWindow | null
104 |   price: number
105 |   deliveryChannel: string
106 |   pickupStoreInfo: PickupStoreInfo
107 | }
108 | 
109 | interface PickupStoreInfo {
110 |   additionalInfo: string | null
111 |   address: Address | null
112 |   friendlyName: string | null
113 |   isPickupStore: boolean | null
114 | }
115 | 
116 | interface OrderItemSeller {
117 |   id: string
118 |   name: string
119 | }
120 | 
121 | interface OrderItemTotal {
122 |   id: string
123 |   name: string
124 |   value: number
125 | }
126 | 
127 | interface Payment {
128 |   id: string
129 |   paymentSystem: string
130 |   paymentSystemName: string
131 |   paymentOrigin: string | null
132 |   value: number
133 |   lastDigits: string | null
134 |   group: string
135 |   installments: number
136 |   dueDate: string | null
137 |   url: string | null
138 |   bankIssuedInvoiceIdentificationNumber: string | null
139 |   bankIssuedInvoiceBarCodePNG: string | null
140 |   connectorResponses: ConnectorResponses | null
141 | }
142 | 
143 | interface Address {
144 |   addressId?: string
145 |   addressType: string | null
146 |   receiverName: string | null
147 |   state: string | null
148 |   street: string | null
149 |   number: string | null
150 |   city: string | null
151 |   postalCode: string | null
152 |   neighborhood: string | null
153 |   complement: string | null
154 |   country: string | null
155 | }
156 | 
157 | interface Parcel {
158 |   address: Address
159 |   price: number
160 |   pickupFriendlyName: string | null
161 |   seller: string
162 |   items: OrderItem[]
163 |   selectedSla: string
164 |   selectedSlaObj: ShippingSLA
165 |   shippingEstimate: string | null
166 |   shippingEstimateDate: string | null
167 |   deliveryWindow: DeliveryWindow | null
168 |   deliveryChannel: string
169 |   selectedSlaType: string
170 | }
171 | 
172 | interface IconProps {
173 |   color?: string
174 |   size?: number
175 | }
176 | 
177 | interface ConnectorResponses {
178 |   [key: string]: any
179 | }
180 | 
181 | interface ConnectorResponse {
182 |   key: string
183 |   value: string
184 | }
185 | 
186 | interface ResponsiveInput<T> {
187 |   mobile?: T
188 |   desktop?: T
189 |   tablet?: T
190 | }
191 | 
192 | type MaybeResponsiveInput<T> = ResponsiveInput<T> | T
193 | 


--------------------------------------------------------------------------------
/react/__tests__/Notices.test.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import OrderPlacedNotices from '../Notices'
  4 | import { orderGroupQuery as bankInvoiceDueDate } from '../mocks/bankInvoiceLoggedIn'
  5 | import { orderGroupQuery as bankInvoiceNoDueDate } from '../mocks/bankInvoiceNumberLoggedIn'
  6 | import { orderGroupQuery as bankInvoiceNotLoggedIn } from '../mocks/bankInvoiceNotLoggedIn'
  7 | import { orderGroupQuery as oneDelivery } from '../mocks/oneDeliverySimple'
  8 | import { orderGroupQuery as onePickup } from '../mocks/onePickupSimple'
  9 | import { orderGroupQuery as splitOrder } from '../mocks/splitOrderTwoSellers'
 10 | import { renderWithOrderGroup, queryByTextWithMarkup } from '../utils/testUtils'
 11 | 
 12 | test('should render payment confirmation estimate', () => {
 13 |   const { getByText } = renderWithOrderGroup(
 14 |     oneDelivery.orderGroup,
 15 |     <OrderPlacedNotices />
 16 |   )
 17 | 
 18 |   const paymentApproval = getByText(
 19 |     /Payment approval may take from \d minutes up to \d business days/i
 20 |   )
 21 |   expect(paymentApproval).toBeTruthy()
 22 | })
 23 | 
 24 | test('should render shipping estimate disclaimers if order has shipping items', () => {
 25 |   const { getByText } = renderWithOrderGroup(
 26 |     oneDelivery.orderGroup,
 27 |     <OrderPlacedNotices />
 28 |   )
 29 | 
 30 |   const paymentDisclaimer = getByText(
 31 |     /The delivery period starts to count from the moment your payment is confirmed/
 32 |   )
 33 |   const trackingDisclaimer = getByText(
 34 |     /A tracking code will be sent to your email when the delivery process begins./
 35 |   )
 36 | 
 37 |   expect(paymentDisclaimer).toBeTruthy()
 38 |   expect(trackingDisclaimer).toBeTruthy()
 39 | })
 40 | 
 41 | test('should not render shipping estimate disclaimers if order has no shipping items', () => {
 42 |   const { queryByText } = renderWithOrderGroup(
 43 |     onePickup.orderGroup,
 44 |     <OrderPlacedNotices />
 45 |   )
 46 | 
 47 |   const paymentDisclaimer = queryByText(
 48 |     'The delivery period starts to count from the moment your payment is confirmed'
 49 |   )
 50 |   const trackingDisclaimer = queryByText(
 51 |     'A tracking code will be sent to your email when the delivery process begins.'
 52 |   )
 53 | 
 54 |   expect(paymentDisclaimer).toBeNull()
 55 |   expect(trackingDisclaimer).toBeNull()
 56 | })
 57 | 
 58 | test('should render pickup estimate disclaimer if order has pickup items', () => {
 59 |   const { getByText } = renderWithOrderGroup(
 60 |     onePickup.orderGroup,
 61 |     <OrderPlacedNotices />
 62 |   )
 63 | 
 64 |   const paymentDisclaimer = getByText(
 65 |     /The store pickup period starts from the moment your payment is confirmed/
 66 |   )
 67 | 
 68 |   expect(paymentDisclaimer).toBeTruthy()
 69 | })
 70 | 
 71 | test('should not render pickup estimate disclaimers if order has no pickup items', () => {
 72 |   const { queryByText } = renderWithOrderGroup(
 73 |     oneDelivery.orderGroup,
 74 |     <OrderPlacedNotices />
 75 |   )
 76 | 
 77 |   const paymentDisclaimer = queryByText(
 78 |     'The store pickup period starts from the moment your payment is confirmed.'
 79 |   )
 80 | 
 81 |   expect(paymentDisclaimer).toBeNull()
 82 | })
 83 | 
 84 | test('should render disclaimer for split orders', () => {
 85 |   const { queryByText } = renderWithOrderGroup(
 86 |     splitOrder.orderGroup,
 87 |     <OrderPlacedNotices />
 88 |   )
 89 | 
 90 |   const splitOrderDisclaimer = queryByText(
 91 |     /Your purchase was split into \d orders as some of the items were sold by partners. But this does not affect shipping estimates/
 92 |   )
 93 |   expect(splitOrderDisclaimer).toBeTruthy()
 94 | })
 95 | 
 96 | test('should render notice for bank invoices with due date', () => {
 97 |   const { container } = renderWithOrderGroup(
 98 |     bankInvoiceDueDate.orderGroup,
 99 |     <OrderPlacedNotices />
100 |   )
101 | 
102 |   const bankInvoiceWarning = queryByTextWithMarkup(
103 |     container,
104 |     /Please make a payment of .*? up to .*? according to the data below/
105 |   )
106 |   expect(bankInvoiceWarning).toBeTruthy()
107 | })
108 | 
109 | test('should render notice for bank invoices without due date', () => {
110 |   const { container } = renderWithOrderGroup(
111 |     bankInvoiceNoDueDate.orderGroup,
112 |     <OrderPlacedNotices />
113 |   )
114 | 
115 |   const bankInvoiceWarning = queryByTextWithMarkup(
116 |     container,
117 |     /Please make a payment of .*? up to the due date according to the data below/
118 |   )
119 |   expect(bankInvoiceWarning).toBeTruthy()
120 | })
121 | 
122 | test('redirects to login if the user is not logged in.', () => {
123 |   const { container } = renderWithOrderGroup(
124 |     bankInvoiceNotLoggedIn.orderGroup,
125 |     <OrderPlacedNotices />
126 |   )
127 | 
128 |   const printButton = container.querySelector('a[href]') as HTMLAnchorElement
129 |   expect(printButton.href).toContain('login')
130 | })
131 | 


--------------------------------------------------------------------------------
/messages/ko.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "store/common.header.counter": " - n˚ {index}/{numPackages}",
 3 |   "store/header.bankinvoice.copy": "복사",
 4 |   "store/header.bankinvoice.embeded.collapse": "실패",
 5 |   "store/header.bankinvoice.embeded.expand": "확장",
 6 |   "store/header.bankinvoice.header": "{paymentSystemName} 정보",
 7 |   "store/header.bankinvoice.print": "{paymentSystemName} 인쇄",
 8 |   "store/header.bankinvoice.help": "{paymentSystemName} 이 보이지 않습니까?",
 9 |   "store/header.bankinvoice.tooltip": "{paymentSystemName} 이 정상적으로 작동합니다. 결제를 진행하려면 {message} 를 클릭하거나 바코드를 복사하세요.",
10 |   "store/header.email": "5분 내에 {userEmail}로 모든 구매 상세 정보가 포함된 이메일을 수신하게 됩니다.{lineBreak}스팸함이나 프로모션 수신함 확인을 잊지 마십시오",
11 |   "store/header.guest-email": "5분 내에 {userEmail}로 모든 구매 상세 정보가 포함된 이메일을 수신하게 됩니다.{lineBreak}스팸함이나 프로모션 수신함 확인을 잊지 마십시오",
12 |   "store/header.newpurchase.button": "새 주문 시작하기",
13 |   "store/header.print.button": "인쇄",
14 |   "store/header.thanks": "구매해 주셔서 감사합니다!",
15 |   "store/items.attachments.subscription": "구독",
16 |   "store/items.attachments.subscription.frequency.day": "{frequencyNumber, plural, one {# 일} other {# 일}}마다",
17 |   "store/items.attachments.subscription.frequency.month": "{frequencyNumber, plural, one {#월} other {#월}}마다",
18 |   "store/items.attachments.subscription.frequency.week": "{frequencyNumber, plural, one {# 주} other {# 주}}마다",
19 |   "store/items.attachments.subscription.frequency.year": "{frequencyNumber, plural, one {#년} other {#년}}마다",
20 |   "store/items.attachments.subscription.purchaseday": "매달 {purchaseday}일에 결제",
21 |   "store/order.header.cancel.button": "주문 취소",
22 |   "store/order.header.date": "{orderDate}일 {orderTime}시에 주문",
23 |   "store/order.header.myorders.button": "내 주문",
24 |   "store/order.header.number": "주문 #{orderId}",
25 |   "store/order.header.receipt": "영수증 보기",
26 |   "store/order.header.seller": "{seller}가 판매 및 배송",
27 |   "store/order.header.takeaway.cancel.button": "구매 취소",
28 |   "store/order.header.takeaway.printreceipt.button": "영수증 재인쇄",
29 |   "store/order.header.update.button": "주문 업데이트",
30 |   "store/order.split.n.pickup.n.takeaway": "귀하의 주문을 {deliveries} 배달,{pickups, plural, one {, 매장 한 개 픽업} other {, 매장 #개 픽업 }}{takeaways, plural, one {테이크아웃 제품 한 개} other {그리고 테이크아웃 제품 #개}}로 나누었습니다. 때문에 귀하와 가까운 곳에 있는 품목을 더 빠르게 받아보실 수 있습니다.",
31 |   "store/order.split.n.pickup.no.takeaway": "귀하의 주문을 {deliveries} 배달{pickups, plural, one {그리고 매장 한 개 픽업} other {그리고 매장 #개 픽업}}으로 나누었습니다. 때문에 귀하와 가까운 곳에 있는 품목을 더 빠르게 받아보실 수 있습니다.",
32 |   "store/order.split.no.pickup.n.takeaway": "귀하의 주문을 {deliveries} 배달{takeaways, plural, one {테이크아웃 제품 한 개} other {그리고 테이크아웃 제품 #개}}로 나누었습니다. 때문에 귀하와 가까운 곳에 있는 품목을 더 빠르게 받아보실 수 있습니다.",
33 |   "store/order.split.no.pickup.no.takeaway": "귀하의 주문을 {deliveries} 배달로 나누었습니다. 때문에 귀하와 가까운 곳에 있는 품목을 더 빠르게 받아보실 수 있습니다.",
34 |   "store/order.totals.pickup.free": "무료",
35 |   "store/order.totals.total": "총액",
36 |   "store/page.title": "주문 내역",
37 |   "store/payments.bankinvoice.print": "{paymentSystemName} 열기",
38 |   "store/payments.creditcard": "신용 카드",
39 |   "store/payments.creditcard.lastDigits": "마지막 자릿수: {lastDigits}",
40 |   "store/payments.debitcard": "데빗 카드",
41 |   "store/payments.id": "결제 ID: {id}",
42 |   "store/payments.installments": "({installments}x)",
43 |   "store/payments.transaction.id": "거래 ID: {id}",
44 |   "store/pickup.header.title": "픽업",
45 |   "store/products.isGift": "무료",
46 |   "store/products.quantity": "{quantity, plural, one {# 품목} other {# 품목}}",
47 |   "store/shipping.header.title": "배달",
48 |   "store/shipping.header.address": "주소",
49 |   "store/shipping.header.wishlist.address": "보내는 곳 주소: {giftRegistryName}",
50 |   "store/summary.items": "{itemsQuantity, plural, one {# 품목} other {# 품목}}",
51 |   "store/summary.pickup": "매장 픽업",
52 |   "store/summary.pickup.friendlyName": "{friendlyName}에서",
53 |   "store/summary.pickup.quantity": "{pickups, plural, one {, 매장 한 개 픽업} other {, # 픽업으로 분할}}",
54 |   "store/summary.shipping": "배달",
55 |   "store/summary.shipping.address": "{addressStreet}, {addressNumber}에서",
56 |   "store/summary.shipping.quantity": "{shippings, plural, one {, 단일 배송} other {, # 배송으로 분할}}",
57 |   "store/takeaway.header.title": "테이크아웃",
58 |   "store/warnings.delivery.time": "귀하의 결제가 확인된 순간부터 배송 기간을 세기 시작합니다.",
59 |   "store/warnings.delivery.tracking": "배송이 시작되면 운송장 코드가 이메일로 발송됩니다.",
60 |   "store/warnings.order.split": "일부 상품을 파트너사가 판매하기 때문에 귀하의 구매가 {numOrders}개의 주문으로 나누어집니다. 배송 예정에 영향을 미치지는 않습니다.",
61 |   "store/warnings.payment.approval": "결제 승인은 5분에서 최대 5일(영업일 기준)까지 걸릴 수 있습니다.",
62 |   "store/warnings.payment.bankInvoice.approval": "{paymentSystemName}의 결제 승인은 최대 3일(영업일 기준)까지 걸릴 수 있습니다. 결제가 되지 않으면 주문은 자동으로 취소됩니다.",
63 |   "store/warnings.payment.bankInvoice.value": "아래 데이터를 참고하여 예정일까지 {paymentValue}를 결제하십시오.",
64 |   "store/warnings.payment.bankInvoice.value.duedate": "아래 데이터를 참고하여 {paymentDueDate} 전에 {paymentValue}를 결제하십시오.",
65 |   "store/warnings.pickup.time": "매장 픽업 기간은 귀하의 결제가 확인된 순간부터 시작됩니다.",
66 |   "store/warnings.subscription": "구입한 품목 외에도 귀하의 주문에 한 개 이상의 구독 제품이 포함됩니다.",
67 |   "store/order.error.invalid.title": "페이지를 찾을 수 없습니다",
68 |   "store/order.error.invalid.message": "귀하가 찾는 페이지가 존재하지 않는 것 같습니다. 홈으로 돌아가는 것을 추천합니다.",
69 |   "store/order.error.not-logged-in.title": "권한이 없습니다",
70 |   "store/order.error.not-logged-in.message": "이 페이지에 액세스할 권한이 없는 것 같습니다. 로그인 후 다시 액세스해 주십시오.",
71 |   "store/go-to-login": "로그인 페이지로 가기",
72 |   "store/go-to-home": "홈 페이지로 가기",
73 |   "store/paymentData.connectorResponse.mb.entity": "엔티티",
74 |   "store/paymentData.connectorResponse.mb.reference": "참조"
75 | }
76 | 


--------------------------------------------------------------------------------
/messages/ja.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "store/common.header.counter": " - n˚ {index} / {numPackages}",
 3 |   "store/header.bankinvoice.copy": "コピー",
 4 |   "store/header.bankinvoice.embeded.collapse": "折りたたむ",
 5 |   "store/header.bankinvoice.embeded.expand": "展開する",
 6 |   "store/header.bankinvoice.header": "{paymentSystemName} の情報",
 7 |   "store/header.bankinvoice.print": "{paymentSystemName} を印刷",
 8 |   "store/header.bankinvoice.help": "{paymentSystemName} が表示されませんか？",
 9 |   "store/header.bankinvoice.tooltip": "{paymentSystemName} が正常に作動していません。{message} をクリックするか、またはバーコードをコピーして支払いを進めてください。",
10 |   "store/header.email": "5 分以内に、すべての購入品の詳細について {userEmail} へメールが届きます。{lineBreak}迷惑メールフォルダやプロモーションの受信トレイもご確認ください。",
11 |   "store/header.guest-email": "5 分以内に、すべての購入品の詳細について {userEmail} へメールが届きます。{lineBreak}迷惑メールフォルダやプロモーションの受信トレイもご確認ください。",
12 |   "store/header.newpurchase.button": "新しい注文を始める",
13 |   "store/header.print.button": "印刷",
14 |   "store/header.thanks": "お買い上げいただき、ありがとうございます！",
15 |   "store/items.attachments.subscription": "登録",
16 |   "store/items.attachments.subscription.frequency.day": "{frequencyNumber, plural, one {# 日} other {# 日}} ごと",
17 |   "store/items.attachments.subscription.frequency.month": "{frequencyNumber, plural, one {# か月} other {# か月}} ごと",
18 |   "store/items.attachments.subscription.frequency.week": "{frequencyNumber, plural, one {# 週} other {# 週}} ごと",
19 |   "store/items.attachments.subscription.frequency.year": "{frequencyNumber, plural, one {# 年} other {# 年}} ごと",
20 |   "store/items.attachments.subscription.purchaseday": "毎月 {purchaseday} 日に課金",
21 |   "store/order.header.cancel.button": "注文をキャンセル",
22 |   "store/order.header.date": "{orderDate} 日の {orderTime} 時に注文実行",
23 |   "store/order.header.myorders.button": "マイ注文",
24 |   "store/order.header.number": "注文 #{orderId}",
25 |   "store/order.header.receipt": "領収書を表示",
26 |   "store/order.header.seller": "販売元および発送元は {seller}",
27 |   "store/order.header.takeaway.cancel.button": "購入をキャンセル",
28 |   "store/order.header.takeaway.printreceipt.button": "領収書を再印刷",
29 |   "store/order.header.update.button": "注文を更新",
30 |   "store/order.split.n.pickup.n.takeaway": "注文を {deliveries} 回の配送に分割します。それぞれ、{pickups, plural, one {1 つのストアピックアップ} other {, # 個のストアピックアップ}}{takeaways, plural, one {1 つのテイクアウェイ製品} other {そして # 個のテイクアウェイ製品}}となります。このようにして、近くにある項目を早く受け取ることができます。",
31 |   "store/order.split.n.pickup.no.takeaway": "注文を {deliveries} 回の配送に分割します。それぞれ、 {pickups, plural, one {1 つのストアピックアップ} other {# 個のストアピックアップ}} とします。このようにして、近くにある項目を早く受け取ることができます。",
32 |   "store/order.split.no.pickup.n.takeaway": "注文を {deliveries} 回の配送に分割します。それぞれ、 {takeaways, plural, one {1 つのテイクアウェイ製品} other {# 個のテイクアウェイ製品}}となります。このようにして、近くにある項目を早く受け取ることができます。",
33 |   "store/order.split.no.pickup.no.takeaway": "注文を {deliveries} 回の配送に分割します。このようにして、近くにある項目を早く受け取ることができます。",
34 |   "store/order.totals.pickup.free": "無料",
35 |   "store/order.totals.total": "合計",
36 |   "store/page.title": "注文の実行",
37 |   "store/payments.bankinvoice.print": "{paymentSystemName} を開く",
38 |   "store/payments.creditcard": "クレジットカード",
39 |   "store/payments.creditcard.lastDigits": "最後の桁: {lastDigits}",
40 |   "store/payments.debitcard": "デビットカード",
41 |   "store/payments.id": "支払い ID: {id}",
42 |   "store/payments.installments": "({installments}x)",
43 |   "store/payments.transaction.id": "取引 ID: {id}",
44 |   "store/pickup.header.title": "ピックアップする",
45 |   "store/products.isGift": "無料",
46 |   "store/products.quantity": "{quantity, plural, one {# ユニット} other {# ユニット}}",
47 |   "store/shipping.header.title": "配送",
48 |   "store/shipping.header.address": "住所",
49 |   "store/shipping.header.wishlist.address": "住所登録: {giftRegistryName}",
50 |   "store/summary.items": "{itemsQuantity, plural, one {# 項目} other {# 項目}}",
51 |   "store/summary.pickup": "ストアピックアップ",
52 |   "store/summary.pickup.friendlyName": ": {friendlyName}",
53 |   "store/summary.pickup.quantity": "{pickups, plural, one {、1 つのストアピックアップ} other {、# 回のピックアップに分割}}",
54 |   "store/summary.shipping": "配送",
55 |   "store/summary.shipping.address": "{addressStreet}、{addressNumber} 宛",
56 |   "store/summary.shipping.quantity": "{shippings, plural, one {、1 つの配送} other {、 # 回の配送に分割}}",
57 |   "store/takeaway.header.title": "テイクアウェイ",
58 |   "store/warnings.delivery.time": "配送期間は支払いが確認された時から数え始めます。",
59 |   "store/warnings.delivery.tracking": "追跡コードは、配送処理が始まった時にメールで送られます。",
60 |   "store/warnings.order.split": "パートナーが販売する項目があるため、購入は {numOrders} 件の注文に分割されました。ただし、発送の予定に影響はありません。",
61 |   "store/warnings.payment.approval": "支払いの承認には、最短で 5 分、最長で 5 営業日かかることがあります。",
62 |   "store/warnings.payment.bankInvoice.approval": "{paymentSystemName} の支払い承認は最大 3 営業日かかることがあります。支払い期限が過ぎると、注文は自動的にキャンセルされます。",
63 |   "store/warnings.payment.bankInvoice.value": "下記のデータに従い、{paymentValue} の支払いを遅くとも期日までにしてください。",
64 |   "store/warnings.payment.bankInvoice.value.duedate": "下記のデータに従い、{paymentValue} の支払いを遅くとも {paymentDueDate} までにしてください。",
65 |   "store/warnings.pickup.time": "ストアのピックアップ期間は支払いが確認された時から始まります。",
66 |   "store/warnings.subscription": "項目の購入とは別に、注文の中には 1 つ以上の登録が含まれています。",
67 |   "store/order.error.invalid.title": "ページが見つかりません",
68 |   "store/order.error.invalid.message": "探しているページは存在しないようです。ホームページへ戻るようお勧めします。",
69 |   "store/order.error.not-logged-in.title": "権限がありません",
70 |   "store/order.error.not-logged-in.message": "このページへアクセスする権限がないようです。ログインしてから、もう一度アクセスしてみてください。",
71 |   "store/go-to-login": "ログインページに進む",
72 |   "store/go-to-home": "ホームページに進む",
73 |   "store/paymentData.connectorResponse.mb.entity": "エンティティ",
74 |   "store/paymentData.connectorResponse.mb.reference": "参照"
75 | }
76 | 


--------------------------------------------------------------------------------
/react/utils/index.ts:
--------------------------------------------------------------------------------
  1 | import get from 'lodash/get'
  2 | import flow from 'lodash/flow'
  3 | import toPairs from 'lodash/toPairs'
  4 | import filter from 'lodash/filter'
  5 | import map from 'lodash/map'
  6 | import { defineMessages } from 'react-intl'
  7 | 
  8 | export interface PaymentGroupInfo {
  9 |   barCodeNumber: string | null
 10 |   barCodePNG: string | null
 11 |   dueDate: string | null
 12 |   paymentGroup: string
 13 |   paymentSystemName: string
 14 |   url: string | null
 15 |   value: number
 16 | }
 17 | 
 18 | const messages = defineMessages({
 19 |   frequencyDay: {
 20 |     id: 'store/items.attachments.subscription.frequency.day',
 21 |     defaultMessage: '',
 22 |   },
 23 |   frequencyMonth: {
 24 |     id: 'store/items.attachments.subscription.frequency.month',
 25 |     defaultMessage: '',
 26 |   },
 27 |   frequencyWeek: {
 28 |     id: 'store/items.attachments.subscription.frequency.week',
 29 |     defaultMessage: '',
 30 |   },
 31 |   frequencyYear: {
 32 |     id: 'store/items.attachments.subscription.frequency.year',
 33 |     defaultMessage: '',
 34 |   },
 35 |   purchaseDay: {
 36 |     id: 'store/items.attachments.subscription.purchaseday',
 37 |     defaultMessage: '',
 38 |   },
 39 | })
 40 | 
 41 | function hasValueAndIsNotPrivate(connectorResponses: ConnectorResponses) {
 42 |   return filter(
 43 |     connectorResponses,
 44 |     (c) => c[0] && c[1] && c[0].charAt(0) !== '_'
 45 |   )
 46 | }
 47 | 
 48 | function toKeyValue(connectorResponses: ConnectorResponses) {
 49 |   return map(connectorResponses, (c) => ({ key: c[0], value: c[1] }))
 50 | }
 51 | 
 52 | export function transformConnectorResponsesToArray(
 53 |   connectorResponses: ConnectorResponses
 54 | ): ConnectorResponse[] {
 55 |   return flow([toPairs, hasValueAndIsNotPrivate, toKeyValue])(
 56 |     connectorResponses
 57 |   )
 58 | }
 59 | 
 60 | export function getPaymentMethodsInfoFromOrder(
 61 |   order: Order
 62 | ): PaymentGroupInfo[] {
 63 |   const { transactions } = order.paymentData
 64 | 
 65 |   if (!transactions || transactions.length === 0) {
 66 |     return []
 67 |   }
 68 |   // eslint-disable-next-line prefer-destructuring
 69 |   const { payments } = transactions[0]
 70 | 
 71 |   if (!payments || payments.length === 0) {
 72 |     return []
 73 |   }
 74 | 
 75 |   const paymentsGroupInfo = payments.map(
 76 |     ({
 77 |       bankIssuedInvoiceBarCodePNG,
 78 |       dueDate,
 79 |       group,
 80 |       paymentSystemName,
 81 |       url,
 82 |       value,
 83 |       bankIssuedInvoiceIdentificationNumber,
 84 |     }) =>
 85 |       ({
 86 |         barCodeNumber: bankIssuedInvoiceIdentificationNumber,
 87 |         barCodePNG: bankIssuedInvoiceBarCodePNG,
 88 |         paymentGroup: group,
 89 |         dueDate,
 90 |         paymentSystemName,
 91 |         url,
 92 |         value,
 93 |       } as PaymentGroupInfo)
 94 |   )
 95 | 
 96 |   return paymentsGroupInfo
 97 | }
 98 | 
 99 | export function isSubscription(attachmentItem: Attachment) {
100 |   return attachmentItem.name.indexOf('vtex.subscription') === 0
101 | }
102 | 
103 | export function getSubscriptionInfo(attachmentItem: Attachment, intl: any) {
104 |   if (!isSubscription(attachmentItem)) {
105 |     return {}
106 |   }
107 |   const vtexSubsPrefix = 'vtex.subscription.key.'
108 |   const subsFrequency: string =
109 |     attachmentItem.content[`${vtexSubsPrefix}frequency`]
110 |   const subsPurchaseDay = attachmentItem.content[`${vtexSubsPrefix}purchaseday`]
111 |   const subsValidityBegin =
112 |     attachmentItem.content[`${vtexSubsPrefix}validity.begin`]
113 |   const subsValidityEnd =
114 |     attachmentItem.content[`${vtexSubsPrefix}validity.end`]
115 | 
116 |   // This matches a key in the format: "3 months"
117 |   const numberPeriodRegex = /([\d]{1,3}) ([A-z]{1,20})/
118 |   // This matches a key in the format: "weekly"
119 |   const wordlyPeriodRegex = /([A-z]{1,20})/
120 | 
121 |   const subsFrequencyString = numberPeriodRegex.test(subsFrequency)
122 |     ? intl.formatMessage(
123 |         {
124 |           id: `store/items.attachments.subscription.frequency.${
125 |             (numberPeriodRegex.exec(subsFrequency) ?? [])[2]
126 |           }`,
127 |         },
128 |         {
129 |           frequencyNumber: parseInt(
130 |             (numberPeriodRegex.exec(subsFrequency) ?? [])[1],
131 |             10
132 |           ),
133 |         }
134 |       )
135 |     : intl.formatMessage({
136 |         id: `store/items.attachments.subscription.frequency.${
137 |           (wordlyPeriodRegex.exec(subsFrequency) ?? [])[1]
138 |         }`,
139 |       })
140 | 
141 |   const subsPurchaseDayString =
142 |     subsPurchaseDay !== ''
143 |       ? intl.formatMessage(messages.purchaseDay, {
144 |           purchaseday: subsPurchaseDay,
145 |         })
146 |       : null
147 | 
148 |   return {
149 |     subsFrequency: subsFrequencyString,
150 |     subsPurchaseDay: subsPurchaseDayString,
151 |     subsValidityBegin,
152 |     subsValidityEnd,
153 |   }
154 | }
155 | 
156 | export function parseBankInvoiceUrl(url: string) {
157 |   const isEncrypted = !!url.match(/(\*.\*.)+\*\w\*/g)
158 |   if (!isEncrypted) return url
159 | 
160 |   const loginUrl = getLoginUrl()
161 | 
162 |   return loginUrl
163 | }
164 | 
165 | export function getLoginUrl() {
166 |   return `${get(
167 |     window,
168 |     '__RUNTIME__.rootPath',
169 |     ''
170 |   )}/login?returnUrl=${encodeURIComponent(
171 |     window.location.pathname + window.location.search
172 |   )}`
173 | }
174 | 
175 | export function getTotals(totals: OrderItemTotal[]) {
176 |   const newTotals: OrderItemTotal[] = []
177 |   const taxes: OrderItemTotal[] = []
178 | 
179 |   const totalTaxes = totals.reduce((sum, total) => {
180 |     if (total.id === 'CustomTax') {
181 |       taxes.push({ ...total })
182 |       return sum + total.value
183 |     }
184 |     newTotals.push({ ...total })
185 |     return sum
186 |   }, 0)
187 | 
188 |   const taxTotal = newTotals.findIndex(({ id }) => id === 'Tax')
189 |   newTotals[taxTotal].value += totalTaxes
190 | 
191 |   return [newTotals, taxes]
192 | }
193 | 


--------------------------------------------------------------------------------
/react/mocks/orderWithGift.ts:
--------------------------------------------------------------------------------
  1 | export const orderWithGift = {
  2 |   products: [
  3 |     {
  4 |       id: '36',
  5 |       skuName:
  6 |         'Lavatrice a libera installazione a carica frontale Whirlpool: 8 kg - FWG TTYT28 WS IT',
  7 |       name:
  8 |         'Lavatrice a libera installazione a carica frontale Whirlpool: 8 kg - FWG TTYT28 WS IT',
  9 |       productId: '36',
 10 |       price: 36900,
 11 |       listPrice: 36900,
 12 |       isGift: false,
 13 |       parentItemIndex: null,
 14 |       quantity: 4,
 15 |       attachments: [],
 16 |       bundleItems: [],
 17 |       seller: '1',
 18 |       imageUrl:
 19 |         'http://itwhirlpoolqa.vteximg.com.br/arquivos/ids/161323-55-55/FWG-TTYT28-WS-IT-Lavatrici-1.jpg?v=637469210311530000',
 20 |       detailUrl:
 21 |         '/lavatrice-a-libera-installazione-a-carica-frontale-whirlpool-8-kg-fwg-ttyt28-ws-it-859991535410/p',
 22 |       measurementUnit: 'un',
 23 |       unitMultiplier: 1,
 24 |       __typename: 'OrderItem',
 25 |     },
 26 |     {
 27 |       id: '94',
 28 |       skuName: 'Whirlpool BEST ZEN 8 - 8 kg: la lavatrice più silenziosa',
 29 |       name: 'Whirlpool BEST ZEN 8 - 8 kg: la lavatrice più silenziosa',
 30 |       productId: '94',
 31 |       price: 42400,
 32 |       listPrice: 42400,
 33 |       isGift: false,
 34 |       parentItemIndex: null,
 35 |       quantity: 1,
 36 |       attachments: [],
 37 |       bundleItems: [
 38 |         {
 39 |           id: '49',
 40 |           attachments: [],
 41 |           name: 'W1',
 42 |           price: 0,
 43 |           quantity: 1,
 44 |           imageUrl: null,
 45 |           measurementUnit: 'un',
 46 |           unitMultiplier: 1,
 47 |           __typename: 'BundleItem',
 48 |         },
 49 |       ],
 50 |       seller: '1',
 51 |       imageUrl:
 52 |         'http://itwhirlpoolqa.vteximg.com.br/arquivos/ids/161832-55-55/BEST-ZEN-8-Lavatrici-1.jpg?v=637469211354900000',
 53 |       detailUrl:
 54 |         '/whirlpool-best-zen-8-8-kg-la-lavatrice-piu-silenziosa-859991569790/p',
 55 |       measurementUnit: 'un',
 56 |       unitMultiplier: 1,
 57 |       __typename: 'OrderItem',
 58 |     },
 59 |     {
 60 |       id: '60',
 61 |       skuName:
 62 |         "Lavatrice a libera installazione a carica dall'alto Whirlpool: 7 kg - TDLR 70212",
 63 |       name:
 64 |         "Lavatrice a libera installazione a carica dall'alto Whirlpool: 7 kg - TDLR 70212",
 65 |       productId: '60',
 66 |       price: 34600,
 67 |       listPrice: 34600,
 68 |       isGift: false,
 69 |       parentItemIndex: null,
 70 |       quantity: 1,
 71 |       attachments: [],
 72 |       bundleItems: [],
 73 |       seller: '1',
 74 |       imageUrl:
 75 |         'http://itwhirlpoolqa.vteximg.com.br/arquivos/ids/161542-55-55/TDLR-70212-Lavatrici-1.jpg?v=637469210759430000',
 76 |       detailUrl:
 77 |         '/lavatrice-a-libera-installazione-a-carica-dallalto-whirlpool-7-kg-tdlr-70212-859991550870/p',
 78 |       measurementUnit: 'un',
 79 |       unitMultiplier: 1,
 80 |       __typename: 'OrderItem',
 81 |     },
 82 |     {
 83 |       id: '95',
 84 |       skuName: 'Whirlpool SUPREME 8415 - 8 kg: la lavatrice più silenziosa',
 85 |       name: 'Whirlpool SUPREME 8415 - 8 kg: la lavatrice più silenziosa',
 86 |       productId: '95',
 87 |       price: 42900,
 88 |       listPrice: 42900,
 89 |       isGift: false,
 90 |       parentItemIndex: null,
 91 |       quantity: 2,
 92 |       attachments: [],
 93 |       bundleItems: [],
 94 |       seller: '1',
 95 |       imageUrl:
 96 |         'http://itwhirlpoolqa.vteximg.com.br/arquivos/ids/161848-55-55/SUPREME-8415-Lavatrici-1.jpg?v=637469211385570000',
 97 |       detailUrl:
 98 |         '/whirlpool-supreme-8415-8-kg-la-lavatrice-piu-silenziosa-859991570960/p',
 99 |       measurementUnit: 'un',
100 |       unitMultiplier: 1,
101 |       __typename: 'OrderItem',
102 |     },
103 |     {
104 |       id: '12',
105 |       skuName:
106 |         'Lavatrice a libera installazione a carica frontale Whirlpool: 12 kg - FSCR12421',
107 |       name:
108 |         'Lavatrice a libera installazione a carica frontale Whirlpool: 12 kg - FSCR12421',
109 |       productId: '12',
110 |       price: 56900,
111 |       listPrice: 103900,
112 |       isGift: false,
113 |       parentItemIndex: null,
114 |       quantity: 1,
115 |       attachments: [],
116 |       bundleItems: [],
117 |       seller: '1',
118 |       imageUrl:
119 |         'http://itwhirlpoolqa.vteximg.com.br/arquivos/ids/161206-55-55/FSCR12421-Lavatrici-1.jpg?v=637469210076870000',
120 |       detailUrl:
121 |         '/lavatrice-a-libera-installazione-a-carica-frontale-whirlpool-12-kg-fscr12421-859207838010/p',
122 |       measurementUnit: 'un',
123 |       unitMultiplier: 1,
124 |       __typename: 'OrderItem',
125 |     },
126 |     {
127 |       id: '72',
128 |       skuName:
129 |         'Lavatrice a libera installazione a carica frontale Whirlpool: 9 kg - FWF91283W EU',
130 |       name:
131 |         'Lavatrice a libera installazione a carica frontale Whirlpool: 9 kg - FWF91283W EU',
132 |       productId: '72',
133 |       price: 33700,
134 |       listPrice: 49900,
135 |       isGift: false,
136 |       parentItemIndex: null,
137 |       quantity: 2,
138 |       attachments: [],
139 |       bundleItems: [],
140 |       seller: '1',
141 |       imageUrl:
142 |         'http://itwhirlpoolqa.vteximg.com.br/arquivos/ids/161661-55-55/FWF91283W-EU-Lavatrici-1.jpg?v=637469211004800000',
143 |       detailUrl:
144 |         '/lavatrice-a-libera-installazione-a-carica-frontale-whirlpool-9-kg-fwf91283w-eu-859234118010/p',
145 |       measurementUnit: 'un',
146 |       unitMultiplier: 1,
147 |       __typename: 'OrderItem',
148 |     },
149 |     {
150 |       id: '1',
151 |       skuName:
152 |         'Microonde da incasso Whirlpool: colore acciaio inox - AMW 735/IXL',
153 |       name: 'Microonde da incasso Whirlpool: colore acciaio inox - AMW 735/IXL',
154 |       productId: '1',
155 |       price: 27200,
156 |       listPrice: 116754,
157 |       isGift: true,
158 |       parentItemIndex: null,
159 |       quantity: 1,
160 |       attachments: [],
161 |       bundleItems: [],
162 |       seller: '1',
163 |       imageUrl:
164 |         'http://itwhirlpoolqa.vteximg.com.br/arquivos/ids/161125-55-55/AMW-735IXL-Lavatrici-1.jpg?v=637469209908500000',
165 |       detailUrl:
166 |         '/microonde-da-incasso-whirlpool-colore-acciaio-inox-amw-735ixl-858773538910/p',
167 |       measurementUnit: 'un',
168 |       unitMultiplier: 1,
169 |       __typename: 'OrderItem',
170 |     },
171 |   ],
172 | }
173 | 


--------------------------------------------------------------------------------
/messages/ar.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "store/common.header.counter": " - رقم {index} من {numPackages}",
 3 |   "store/header.bankinvoice.copy": "نسخ",
 4 |   "store/header.bankinvoice.embeded.collapse": "طي",
 5 |   "store/header.bankinvoice.embeded.expand": "توسيع",
 6 |   "store/header.bankinvoice.header": "معلومات حول {paymentSystemName} الخاص بك",
 7 |   "store/header.bankinvoice.print": "طباعة {paymentSystemName}",
 8 |   "store/header.bankinvoice.help": "هل تجد صعوبة في مشاهد {paymentSystemName} الخاص بك؟",
 9 |   "store/header.bankinvoice.tooltip": "{paymentSystemName} الخاص بك يعمل بشكل طبيعي. انقر فوق {message} أو انسخ الرمز الشريطي الخاص بها لمتابعة الدفع.",
10 |   "store/header.email": "في غضون 5 دقائق، ستتلقى رسالة بريد إلكتروني على {userEmail} تحتوي على جميع تفاصيل الشراء. {lineBreak} تذكر أن تتحقق من البريد العشوائي أو صندوق الوارد الخاص بالعروض الترويجية",
11 |   "store/header.guest-email": "في غضون 5 دقائق، ستتلقى رسالة بريد إلكتروني على {userEmail} تحتوي على جميع تفاصيل الشراء. {lineBreak} تذكر أن تتحقق من البريد العشوائي أو صندوق الوارد الخاص بالعروض الترويجية",
12 |   "store/header.newpurchase.button": "بدء طلب جديد",
13 |   "store/header.print.button": "طباعة",
14 |   "store/header.thanks": "شكرًا لك على شرائك!",
15 |   "store/items.attachments.subscription": "الإشتراك",
16 |   "store/items.attachments.subscription.frequency.day": "كل {frequencyNumber, plural, one {# يوم} other {# أيام}}",
17 |   "store/items.attachments.subscription.frequency.month": "كل {frequencyNumber, plural, one {# شهر} other {# أشهر}}",
18 |   "store/items.attachments.subscription.frequency.week": "كل {frequencyNumber, plural, one {# أسبوع} other {# أسابيع}}",
19 |   "store/items.attachments.subscription.frequency.year": "كل {frequencyNumber, plural, one {# سنة} other {# سنوات}}",
20 |   "store/items.attachments.subscription.purchaseday": "يتم تحصيل الرسوم شهريًا يوم {purchaseday}",
21 |   "store/order.header.cancel.button": "إلغاء الطلب",
22 |   "store/order.header.date": "تم بتاريخ {orderDate} على الساعة {orderTime}",
23 |   "store/order.header.myorders.button": "طلباتي",
24 |   "store/order.header.number": "رقم الطلب #{orderId}",
25 |   "store/order.header.receipt": "عرض الايصال",
26 |   "store/order.header.seller": "تم البيع والتسليم بواسطة {seller}",
27 |   "store/order.header.takeaway.cancel.button": "إلغاء عملية الشراء",
28 |   "store/order.header.takeaway.printreceipt.button": "إعادة طباعة الايصال",
29 |   "store/order.header.update.button": "تحديث الطلب",
30 |   "store/order.split.n.pickup.n.takeaway": "نقسم طلبك إلى {deliveries} عمليات تسليم،{pickups, plural, one {، استلام من متجر واحد} other {، # استلامات من المتجر}}{takeaways, plural, one {ومنتج لأخذه بعيدًا} other {و # منتجات لأخذها بعيدًا}}. بهذه الطريقة، ستتلقى العناصر الأقرب إليك بشكل أسرع.",
31 |   "store/order.split.n.pickup.no.takeaway": "نقسم طلبك إلى {deliveries} عمليات تسليم،{pickups, plural, one {، واستلام من متجر} other {و # استلامات من المتجر}}. بهذه الطريقة، ستتلقى العناصر الأقرب إليك بشكل أسرع.",
32 |   "store/order.split.no.pickup.n.takeaway": "نقسم طلبك إلى {deliveries} عمليات تسليم،{takeaways, plural, one {، ومنتج لأخذه بعيدًا} other {و # منتجات لأخذها بعيدًا}}. بهذه الطريقة، ستتلقى العناصر الأقرب إليك بشكل أسرع.",
33 |   "store/order.split.no.pickup.no.takeaway": "نقسم طلبك إلى {deliveries} عمليات تسليم. بهذه الطريقة، ستتلقى العناصر الأقرب إليك بشكل أسرع.",
34 |   "store/order.totals.pickup.free": "مجانًا",
35 |   "store/order.totals.total": "المجموع",
36 |   "store/page.title": "تم إجراء الطلب",
37 |   "store/payments.bankinvoice.print": "فتح {paymentSystemName}",
38 |   "store/payments.creditcard": "بطاقة الإئتمان",
39 |   "store/payments.creditcard.lastDigits": "آخر الأرقام: {lastDigits}",
40 |   "store/payments.debitcard": "بطاقة الخصم",
41 |   "store/payments.id": "معرّف الدفع: {id}",
42 |   "store/payments.installments": "({installments}x)",
43 |   "store/payments.transaction.id": "معرّف المعاملة: {id}",
44 |   "store/pickup.header.title": "الإستلام",
45 |   "store/products.isGift": "مجانًا",
46 |   "store/products.quantity": "{quantity, plural, one {# وحدة} other {# وحدات}}",
47 |   "store/shipping.header.title": "التسليم",
48 |   "store/shipping.header.address": "العنوان",
49 |   "store/shipping.header.wishlist.address": "العنوان من: {giftRegistryName}",
50 |   "store/summary.items": "{itemsQuantity, plural, one {# عنصر} other {# عناصر}}",
51 |   "store/summary.pickup": "استلام من المتجر",
52 |   "store/summary.pickup.friendlyName": "في {friendlyName}",
53 |   "store/summary.pickup.quantity": "{pickups, plural, one {استلام واحد في المتجر} other {، تقسيم إلى # استلامات}}",
54 |   "store/summary.shipping": "التسليم",
55 |   "store/summary.shipping.address": "في العنوان {addressStreet}، {addressNumber}",
56 |   "store/summary.shipping.quantity": "{shippings, plural, one {باستلام واحد} other {، تقسيم إلى # استلامات}}",
57 |   "store/takeaway.header.title": "للأخذ بعيدًا",
58 |   "store/warnings.delivery.time": "تبدأ فترة التسليم في العد من لحظة تأكيد الدفع الخاص بك.",
59 |   "store/warnings.delivery.tracking": "سيتم إرسال رمز تتبع إلى بريدك الإلكتروني عندما تبدأ عملية التسليم.",
60 |   "store/warnings.order.split": "تم تقسيم مشترياتك إلى {numOrders} طلبات حيث تم بيع بعض العناصر من قبل الشركاء. لكن هذا لا يؤثر على تقديرات الشحن.",
61 |   "store/warnings.payment.approval": "قد تستغرق الموافقة على الدفع من 5 دقائق إلى 5 أيام عمل.",
62 |   "store/warnings.payment.bankInvoice.approval": "قد تستغرق الموافقة على الدفع لـ {paymentSystemName} ما يصل إلى 3 أيام عمل. إذا لم يكن الدفع مستحقًا، فسيتم إلغاء طلبك تلقائيًا.",
63 |   "store/warnings.payment.bankInvoice.value": "يُرجى إجراء دفعة بقيمة {paymentValue} حتى تاريخ الاستحقاق وفقًا للبيانات الواردة أدناه.",
64 |   "store/warnings.payment.bankInvoice.value.duedate": "يُرجى إجراء دفعة بقيمة {paymentValue} حتى تاريخ {paymentDueDate} وفقًا للبيانات الواردة أدناه.",
65 |   "store/warnings.pickup.time": "تبدأ فترة الاستلام من المتجر من لحظة تأكيد الدفع الخاص بك.",
66 |   "store/warnings.subscription": "إلى جانب العناصر المشتراة، يتضمن طلبك اشتراكًا واحدًا أو أكثر.",
67 |   "store/order.error.invalid.title": "صفحة غير متوفرة",
68 |   "store/order.error.invalid.message": "يبدو أن الصفحة التي تبحث عنها غير موجودة. نقترح عليك العودة إلى الصفحة الرئيسية.",
69 |   "store/order.error.not-logged-in.title": "ليس لديك إذن",
70 |   "store/order.error.not-logged-in.message": "يبدو أنه ليس لديك إذن للوصول إلى هذه الصفحة. حاول تسجيل الدخول والوصول مرة أخرى.",
71 |   "store/go-to-login": "انتقل لصفحة الدخول",
72 |   "store/go-to-home": "انتقل للصفحة الرئيسية",
73 |   "store/paymentData.connectorResponse.mb.entity": "المؤسسة",
74 |   "store/paymentData.connectorResponse.mb.reference": "المرجع"
75 | }
76 | 


--------------------------------------------------------------------------------
/messages/en.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "store/common.header.counter": " - n˚ {index} of {numPackages}",
 3 |   "store/header.bankinvoice.copy": "Copy",
 4 |   "store/header.bankinvoice.embeded.collapse": "Collapse",
 5 |   "store/header.bankinvoice.embeded.expand": "Expand",
 6 |   "store/header.bankinvoice.header": "Information on your {paymentSystemName}",
 7 |   "store/header.bankinvoice.print": "Print {paymentSystemName}",
 8 |   "store/header.bankinvoice.help": "Can't see your {paymentSystemName}?",
 9 |   "store/header.bankinvoice.tooltip": "Your {paymentSystemName} is working normally. Click on {message} or copy its barcode to proceed with payment.",
10 |   "store/header.email": "Within 5 minutes, you will receive an email at {userEmail} with all of your purchase details.{lineBreak}Remember to check your spam or promotions inbox",
11 |   "store/header.guest-email": "Within 5 minutes, you will receive an email at {userEmail} with all of your purchase details.{lineBreak}Remember to check your spam or promotions inbox",
12 |   "store/header.newpurchase.button": "Start new order",
13 |   "store/header.print.button": "Print",
14 |   "store/header.thanks": "Thank you for your purchase!",
15 |   "store/items.attachments.subscription": "Subscription",
16 |   "store/items.attachments.subscription.frequency.day": "Every {frequencyNumber, plural, one {# day} other {# days}}",
17 |   "store/items.attachments.subscription.frequency.month": "Every {frequencyNumber, plural, one {# month} other {# months}}",
18 |   "store/items.attachments.subscription.frequency.week": "Every {frequencyNumber, plural, one {# week} other {# weeks}}",
19 |   "store/items.attachments.subscription.frequency.year": "Every {frequencyNumber, plural, one {# year} other {# years}}",
20 |   "store/items.attachments.subscription.purchaseday": "Charged monthly at day {purchaseday}",
21 |   "store/order.header.cancel.button": "Cancel order",
22 |   "store/order.header.date": "Placed on {orderDate} at {orderTime}",
23 |   "store/order.header.myorders.button": "My Orders",
24 |   "store/order.header.number": "Order #{orderId}",
25 |   "store/order.header.receipt": "View receipt",
26 |   "store/order.header.seller": "Sold and delivered by {seller}",
27 |   "store/order.header.takeaway.cancel.button": "Cancel purchase",
28 |   "store/order.header.takeaway.printreceipt.button": "Reprint receipt",
29 |   "store/order.header.update.button": "Update order",
30 |   "store/order.split.n.pickup.n.takeaway": "We split your order in {deliveries} deliveries,{pickups, plural, one {, one store pickup} other {, # store pickups}}{takeaways, plural, one {and a take away product} other {and # take away products}}. That way, you will receive items that are closer to you faster.",
31 |   "store/order.split.n.pickup.no.takeaway": "We split your order in {deliveries} deliveries{pickups, plural, one {and a store pickup} other {and # store pickups}}. That way, you will receive items that are closer to you faster.",
32 |   "store/order.split.no.pickup.n.takeaway": "We split your order in {deliveries} deliveries{takeaways, plural, one {and one product to take away} other {and # products to take away}}. That way, you will receive items that are closer to you faster.",
33 |   "store/order.split.no.pickup.no.takeaway": "We split your order in {deliveries} deliveries. That way, you will receive items that are closer to you faster.",
34 |   "store/order.totals.pickup.free": "Free",
35 |   "store/order.totals.total": "Total",
36 |   "store/page.title": "Order Placed",
37 |   "store/payments.bankinvoice.print": "Open {paymentSystemName}",
38 |   "store/payments.creditcard": "Credit card",
39 |   "store/payments.creditcard.lastDigits": "Last digits: {lastDigits}",
40 |   "store/payments.debitcard": "Debit card",
41 |   "store/payments.id": "Payment ID: {id}",
42 |   "store/payments.installments": "({installments}x)",
43 |   "store/payments.transaction.id": "Transaction ID: {id}",
44 |   "store/pickup.header.title": "Pickup",
45 |   "store/products.isGift": "Free",
46 |   "store/products.quantity": "{quantity, plural, one {# unit} other {# units}}",
47 |   "store/shipping.header.title": "Delivery",
48 |   "store/shipping.header.address": "Address",
49 |   "store/shipping.header.wishlist.address": "Address from: {giftRegistryName}",
50 |   "store/summary.items": "{itemsQuantity, plural, one {# item} other {# items}}",
51 |   "store/summary.pickup": "Store Pickup",
52 |   "store/summary.pickup.friendlyName": "At {friendlyName}",
53 |   "store/summary.pickup.quantity": "{pickups, plural, one {, in one store pickup} other {, split into # pickups}}",
54 |   "store/summary.shipping": "Delivery",
55 |   "store/summary.shipping.address": "At {addressStreet}, {addressNumber}",
56 |   "store/summary.shipping.quantity": "{shippings, plural, one {, in one delivery} other {, split into # deliveries}}",
57 |   "store/takeaway.header.title": "Take Away",
58 |   "store/warnings.delivery.time": "The delivery period starts to count from the moment your payment is confirmed.",
59 |   "store/warnings.delivery.tracking": "A tracking code will be sent to your email when the delivery process begins.",
60 |   "store/warnings.order.split": "Your purchase was split into {numOrders} orders as some of the items were sold by partners. But this does not affect shipping estimates.",
61 |   "store/warnings.payment.approval": "Payment approval may take from 5 minutes up to 5 business days.",
62 |   "store/warnings.payment.bankInvoice.approval": "Payment approval for {paymentSystemName} may take up to 3 bussiness days. If payment is not due, your order will be automatically cancelled.",
63 |   "store/warnings.payment.bankInvoice.value": "Please make a payment of {paymentValue} up to the due date according to the data below.",
64 |   "store/warnings.payment.bankInvoice.value.duedate": "Please make a payment of {paymentValue} up to {paymentDueDate} according to the data below.",
65 |   "store/warnings.pickup.time": "The store pickup period starts from the moment your payment is confirmed.",
66 |   "store/warnings.subscription": "Besides items purchased, your order includes one or more subscriptions.",
67 |   "store/order.error.invalid.title": "Page not found",
68 |   "store/order.error.invalid.message": "Seems like the page you were looking for doesn't exist. We suggest that you return to the home page.",
69 |   "store/order.error.not-logged-in.title": "You don't have permission",
70 |   "store/order.error.not-logged-in.message": "Seems like you don't have permission to access this page. Try to login and access again.",
71 |   "store/go-to-login": "Go to login page",
72 |   "store/go-to-home": "Go to home page",
73 |   "store/paymentData.connectorResponse.mb.entity": "Entity",
74 |   "store/paymentData.connectorResponse.mb.reference": "Reference"
75 | }
76 | 


--------------------------------------------------------------------------------
/messages/da.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "store/common.header.counter": " - n˚ {index} af {numPackages}",
 3 |   "store/header.bankinvoice.copy": "Kopier",
 4 |   "store/header.bankinvoice.embeded.collapse": "Skjul alle",
 5 |   "store/header.bankinvoice.embeded.expand": "Udvid",
 6 |   "store/header.bankinvoice.header": "Informationer om din {paymentSystemName}",
 7 |   "store/header.bankinvoice.print": "Udskriv {paymentSystemName}",
 8 |   "store/header.bankinvoice.help": "Kan du ikke set dit {paymentSystemName}?",
 9 |   "store/header.bankinvoice.tooltip": "Dit {paymentSystemName} virker normalt. Klik på {message} eller kopier stregkoden for at fortsætte med betalingen.",
10 |   "store/header.email": "Inden for 5 minutter vil du modtage en e-mail på {userEmail} med alle dine købsdetaljer.{lineBreak}Husk at kontrollere din spam eller promoveringsindbakke",
11 |   "store/header.guest-email": "Inden for 5 minutter vil du modtage en e-mail på {userEmail} med alle dine købsdetaljer.{lineBreak}Husk at kontrollere din spam eller promoveringsindbakke",
12 |   "store/header.newpurchase.button": "Start ny ordre",
13 |   "store/header.print.button": "Udskriv",
14 |   "store/header.thanks": "Tak for dit køb!",
15 |   "store/items.attachments.subscription": "Abonnement",
16 |   "store/items.attachments.subscription.frequency.day": "Hver {frequencyNumber, plural, one {# dag} other {# dage}}",
17 |   "store/items.attachments.subscription.frequency.month": "Hver {frequencyNumber, plural, one {# måned} other {# måneder}}",
18 |   "store/items.attachments.subscription.frequency.week": "Hver {frequencyNumber, plural, one {# uge} other {# uger}}",
19 |   "store/items.attachments.subscription.frequency.year": "Hver {frequencyNumber, plural, one {# år} other {# år}}",
20 |   "store/items.attachments.subscription.purchaseday": "Opkræves månedligt på dag {purchaseday}",
21 |   "store/order.header.cancel.button": "Annuller ordre",
22 |   "store/order.header.date": "Placeret den {orderDate} kl {orderTime}",
23 |   "store/order.header.myorders.button": "Mine ordrer",
24 |   "store/order.header.number": "Ordre #{orderId}",
25 |   "store/order.header.receipt": "Vis kvittering",
26 |   "store/order.header.seller": "Sælges og leveres af {seller}",
27 |   "store/order.header.takeaway.cancel.button": "Annuller køb",
28 |   "store/order.header.takeaway.printreceipt.button": "Udskriv kvittering igen",
29 |   "store/order.header.update.button": "Opdater ordre",
30 |   "store/order.split.n.pickup.n.takeaway": "Vi deler din ordre i {deliveries} leveringer,{pickups, plural, one {, en butiksafhentning} other {, # store pickups}}{takeaways, plural, one {og et takeaway-produkt} other {og # takeaway-produkter}}. På den måde vil du modtage varer, der er tættere på dig hurtigere.",
31 |   "store/order.split.n.pickup.no.takeaway": "Vi deler din ordre i {deliveries} leveringer{pickups, plural, one {og en butiksafhentning} other {og # butiksafhentninger}}. På den måde vil du modtage varer, der er tættere på dig hurtigere.",
32 |   "store/order.split.no.pickup.n.takeaway": "Vi deler din ordre i {deliveries} leveringer{takeaways, plural, one {og et produkt som takeaway} other {og # produkter til takeaway}}. På den måde vil du modtage varer, der er tættere på dig hurtigere.",
33 |   "store/order.split.no.pickup.no.takeaway": "Vi deler din ordre i {deliveries} leveringer. That way, you will receive items that are closer to you faster.",
34 |   "store/order.totals.pickup.free": "Gratis",
35 |   "store/order.totals.total": "I alt",
36 |   "store/page.title": "Ordre placeret",
37 |   "store/payments.bankinvoice.print": "Åben {paymentSystemName}",
38 |   "store/payments.creditcard": "Kreditkort",
39 |   "store/payments.creditcard.lastDigits": "Sidste cifre {lastDigits}",
40 |   "store/payments.debitcard": "Debit card",
41 |   "store/payments.id": "BetalingsID: {id}",
42 |   "store/payments.installments": "({installments}x)",
43 |   "store/payments.transaction.id": "TransaktionsID: {id}",
44 |   "store/pickup.header.title": "Afhent",
45 |   "store/products.isGift": "Gratis",
46 |   "store/products.quantity": "{quantity, plural, one {# enhed} other {# enheder}}",
47 |   "store/shipping.header.title": "Levering",
48 |   "store/shipping.header.address": "Adresse",
49 |   "store/shipping.header.wishlist.address": "Adresse fra: {giftRegistryName}",
50 |   "store/summary.items": "{itemsQuantity, plural, one {# vare} other {# varer}}",
51 |   "store/summary.pickup": "Butiksafhentning",
52 |   "store/summary.pickup.friendlyName": "ved {friendlyName}",
53 |   "store/summary.pickup.quantity": "{pickups, plural, one {, i en butiksafhentning} other {, opdel i # afhentninger}}",
54 |   "store/summary.shipping": "Levering",
55 |   "store/summary.shipping.address": "På {addressStreet}, {addressNumber}",
56 |   "store/summary.shipping.quantity": "{shippings, plural, one {, i en levering} other {, opdel i # leveringer}}",
57 |   "store/takeaway.header.title": "Afhentning",
58 |   "store/warnings.delivery.time": "Leveringsperioden begynder at tælle fra det øjeblik, din betaling er bekræftet.",
59 |   "store/warnings.delivery.tracking": "En sporingskode sendes til din e-mail, når leveringsprocessen begynder.",
60 |   "store/warnings.order.split": "Dit køb blev opdelt i {numOrders} ordrer, da nogle af varerne blev solgt af partnere. Men dette påvirker ikke forsendelsesestimater.",
61 |   "store/warnings.payment.approval": "Betalingsgodkendelse kan tage fra 5 minutter op til 5 hverdage.",
62 |   "store/warnings.payment.bankInvoice.approval": "Betalingsgodkendelse for {paymentSystemName} kan tage op til 3 hverdage. Om förfallodagen inte har passerats kommer din beställning att annulleras automatiskt.",
63 |   "store/warnings.payment.bankInvoice.value": "Foretag en betaling af {paymentValue} frem til forfaldsdagen i henhold til nedenstående data.",
64 |   "store/warnings.payment.bankInvoice.value.duedate": "Foretag en betaling af {paymentValue} op til {paymentDueDate} i henhold til nedenstående data.",
65 |   "store/warnings.pickup.time": "Butik afhentningsperioden starter fra det øjeblik din betaling er bekræftet.",
66 |   "store/warnings.subscription": "Udover varer, der er købt, inkluderer din ordre et eller flere abonnementer.",
67 |   "store/order.error.invalid.title": "Side ikke fundet",
68 |   "store/order.error.invalid.message": "Det ser ud til, at den side, du ledte efter, ikke findes. Vi foreslår, at du vender tilbage til startsiden.",
69 |   "store/order.error.not-logged-in.title": "Du har ikke tilladelse til at få d ",
70 |   "store/order.error.not-logged-in.message": "Det ser ud til, at du ikke har tilladelse til at få adgang til denne side. Prøv at logge ind og få adgang igen.",
71 |   "store/go-to-login": "Gå til login-siden ",
72 |   "store/go-to-home": "Gå til hjem-siden",
73 |   "store/paymentData.connectorResponse.mb.entity": "Enhed",
74 |   "store/paymentData.connectorResponse.mb.reference": "Reference"
75 | }
76 | 


--------------------------------------------------------------------------------
/messages/sv.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "store/common.header.counter": " - n˚ {index} av {numPackages}",
 3 |   "store/header.bankinvoice.copy": "Kopia",
 4 |   "store/header.bankinvoice.embeded.collapse": "Minimera",
 5 |   "store/header.bankinvoice.embeded.expand": "Expandera",
 6 |   "store/header.bankinvoice.header": "Information på din {paymentSystemName}",
 7 |   "store/header.bankinvoice.print": "Skriv ut {paymentSystemName}",
 8 |   "store/header.bankinvoice.help": "Kan inte se din {paymentSystemName}?",
 9 |   "store/header.bankinvoice.tooltip": "Din {paymentSystemName} fungerar normalt. Klicka på {message} eller kopiera streckkoden för att fortsätta med betalningen.",
10 |   "store/header.email": "Inom 5 minuter kommer du att få ett e-postmeddelande till {userEmail} med all dina köpinformation. {lineBreak}Kom ihåg att kolla din skräppost eller inkorg för kampanjer",
11 |   "store/header.guest-email": "Inom 5 minuter kommer du att få ett e-postmeddelande till {userEmail} med all dina köpinformation. {lineBreak}Kom ihåg att kolla din skräppost eller inkorg för kampanjer",
12 |   "store/header.newpurchase.button": "Påbörja ny beställning",
13 |   "store/header.print.button": "Skriv ut",
14 |   "store/header.thanks": "Tack för ditt köp!",
15 |   "store/items.attachments.subscription": "Prenumeration",
16 |   "store/items.attachments.subscription.frequency.day": "Varje {frequencyNumber, plural, en {# day} other {# days}}",
17 |   "store/items.attachments.subscription.frequency.month": "Varje {frequencyNumber, plural, one {# månad} other {# månader}}\n​",
18 |   "store/items.attachments.subscription.frequency.week": "Varje {frequencyNumber, plural, one {# vecka} other {# veckor}}\n​",
19 |   "store/items.attachments.subscription.frequency.year": "Varje {frequencyNumber, plural, one {# år} other {# år}}\n​",
20 |   "store/items.attachments.subscription.purchaseday": "Debiteras varje månad på dagen {purchaseday}",
21 |   "store/order.header.cancel.button": "Avbryt beställning",
22 |   "store/order.header.date": "Placerad på {orderDate} vid {orderTime}",
23 |   "store/order.header.myorders.button": "Mina beställningar",
24 |   "store/order.header.number": "Beställning #{orderId}",
25 |   "store/order.header.receipt": "Visa mottagande",
26 |   "store/order.header.seller": "Såld och levererad av {seller}",
27 |   "store/order.header.takeaway.cancel.button": "Avbryt köp",
28 |   "store/order.header.takeaway.printreceipt.button": "Skriv ut kvittot igen",
29 |   "store/order.header.update.button": "Uppdatera beställning",
30 |   "store/order.split.n.pickup.n.takeaway": "Vi delar upp din beställning I {deliveries} leveranser{pickups, plural, one {och en produkt att hämta} other {och # produkter att hämta}}. På så sätt kommer du att få artiklar som är närmare dig snabbare.",
31 |   "store/order.split.n.pickup.no.takeaway": "Vi delar upp din beställning I {deliveries} leveranser{pickups, plural, one {och en produkt att hämta} other {och # produkter att hämta}}. På så sätt kommer du att få artiklar som är närmare dig snabbare.",
32 |   "store/order.split.no.pickup.n.takeaway": "Vi delar upp din beställning I {deliveries} leveranser{takeaways, plural, one {och en produkt att hämta} other {och # produkter att hämta}}. På så sätt kommer du att få artiklar som är närmare dig snabbare.",
33 |   "store/order.split.no.pickup.no.takeaway": "Vi delar upp din beställning i {deliveries} leveranser. På så sätt kommer du att få artiklar som är närmare dig snabbare.",
34 |   "store/order.totals.pickup.free": "Gratis",
35 |   "store/order.totals.total": "Totalt",
36 |   "store/page.title": "Beställning genomförd",
37 |   "store/payments.bankinvoice.print": "Öppen {paymentSystemName}",
38 |   "store/payments.creditcard": "Kreditkort",
39 |   "store/payments.creditcard.lastDigits": "Sista siffrorna: {lastDigits}",
40 |   "store/payments.debitcard": "Kreditkort",
41 |   "store/payments.id": "Betalnings ID: {id}",
42 |   "store/payments.installments": "({installments}x)",
43 |   "store/payments.transaction.id": "Transaktions ID: {id}",
44 |   "store/pickup.header.title": "Hämta",
45 |   "store/products.isGift": "Gratis",
46 |   "store/products.quantity": "{quantity, plural, one {# unit} other {# units}}",
47 |   "store/shipping.header.title": "Leverans",
48 |   "store/shipping.header.address": "Adress",
49 |   "store/shipping.header.wishlist.address": "Adress från: {giftRegistryName}",
50 |   "store/summary.items": "{itemsQuantity, plural, one {# item} other {# items}}",
51 |   "store/summary.pickup": "Butik hämta",
52 |   "store/summary.pickup.friendlyName": "Vid {friendlyName}",
53 |   "store/summary.pickup.quantity": "{pickups, plural, one {, i en butik hämtning} other {, dela i # hämtningar}}\n​",
54 |   "store/summary.shipping": "Leverans",
55 |   "store/summary.shipping.address": "Vid {addressStreet}, {addressNumber}",
56 |   "store/summary.shipping.quantity": "{shippings, plural, one {, i en leverans} other {, dela i # leveranser}}",
57 |   "store/takeaway.header.title": "Take Away",
58 |   "store/warnings.delivery.time": "Leveransperioden börjar räknas från det ögonblick då din betalning bekräftas.",
59 |   "store/warnings.delivery.tracking": "En spårningskod skickas till din e-post när leveransprocessen börjar.",
60 |   "store/warnings.order.split": "Ditt köp delades upp i {numOrders} beställningar eftersom några av varorna såldes av partners.",
61 |   "store/warnings.payment.approval": "Godkännande för betalning kan ta från 5 minuter till 5 arbetsdagar.",
62 |   "store/warnings.payment.bankInvoice.approval": "Betalningsgodkännande för {paymentSystemName} kan ta upp till tre arbetsdagar. Om förfallodagen inte har passerats kommer din beställning att annulleras automatiskt.",
63 |   "store/warnings.payment.bankInvoice.value": "Vänligen gör en betalning av {paymentValue} upp till förfallodagen enligt uppgifterna nedan.",
64 |   "store/warnings.payment.bankInvoice.value.duedate": "Vänligen gör en betalning av {paymentValue} upp till {paymentDueDate} enligt uppgifterna nedan.",
65 |   "store/warnings.pickup.time": "Hämtningsperioden för butiken börjar från det ögonblick då din betalning har bekräftats.",
66 |   "store/warnings.subscription": "Förutom förvärvade artiklar inkluderar din beställning en eller flera prenumerationer.",
67 |   "store/order.error.invalid.title": "Sidan hittades inte",
68 |   "store/order.error.invalid.message": "Det verkar som att den sida som du letade efter inte existerar. Vi föreslår att du går tillbaka till hemsidan.",
69 |   "store/order.error.not-logged-in.title": "Du har inte tillåtelse",
70 |   "store/order.error.not-logged-in.message": "Det verkar som att du inte har behörighet att komma åt den här sidan. Försök att logga in och få åtkomst igen.",
71 |   "store/go-to-login": "Gå till sidan för inloggning",
72 |   "store/go-to-home": "gå till hemsidan",
73 |   "store/paymentData.connectorResponse.mb.entity": "Företag",
74 |   "store/paymentData.connectorResponse.mb.reference": "Referens"
75 | }
76 | 


--------------------------------------------------------------------------------
/messages/nn.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "store/common.header.counter": " – n˚ {index} av {numPackages}",
 3 |   "store/header.bankinvoice.copy": "Kopi",
 4 |   "store/header.bankinvoice.embeded.collapse": "Slå sammen",
 5 |   "store/header.bankinvoice.embeded.expand": "Utvid",
 6 |   "store/header.bankinvoice.header": "Informasjon om {paymentSystemName}",
 7 |   "store/header.bankinvoice.print": "Skriv ut {paymentSystemName}",
 8 |   "store/header.bankinvoice.help": "Kan du ikke se {paymentSystemName}?",
 9 |   "store/header.bankinvoice.tooltip": "{paymentSystemName} fungerer normalt. Klikk på {message} eller kopier strekkoden for å fortsette med betalingen.",
10 |   "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",
11 |   "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",
12 |   "store/header.newpurchase.button": "Start ny bestilling",
13 |   "store/header.print.button": "Skriv ut",
14 |   "store/header.thanks": "Takk for kjøpet!",
15 |   "store/items.attachments.subscription": "Abonnement",
16 |   "store/items.attachments.subscription.frequency.day": "Hver {frequencyNumber, plural, one {# dag} other {# dager}}",
17 |   "store/items.attachments.subscription.frequency.month": "Hver {frequencyNumber, plural, one {# måned} other {# måneder}}",
18 |   "store/items.attachments.subscription.frequency.week": "Hver {frequencyNumber, plural, one {# uke} other {# uker}}",
19 |   "store/items.attachments.subscription.frequency.year": "Hver {frequencyNumber, plural, one {# år} other {# år}}",
20 |   "store/items.attachments.subscription.purchaseday": "Belastes månedlig på dagen {purchaseday}",
21 |   "store/order.header.cancel.button": "Avbryt bestillingen",
22 |   "store/order.header.date": "Lagt inn {orderDate} kl. {orderTime}",
23 |   "store/order.header.myorders.button": "Mine bestillinger",
24 |   "store/order.header.number": "Bestilling #{orderId}",
25 |   "store/order.header.receipt": "Se kvittering",
26 |   "store/order.header.seller": "Solgt og levert av {seller}",
27 |   "store/order.header.takeaway.cancel.button": "Avbryt kjøpet",
28 |   "store/order.header.takeaway.printreceipt.button": "Skriv ut kvittering på nytt",
29 |   "store/order.header.update.button": "Oppdater bestillingen",
30 |   "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.",
31 |   "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.",
32 |   "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.",
33 |   "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.",
34 |   "store/order.totals.pickup.free": "Gratis",
35 |   "store/order.totals.total": "Total",
36 |   "store/page.title": "Bestilling lagt inn",
37 |   "store/payments.bankinvoice.print": "Åpne {paymentSystemName}",
38 |   "store/payments.creditcard": "Kredittkort",
39 |   "store/payments.creditcard.lastDigits": "Siste sifre: {lastDigits}",
40 |   "store/payments.debitcard": "Debetkort",
41 |   "store/payments.id": "Betalings-ID: {id}",
42 |   "store/payments.installments": "({installments}x)",
43 |   "store/payments.transaction.id": "Transaksjons-ID: {id}",
44 |   "store/pickup.header.title": "Hent",
45 |   "store/products.isGift": "Gratis",
46 |   "store/products.quantity": "{quantity, plural, one {# enhet} other {# enheter}}",
47 |   "store/shipping.header.title": "Levering",
48 |   "store/shipping.header.address": "Adresse",
49 |   "store/shipping.header.wishlist.address": "Adresse fra: {giftRegistryName}",
50 |   "store/summary.items": "{itemsQuantity, plural, one {# vare} other {# varer}}",
51 |   "store/summary.pickup": "Hent i butikk",
52 |   "store/summary.pickup.friendlyName": "Hos {friendlyName}",
53 |   "store/summary.pickup.quantity": "{pickups, plural, one {, i en henting i butikk} other {, del opp i # hentinger}}",
54 |   "store/summary.shipping": "Levering",
55 |   "store/summary.shipping.address": "På {addressStreet}, {addressNumber}",
56 |   "store/summary.shipping.quantity": "{shippings, plural, one {, i én levering} other {, del opp i # leveringer}}",
57 |   "store/takeaway.header.title": "Take away",
58 |   "store/warnings.delivery.time": "Leveringsperioden begynner å telle fra det øyeblikket betalingen er bekreftet.",
59 |   "store/warnings.delivery.tracking": "En sporingskode blir sendt til e-posten din når leveringsprosessen begynner.",
60 |   "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.",
61 |   "store/warnings.payment.approval": "Godkjenning av betaling kan ta fra fem minutter til fem virkedager.",
62 |   "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.",
63 |   "store/warnings.payment.bankInvoice.value": "Foreta en betaling på {paymentValue} før forfallsdatoen i henhold til informasjonen nedenfor.",
64 |   "store/warnings.payment.bankInvoice.value.duedate": "Foreta en betaling på {paymentValue} opptil {paymentDueDate} i henhold til informasjonen nedenfor.",
65 |   "store/warnings.pickup.time": "Henteperioden for butikken starter fra det øyeblikket betalingen er bekreftet.",
66 |   "store/warnings.subscription": "I tillegg til kjøpte varer inkluderer bestillingen én eller flere abonnementer.",
67 |   "store/order.error.invalid.title": "Side ikke funnet",
68 |   "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.",
69 |   "store/order.error.not-logged-in.title": "Du har ikke tillatelse",
70 |   "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.",
71 |   "store/go-to-login": "Gå til påloggingssiden",
72 |   "store/go-to-home": "Gå til hjemmesiden",
73 |   "store/paymentData.connectorResponse.mb.entity": "Enhet",
74 |   "store/paymentData.connectorResponse.mb.reference": "Referanse"
75 | }
76 | 


--------------------------------------------------------------------------------
/messages/no.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "store/common.header.counter": " – n˚ {index} av {numPackages}",
 3 |   "store/header.bankinvoice.copy": "Kopi",
 4 |   "store/header.bankinvoice.embeded.collapse": "Slå sammen",
 5 |   "store/header.bankinvoice.embeded.expand": "Utvid",
 6 |   "store/header.bankinvoice.header": "Informasjon om {paymentSystemName}",
 7 |   "store/header.bankinvoice.print": "Skriv ut {paymentSystemName}",
 8 |   "store/header.bankinvoice.help": "Kan du ikke se {paymentSystemName}?",
 9 |   "store/header.bankinvoice.tooltip": "{paymentSystemName} fungerer normalt. Klikk på {message} eller kopier strekkoden for å fortsette med betalingen.",
10 |   "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",
11 |   "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",
12 |   "store/header.newpurchase.button": "Start ny bestilling",
13 |   "store/header.print.button": "Skriv ut",
14 |   "store/header.thanks": "Takk for kjøpet!",
15 |   "store/items.attachments.subscription": "Abonnement",
16 |   "store/items.attachments.subscription.frequency.day": "Hver {frequencyNumber, plural, one {# dag} other {# dager}}",
17 |   "store/items.attachments.subscription.frequency.month": "Hver {frequencyNumber, plural, one {# måned} other {# måneder}}",
18 |   "store/items.attachments.subscription.frequency.week": "Hver {frequencyNumber, plural, one {# uke} other {# uker}}",
19 |   "store/items.attachments.subscription.frequency.year": "Hver {frequencyNumber, plural, one {# år} other {# år}}",
20 |   "store/items.attachments.subscription.purchaseday": "Belastes månedlig på dagen {purchaseday}",
21 |   "store/order.header.cancel.button": "Avbryt bestillingen",
22 |   "store/order.header.date": "Lagt inn {orderDate} kl. {orderTime}",
23 |   "store/order.header.myorders.button": "Mine bestillinger",
24 |   "store/order.header.number": "Bestilling #{orderId}",
25 |   "store/order.header.receipt": "Se kvittering",
26 |   "store/order.header.seller": "Solgt og levert av {seller}",
27 |   "store/order.header.takeaway.cancel.button": "Avbryt kjøpet",
28 |   "store/order.header.takeaway.printreceipt.button": "Skriv ut kvittering på nytt",
29 |   "store/order.header.update.button": "Oppdater bestillingen",
30 |   "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.",
31 |   "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.",
32 |   "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.",
33 |   "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.",
34 |   "store/order.totals.pickup.free": "Gratis",
35 |   "store/order.totals.total": "Total",
36 |   "store/page.title": "Bestilling lagt inn",
37 |   "store/payments.bankinvoice.print": "Åpne {paymentSystemName}",
38 |   "store/payments.creditcard": "Kredittkort",
39 |   "store/payments.creditcard.lastDigits": "Siste sifre: {lastDigits}",
40 |   "store/payments.debitcard": "Debetkort",
41 |   "store/payments.id": "Betalings-ID: {id}",
42 |   "store/payments.installments": "({installments}x)",
43 |   "store/payments.transaction.id": "Transaksjons-ID: {id}",
44 |   "store/pickup.header.title": "Hent",
45 |   "store/products.isGift": "Gratis",
46 |   "store/products.quantity": "{quantity, plural, one {# enhet} other {# enheter}}",
47 |   "store/shipping.header.title": "Levering",
48 |   "store/shipping.header.address": "Adresse",
49 |   "store/shipping.header.wishlist.address": "Adresse fra: {giftRegistryName}",
50 |   "store/summary.items": "{itemsQuantity, plural, one {# vare} other {# varer}}",
51 |   "store/summary.pickup": "Hent i butikk",
52 |   "store/summary.pickup.friendlyName": "Hos {friendlyName}",
53 |   "store/summary.pickup.quantity": "{pickups, plural, one {, i en henting i butikk} other {, del opp i # hentinger}}",
54 |   "store/summary.shipping": "Levering",
55 |   "store/summary.shipping.address": "På {addressStreet}, {addressNumber}",
56 |   "store/summary.shipping.quantity": "{shippings, plural, one {, i én levering} other {, del opp i # leveringer}}",
57 |   "store/takeaway.header.title": "Take away",
58 |   "store/warnings.delivery.time": "Leveringsperioden begynner å telle fra det øyeblikket betalingen er bekreftet.",
59 |   "store/warnings.delivery.tracking": "En sporingskode blir sendt til e-posten din når leveringsprosessen begynner.",
60 |   "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.",
61 |   "store/warnings.payment.approval": "Godkjenning av betaling kan ta fra fem minutter til fem virkedager.",
62 |   "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.",
63 |   "store/warnings.payment.bankInvoice.value": "Foreta en betaling på {paymentValue} før forfallsdatoen i henhold til informasjonen nedenfor.",
64 |   "store/warnings.payment.bankInvoice.value.duedate": "Foreta en betaling på {paymentValue} opptil {paymentDueDate} i henhold til informasjonen nedenfor.",
65 |   "store/warnings.pickup.time": "Henteperioden for butikken starter fra det øyeblikket betalingen er bekreftet.",
66 |   "store/warnings.subscription": "I tillegg til kjøpte varer inkluderer bestillingen én eller flere abonnementer.",
67 |   "store/order.error.invalid.title": "Side ikke funnet",
68 |   "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.",
69 |   "store/order.error.not-logged-in.title": "Du har ikke tillatelse",
70 |   "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.",
71 |   "store/go-to-login": "Gå til påloggingssiden",
72 |   "store/go-to-home": "Gå til hjemmesiden",
73 |   "store/paymentData.connectorResponse.mb.entity": "Enhet",
74 |   "store/paymentData.connectorResponse.mb.reference": "Referanse"
75 | }
76 | 


--------------------------------------------------------------------------------
/messages/pt.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "store/common.header.counter": " - n˚ {index} de {numPackages}",
 3 |   "store/header.bankinvoice.copy": "Copiar",
 4 |   "store/header.bankinvoice.embeded.collapse": "Reduzir",
 5 |   "store/header.bankinvoice.embeded.expand": "Expandir",
 6 |   "store/header.bankinvoice.header": "Dados do {paymentSystemName} a ser pago",
 7 |   "store/header.bankinvoice.print": "Imprimir {paymentSystemName}",
 8 |   "store/header.bankinvoice.help": "Não consegue ver o seu {paymentSystemName}?",
 9 |   "store/header.bankinvoice.tooltip": "Seu {paymentSystemName} está funcionando normalmente! Clique em {message} ou copie seu código para efetuar o pagamento.",
10 |   "store/header.email": "Em até 5 min. vamos mandar um e-mail para {userEmail} com todos os detalhes do seu pedido.{lineBreak}Confira a caixa de spam ou aba de promoções.",
11 |   "store/header.guest-email": "Em até 5 min. vamos mandar um e-mail para {userEmail} com todos os detalhes do seu pedido.{lineBreak}Confira a caixa de spam ou aba de promoções.",
12 |   "store/header.newpurchase.button": "Iniciar nova venda",
13 |   "store/header.print.button": "Imprimir página",
14 |   "store/header.thanks": "Obrigado por sua compra!",
15 |   "store/items.attachments.subscription": "Assinatura",
16 |   "store/items.attachments.subscription.frequency.day": "A cada {frequencyNumber, plural, one {# dia} other {# dias}}",
17 |   "store/items.attachments.subscription.frequency.month": "A cada {frequencyNumber, plural, one {# mês} other {# meses}}",
18 |   "store/items.attachments.subscription.frequency.week": "A cada {frequencyNumber, plural, one {# semana} other {# semanas}}",
19 |   "store/items.attachments.subscription.frequency.year": "A cada {frequencyNumber, plural, one {# ano} other {# anos}}",
20 |   "store/items.attachments.subscription.purchaseday": "Cobrança todo dia {purchaseday}",
21 |   "store/order.header.cancel.button": "Cancelar pedido",
22 |   "store/order.header.date": "Realizado em {orderDate} às {orderTime}",
23 |   "store/order.header.myorders.button": "Ir para meus pedidos",
24 |   "store/order.header.number": "Pedido #{orderId}",
25 |   "store/order.header.receipt": "Nota fiscal",
26 |   "store/order.header.seller": "Vendido e entregue por {seller}",
27 |   "store/order.header.takeaway.cancel.button": "Cancelar venda",
28 |   "store/order.header.takeaway.printreceipt.button": "Reimprimir nota fiscal",
29 |   "store/order.header.update.button": "Alterar pedido",
30 |   "store/order.split.n.pickup.n.takeaway": "Dividimos seu pedido em {deliveries} entregas,{pickups, plural, one {, uma retirada em ponto} other {, # retiradas em ponto}}{takeaways, plural, one {e um produto para levar agora} other {e # produtos para levar agora}}. Assim, você vai ter mais rápido os itens que estão mais perto do seu endereço.",
31 |   "store/order.split.n.pickup.no.takeaway": "Dividimos seu pedido em {deliveries} entregas{pickups, plural, one {e uma retirada em ponto} other {e # retiradas em ponto}}. Assim, os itens mais perto do seu endereço vão chegar mais rápido.",
32 |   "store/order.split.no.pickup.n.takeaway": "Dividimos seu pedido em {deliveries} entregas{takeaways, plural, one {e # produto para levar agora} other {e # produtos para levar agora}}. Assim, os itens mais perto do seu endereço vão chegar mais rápido.",
33 |   "store/order.split.no.pickup.no.takeaway": "Dividimos seu pedido em {deliveries} entregas. Assim, os itens mais perto do seu endereço vão chegar mais rápido.",
34 |   "store/order.totals.pickup.free": "Grátis",
35 |   "store/order.totals.total": "Total",
36 |   "store/page.title": "Pedido confirmado",
37 |   "store/payments.bankinvoice.print": "Abrir {paymentSystemName}",
38 |   "store/payments.creditcard": "Cartão de crédito",
39 |   "store/payments.creditcard.lastDigits": "Final {lastDigits}",
40 |   "store/payments.debitcard": "Cartão de débito",
41 |   "store/payments.id": "ID do pagamento: {id}",
42 |   "store/payments.installments": "{installments, plural, one {à vista} other { (#x)}}",
43 |   "store/payments.transaction.id": "ID da transação: {id}",
44 |   "store/pickup.header.title": "Retirada no ponto",
45 |   "store/products.isGift": "Grátis",
46 |   "store/products.quantity": "{quantity, plural, one {# unidade} other {# unidades}}",
47 |   "store/shipping.header.title": "Entrega em casa",
48 |   "store/shipping.header.address": "Endereço",
49 |   "store/shipping.header.wishlist.address": "Endereço de: {giftRegistryName}",
50 |   "store/summary.items": "{itemsQuantity, plural, one {# item} other {# itens}}",
51 |   "store/summary.pickup": "A retirar",
52 |   "store/summary.pickup.friendlyName": "Em {friendlyName}",
53 |   "store/summary.pickup.quantity": "{pickups, plural, one {, em uma retirada} other {, separados em # retiradas}}",
54 |   "store/summary.shipping": "A receber",
55 |   "store/summary.shipping.address": "Em {addressStreet}, {addressNumber}",
56 |   "store/summary.shipping.quantity": "{shippings, plural, one {, em uma entrega} other {, separados em # entregas}}",
57 |   "store/takeaway.header.title": "Levar agora",
58 |   "store/warnings.delivery.time": "O prazo de entrega começa a contar só depois da confirmação do pagamento.",
59 |   "store/warnings.delivery.tracking": "Você vai receber o código de rastreio do pedido assim que o processo de envio começar.",
60 |   "store/warnings.order.split": "Sua compra foi dividida em {numOrders} pedidos, por incluir itens de lojas parceiras. Mas fique tranquilo: os prazos de entrega continuam iguais.",
61 |   "store/warnings.payment.approval": "A aprovação do pagamento pode levar de 5 minutos até 5 dias úteis.",
62 |   "store/warnings.payment.bankInvoice.approval": "A aprovação do pagamento do {paymentSystemName} pode demorar até 3 dias úteis. Caso não seja pago até o vencimento, o pedido será automaticamente cancelado.",
63 |   "store/warnings.payment.bankInvoice.value": "Efetue o pagamento no valor de {paymentValue} até a data de vencimento, utilizando os dados abaixo.",
64 |   "store/warnings.payment.bankInvoice.value.duedate": "Efetue o pagamento no valor de {paymentValue} até {paymentDueDate}, utilizando os dados abaixo.",
65 |   "store/warnings.pickup.time": "O prazo de retirada se inicia a partir da confirmação do pagamento.",
66 |   "store/warnings.subscription": "Além da compra de produtos, seu pedido inclui a assinatura de um ou mais itens.",
67 |   "store/order.error.invalid.title": "Página não encontrada",
68 |   "store/order.error.invalid.message": "Parece que essa página não existe mais. Sugerimos que você retorne à página inicial.",
69 |   "store/order.error.not-logged-in.title": "Você não tem permissão",
70 |   "store/order.error.not-logged-in.message": "Você não tem permissão para acessar essa página. Entre com sua conta e tente novamente.",
71 |   "store/go-to-login": "Fazer login",
72 |   "store/go-to-home": "Ir para a página principal",
73 |   "store/paymentData.connectorResponse.mb.entity": "Entidade",
74 |   "store/paymentData.connectorResponse.mb.reference": "Referência"
75 | }
76 | 


--------------------------------------------------------------------------------