From e6da0900bca5f7e968dd9acf5ca4d117e7d5c675 Mon Sep 17 00:00:00 2001
From: Breno Calazans <brenocalazans@gmail.com>
Date: Wed, 24 Mar 2021 12:07:42 -0300
Subject: [PATCH] Add CSS Handles 'updateOrderButton', 'myOrdersButton', and
 'cancelOrderButton' on OrderOptions

---
 CHANGELOG.md           |  2 +
 docs/README.md         |  3 ++
 package.json           |  4 +-
 react/OrderOptions.tsx | 85 ++++++++++++++++++++++++------------------
 4 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fecdd27..285d6fc 100644
--- a/CHANGELOG.md
+++ b/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
+- CSS Handles `updateOrderButton`, `myOrdersButton`, and `cancelOrderButton` on `OrderOptions`.
 
 ## [1.2.0] - 2021-03-10
 
diff --git a/docs/README.md b/docs/README.md
index 89826b7..23da9de 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -316,6 +316,9 @@ In order to apply CSS customizations in this and other blocks, follow the instru
 | `paymentGroup`   |
 | `paymentValue`   |
 | `addressContainer`   |
+| `updateOrderButton` |
+| `myOrdersButton` |
+| `cancelOrderButton` |
 
 ## Contributors ✨
 
diff --git a/package.json b/package.json
index 201ec89..75eb444 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,11 @@
     "test": "cd ./react && yarn test",
     "lint:locales": "intl-equalizer",
     "locales:fix": "intl-equalizer --fix",
-    "verify": "yarn lint && yarn lint:locales && yarn test"
+    "verify": "yarn lint:locales && yarn test"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn lint && yarn lint:locales && yarn locales:fix",
+      "pre-commit": "yarn lint:locales && yarn locales:fix",
       "pre-push": "yarn verify"
     }
   },
diff --git a/react/OrderOptions.tsx b/react/OrderOptions.tsx
index 9756b07..9ee60e7 100644
--- a/react/OrderOptions.tsx
+++ b/react/OrderOptions.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react'
 import { InjectedIntlProps, injectIntl, defineMessages } from 'react-intl'
+import { useCssHandles } from 'vtex.css-handles'
 
 import ButtonLink from './ButtonLink'
 
@@ -28,6 +29,12 @@ interface Props {
   orderId?: string
 }
 
+const CSS_HANDLES = [
+  'updateOrderButton',
+  'myOrdersButton',
+  'cancelOrderButton',
+] as const
+
 const OrderOptions: FunctionComponent<Props & InjectedIntlProps> = ({
   allowCancellation,
   takeaway,
@@ -35,49 +42,55 @@ const OrderOptions: FunctionComponent<Props & InjectedIntlProps> = ({
   className = '',
   fullWidth,
   orderId,
-}) => (
-  <div className={`${className} flex flex-wrap justify-center flex-nowrap-m`}>
-    <div className="mr5-ns mb5-s mb0-m w-100 w-auto-m">
-      {takeaway ? (
-        <ButtonLink variation="secondary" fullWidth={fullWidth} to="">
-          {intl.formatMessage(messages.printReceiptButton)}
-        </ButtonLink>
-      ) : (
-        <ButtonLink
-          variation="secondary"
-          fullWidth={fullWidth}
-          to={`/account#/orders/${orderId}/edit`}>
-          {intl.formatMessage(messages.updateButton)}
-        </ButtonLink>
-      )}
-    </div>
-    {!takeaway && (
-      <div className="mr5-ns mb5-s mb0-m w-100 w-auto-m">
-        <ButtonLink
-          variation="secondary"
-          fullWidth={fullWidth}
-          to="/account#/orders/">
-          {intl.formatMessage(messages.myOrdersButton)}
-        </ButtonLink>
-      </div>
-    )}
-    {allowCancellation && (
-      <div className="w-100 w-auto-m">
+}) => {
+  const handles = useCssHandles(CSS_HANDLES)
+
+  return (
+    <div className={`${className} flex flex-wrap justify-center flex-nowrap-m`}>
+      <div
+        className={`${handles.updateOrderButton} mr5-ns mb5-s mb0-m w-100 w-auto-m`}>
         {takeaway ? (
-          <ButtonLink variation="danger-tertiary" fullWidth={fullWidth} to="">
-            {intl.formatMessage(messages.takeAwayCancelButton)}
+          <ButtonLink variation="secondary" fullWidth={fullWidth} to="">
+            {intl.formatMessage(messages.printReceiptButton)}
           </ButtonLink>
         ) : (
           <ButtonLink
-            variation="danger-tertiary"
+            variation="secondary"
             fullWidth={fullWidth}
-            to={`/account#/orders/${orderId}/cancel`}>
-            {intl.formatMessage(messages.cancelButton)}
+            to={`/account#/orders/${orderId}/edit`}>
+            {intl.formatMessage(messages.updateButton)}
           </ButtonLink>
         )}
       </div>
-    )}
-  </div>
-)
+      {!takeaway && (
+        <div
+          className={`${handles.myOrdersButton} mr5-ns mb5-s mb0-m w-100 w-auto-m`}>
+          <ButtonLink
+            variation="secondary"
+            fullWidth={fullWidth}
+            to="/account#/orders/">
+            {intl.formatMessage(messages.myOrdersButton)}
+          </ButtonLink>
+        </div>
+      )}
+      {allowCancellation && (
+        <div className={`${handles.cancelOrderButton} w-100 w-auto-m`}>
+          {takeaway ? (
+            <ButtonLink variation="danger-tertiary" fullWidth={fullWidth} to="">
+              {intl.formatMessage(messages.takeAwayCancelButton)}
+            </ButtonLink>
+          ) : (
+            <ButtonLink
+              variation="danger-tertiary"
+              fullWidth={fullWidth}
+              to={`/account#/orders/${orderId}/cancel`}>
+              {intl.formatMessage(messages.cancelButton)}
+            </ButtonLink>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
 
 export default injectIntl(OrderOptions)