Merge branch 'feature/add-isOpen-prop' into develop

Tincre · Oct 26, 2022 · f54cef8 · f54cef8
2 parents d3f01bf + dfd3970
commit f54cef8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@ do ads any other way; the rest just suck.
       - [Environment variables](#environment-variables)
         - [Example `.env.local`](#example-envlocal)
     - [Customizations](#customizations)
+      - [Controlling open/close state](#controlling-openclose-state)
       - [Add options](#add-options)
         - [Example](#example)
         - [Managing state from `PromoButton` parent](#managing-state-from-promobutton-parent)
@@ -226,7 +227,18 @@ PROMO_APP_ID=
 PROMO_CLIENT_SECRET=
 ```
 ### Customizations
-There are styling, content, and component customizations possible.
+There are styling, content, and component customizations possible, in addition to some optional state props exposed.
+
+#### Controlling open/close state
+
+It's simple to control the button's open close state by passing in a boolean prop `isOpen`. 
+
+- Open: `isOpen={true}`
+- Closed: `isOpen={false}`
+
+This can be handy in case you need to control the button's state from an external interface.
+
+> ℹ️ The Promo Button will automatically handle state internally, but you'll need to set your value for `isOpen` back to `undefined`, `true`, or `false` after opening (or closing) via an external interface, _prior to next page render_. If your user or doesn't refresh the page, then state will be handled seamlessly.
 
 #### Add options
 

diff --git a/example/nextjs/pages/index.tsx b/example/nextjs/pages/index.tsx
@@ -26,6 +26,7 @@ const Home: NextPage = () => {
             shape="square"
             email="[email protected]"
             backend="/api/promo"
+            isOpen={true}
             options={{
               inputValues: {
                 adTitle: 'Testing title',

diff --git a/src/index.tsx b/src/index.tsx
@@ -43,6 +43,7 @@ export function PromoButton({
   backend,
   adDisplayComponent,
   disablePromoPay,
+  isOpen,
   options,
 }: {
   logoSrc: string;
@@ -52,9 +53,10 @@ export function PromoButton({
   backend: string;
   adDisplayComponent?: React.FunctionComponent;
   disablePromoPay?: boolean;
+  isOpen?: boolean;
   options?: PromoOptions;
 }) {
-  let [isOpen, setIsOpen] = useState(false);
+  let [isOpenInternal, setIsOpenInternal] = useState(isOpen || false);
   let [isSubmitted, setIsSubmitted] = useState(false);
   let [isSubmitting, setIsSubmitting] = useState(false);
   let [fileImage, setFileImage] = useState(options?.inputValues?.creativeUri);
@@ -191,7 +193,7 @@ export function PromoButton({
   return (
     <button
       onClick={() => {
-        setIsOpen(true);
+        setIsOpenInternal(!isOpenInternal);
         setIsSubmitted(false);
       }}
       className={mainButtonClassName}
@@ -203,14 +205,14 @@ export function PromoButton({
             isHero: mainButtonClassName === 'promo-button-hero group',
           }}
         />
-        <Transition.Root show={isOpen} as={Fragment}>
+        <Transition.Root show={isOpenInternal} as={Fragment}>
           <Dialog
             as="div"
             initialFocus={adTitleInputRef}
             static
             className="promo-button-dialog-outer"
-            open={isOpen}
-            onClose={() => setIsOpen(false)}
+            open={isOpenInternal}
+            onClose={() => setIsOpenInternal(!isOpenInternal)}
           >
             <div className="promo-button-dialog-inner">
               <Transition.Child
@@ -247,7 +249,7 @@ export function PromoButton({
                 >
                   <DialogHeader
                     isSubmitted={isSubmitted}
-                    setIsOpen={setIsOpen}
+                    setIsOpen={setIsOpenInternal}
                     logoSrc={logoSrc}
                     content={content?.howItWorksContent}
                     paymentLink={paymentLink}