Merge pull request #120 from vtex-apps/intermediate

Add new boleto css handles

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- New css handles: `barCodeContainer`, `printButtonWrapper` and `printHintWrapper`.
 
 ## [2.3.0] - 2020-07-08
 

docs/README.md

@@ -643,6 +643,7 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `bankInvoiceEmbedBackground` |
 | `bankInvoiceEmbedWrapper`    |
 | `barCodeCopyButtonWrapper`   |
+| `barCodeContainer`           |
 | `barCodeNumber`              |
 | `barCodeWrapper`             |
 | `confirmationIconWrapper`    |
@@ -681,6 +682,8 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `packageReceiver`            |
 | `packageShippingEstimate`    |
 | `packageSLA`                 |
+| `printButtonWrapper`         |
+| `printHintWrapper`           |
 | `productImageColumn`         |
 | `productImageWrapper`        |
 | `productInfoColumn`          |

messages/it.json

@@ -5,6 +5,8 @@
   "store/header.bankinvoice.embeded.expand": "Espandi",
   "store/header.bankinvoice.header": "Informazioni sul tuo {paymentSystemName}",
   "store/header.bankinvoice.print": "Stampa {paymentSystemName}",
+  "store/header.bankinvoice.help": "Impossibile visualizzare {paymentSystemName}?",
+  "store/header.bankinvoice.tooltip": "Il tuo {paymentSystemName} funziona correttamente. Fai clic su {messaggio} o copia il codice a barre per procedere con il pagamento.",
   "store/header.email": "Entro circa 5 minuti riceverai una e-mail all'indirizzo {userEmail} contenente tutti i dettagli dell'acquisto.{lineBreak}Ricorda di controllare la tua cartella di spam o delle promozioni",
   "store/header.newpurchase.button": "Inizia un nuovo ordine",
   "store/header.print.button": "Stampa",

react/BankInvoiceSection.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react'
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
 import { ButtonWithIcon, Tooltip, IconInfo } from 'vtex.styleguide'
+import { useCssHandles } from 'vtex.css-handles'
 
 import PrinterIcon from './Icons/PrinterIcon'
 import BarCode from './components/BankInvoice/BarCode'
@@ -9,12 +10,19 @@ import { useOrderGroup } from './components/OrderGroupContext'
 import { getPaymentInfoFromOrder, parseBankInvoiceUrl } from './utils'
 import Section from './Section'
 
+const CSS_HANDLES = [
+  'barCodeContainer',
+  'printButtonWrapper',
+  'printHintWrapper',
+] as const
+
 const messages = defineMessages({
   print: { id: 'store/header.bankinvoice.print', defaultMessage: '' },
   tooltip: { id: 'store/header.bankinvoice.tooltip', defaultMessage: '' },
 })
 
 const BankInvoiceSection: FC = () => {
+  const handles = useCssHandles(CSS_HANDLES)
   const orderGroup = useOrderGroup()
   const paymentInfo = getPaymentInfoFromOrder(orderGroup.orders[0])
   const { formatMessage } = useIntl()
@@ -50,10 +58,16 @@ const BankInvoiceSection: FC = () => {
           values={{ paymentSystemName }}
         />
       </header>
-      <div className="flex-l justify-between items-center mt6">
+      <div
+        className={`${handles.barCodeContainer} flex-l justify-between items-center mt6`}
+      >
         {barCodeNumber && <BarCode barCodeNumber={barCodeNumber} />}
         {isURLValid && (
-          <div className={`mt5 mt0-l ${barCodeNumber ? 'ml5-l' : ''}`}>
+          <div
+            className={`${handles.printButtonWrapper} mt5 mt0-l ${
+              barCodeNumber ? 'ml5-l' : ''
+            }`}
+          >
             <ButtonWithIcon
               href={parsedUrl}
               icon={<PrinterIcon />}
@@ -70,7 +84,9 @@ const BankInvoiceSection: FC = () => {
           <Embedded url={parsedUrl} />
         </div>
       )}
-      <div className="c-muted-1 mt6 t-small mb9 flex">
+      <div
+        className={`${handles.printHintWrapper} c-muted-1 mt6 t-small mb9 flex`}
+      >
         <FormattedMessage
           id="store/header.bankinvoice.help"
           values={{ paymentSystemName }}