feat: add popover to delivery button

messages/en.json

@@ -18,5 +18,7 @@
   "store/shipping-option-zipcode.shippinFilter.pkcupAt.chooseAStore": "Choose a Store",
   "store/shipping-option-zipcode.shippinFilter.pickupnearBy": "Pickup nearby",
   "store/shipping-option-zipcode.shippinFilter.pickpu": "Pickup",
-  "store/shipping-option-zipcode.updateButton.label": "Update"
+  "store/shipping-option-zipcode.updateButton.label": "Update",
+  "store/shipping-option-zipcode.popoverButton.label": "Select a location",
+  "store/shipping-option-zipcode.popover.description": "Delivery options and delivery speeds may vary per address and store."
 }

react/components/DeliveryDrawer.tsx

@@ -48,6 +48,7 @@ const DeliveryDrawer = ({
           placeholder={intl.formatMessage(messages.deliverToButtonPlaceholder)}
           label={intl.formatMessage(messages.deliverToButtonLabel)}
           compact={compact}
+          showPopover
         />
       }
       title={intl.formatMessage(messages.storeDeliverDrawerTitle)}

react/components/DeliveryPopover.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { useCssHandles } from 'vtex.css-handles'
+import { Button } from 'vtex.styleguide'
+import OutsideClickHandler from 'react-outside-click-handler'
+import '../styles.css'
+
+const CSS_HANDLES = [
+  'deliveryPopover',
+  'popoverPolygonContainer',
+  'popoverPolygonSvg',
+  'popoverPolygon',
+] as const
+
+interface Props {
+  onClick: () => void
+  handleOutSideClick: () => void
+  description: string
+  buttonLabel: string
+}
+
+const DeliveryPopover = ({
+  onClick,
+  description,
+  buttonLabel,
+  handleOutSideClick,
+}: Props) => {
+  const handles = useCssHandles(CSS_HANDLES)
+
+  return (
+    <OutsideClickHandler onOutsideClick={handleOutSideClick}>
+      <div className={`${handles.deliveryPopover}`}>
+        <p className="ma0">{description}</p>
+        <Button onClick={onClick}>{buttonLabel}</Button>
+
+        <span className={`${handles.popoverPolygonContainer}`}>
+          <svg
+            className={`${handles.popoverPolygonSvg}`}
+            width="25"
+            height="12"
+            viewBox="0 0 30 10"
+            preserveAspectRatio="none"
+          >
+            <polygon
+              className={`${handles.popoverPolygon}`}
+              points="0,0 30,0 15,10"
+            />
+          </svg>
+        </span>
+      </div>
+    </OutsideClickHandler>
+  )
+}
+
+export default DeliveryPopover

react/components/ShippingOptionButton.tsx

@@ -1,10 +1,18 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useCssHandles } from 'vtex.css-handles'
 import { Spinner } from 'vtex.styleguide'
-
+import { useIntl } from 'react-intl'
 import '../styles.css'
 
-const CSS_HANDLES = ['buttonWrapper', 'buttonLabel', 'buttonValue'] as const
+import DeliveryPopover from './DeliveryPopover'
+import messages from '../messages'
+
+const CSS_HANDLES = [
+  'buttonWrapper',
+  'buttonLabel',
+  'buttonValue',
+  'shippingButtonContainer',
+] as const
 
 interface Props {
   onClick: () => void
@@ -13,6 +21,7 @@ interface Props {
   placeholder: string
   value?: string
   compact: boolean
+  showPopover?: boolean
 }
 
 const ShippingOptionButton = ({
@@ -22,11 +31,20 @@ const ShippingOptionButton = ({
   value,
   placeholder,
   compact,
+  showPopover = false,
 }: Props) => {
+  const intl = useIntl()
+  const [isPopoverOpen, setIsPopoverOpen] = useState(true)
   const handles = useCssHandles(CSS_HANDLES)
 
+  const handleOutSideClick = () => {
+    setIsPopoverOpen(false)
+  }
+
+  const openPopover = !loading && !value && showPopover && isPopoverOpen
+
   return (
-    <div className="flex items-center">
+    <div className={`${handles.shippingButtonContainer} flex items-center`}>
       <button
         onClick={onClick}
         className={`${handles.buttonWrapper} flex h2 items-center br3 pt3 pb3 b--none`}
@@ -46,6 +64,14 @@ const ShippingOptionButton = ({
           </p>
         )}
       </button>
+      {openPopover && (
+        <DeliveryPopover
+          buttonLabel={intl.formatMessage(messages.popoverButtonLabel)}
+          description={intl.formatMessage(messages.popoverDescription)}
+          onClick={onClick}
+          handleOutSideClick={handleOutSideClick}
+        />
+      )}
     </div>
   )
 }

react/messages.ts

@@ -41,6 +41,14 @@ const messages = defineMessages({
     id: 'store/shipping-option-zipcode.updateButton.label',
     defaultMessaage: '',
   },
+  popoverButtonLabel: {
+    id: 'store/shipping-option-zipcode.popoverButton.label',
+    defaultMessaage: '',
+  },
+  popoverDescription: {
+    id: 'store/shipping-option-zipcode.popover.description',
+    defaultMessaage: '',
+  },
 })
 
 export default messages

react/package.json

@@ -9,13 +9,15 @@
     "react": "^18.3.1",
     "react-apollo": "^3.1.3",
     "react-dom": "^18.3.1",
-    "react-intl": "^3.12.0"
+    "react-intl": "^3.12.0",
+    "react-outside-click-handler": "^1.3.0"
   },
   "devDependencies": {
     "@apollo/react-testing": "^3.1.3",
-    "@types/react-dom": "^18.3.0",
     "@types/node": "^13.9.8",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-outside-click-handler": "^1.3.4",
     "@vtex/test-tools": "^3.3.2",
     "@vtex/tsconfig": "^0.4.4",
     "apollo-cache-inmemory": "^1.6.5",

react/styles.css

@@ -49,3 +49,97 @@
   border: 2px solid;
   border-color: #134cd8;
 }
+
+.shippingButtonContainer {
+  position: relative;
+}
+
+.deliveryPopover {
+  position: absolute;
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 15px;
+  border-radius: 12px;
+  z-index: 500;
+  background-color: #fff;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
+  padding: 20px;
+  width: 320px;
+  cursor: auto;
+  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
+  -moz-animation: fadein 2s; /* Firefox < 16 */
+  -ms-animation: fadein 2s; /* Internet Explorer */
+  -o-animation: fadein 2s; /* Opera < 12.1 */
+  animation: fadein 2s;
+}
+
+.popoverPolygonContainer {
+  position: absolute;
+  top: 8px;
+  transform-origin: center 0px;
+  transform: rotate(180deg) translateX(50%);
+  left: 50%;
+}
+
+.popoverPolygonSvg {
+  display: 'block';
+  vertical-align: middle;
+  overflow: visible;
+}
+
+.popoverPolygon {
+  fill: #fff;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}