Merge pull request #24 from vtex-apps/feature-css-handles

Add CSS Handles 'updateOrderButton', 'myOrdersButton', and 'cancelOrderButton' on OrderOptions
vtex-apps · Mar 25, 2021 · 1ac2536 · 1ac2536
2 parents 99835b6 + e6da090
commit 1ac2536
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,56 +29,68 @@ interface Props {
   orderId?: string
 }
 
+const CSS_HANDLES = [
+  'updateOrderButton',
+  'myOrdersButton',
+  'cancelOrderButton',
+] as const
+
 const OrderOptions: FunctionComponent<Props & InjectedIntlProps> = ({
   allowCancellation,
   takeaway,
   intl,
   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)