feat(app): collapse credentials of unselected stamp in 1-click modal (#…

…1202) * feat(1-click): hide credentials on disabled stamp * feat(1-click): track accordion expansion Co-authored-by: Tim Schultz <schultztimothy@users.noreply.github.com> --------- Co-authored-by: Tim Schultz <schultztimothy@users.noreply.github.com>
gitcoinco · May 2, 2023 · e7658cb · e7658cb
1 parent d789a1b
commit e7658cb
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 13 deletions.
diff --git a/app/components/RefreshMyStampsModalContentCard.tsx b/app/components/RefreshMyStampsModalContentCard.tsx
@@ -1,5 +1,5 @@
 // --- React hooks
-import { useMemo } from "react";
+import { useMemo, useState, useRef } from "react";
 
 // --- Types
 import { ValidatedProviderGroup } from "../signer/utils";
@@ -26,6 +26,10 @@ export const RefreshMyStampsModalContentCard = ({
   selectedProviders,
   setSelectedProviders,
 }: RefreshMyStampsModalCardProps): JSX.Element => {
+  const [disableExpand, setDisableExpand] = useState(false);
+  const [accordionExpanded, setAccordionExpanded] = useState(false);
+
+  const accordionButton = useRef<HTMLButtonElement>(null);
   const platformProviders = useMemo(
     () => platformGroups.map(({ providers }) => providers?.map(({ name }) => name)).flat(2),
     [platformGroups]
@@ -39,22 +43,31 @@ export const RefreshMyStampsModalContentCard = ({
   return (
     <div>
       <Accordion allowToggle>
-        <AccordionItem className="py-2 first:border-t-accent-2 first:border-b-accent-2">
-          <AccordionButton
-            className="items-center justify-between text-white focus:shadow-none"
-            _focus={{ outline: "none" }}
-          >
-            <div className="flex items-center justify-start">
-              <img src={currentPlatform?.icon} alt={currentPlatform?.name} className="mr-5 h-11 w-11" />
-              <p className="text-left">{currentPlatform?.name}</p>
+        <AccordionItem className="py-2 first:border-t-accent-2 first:border-b-accent-2" isDisabled={disableExpand}>
+          <div className="grid grid-cols-10 items-center justify-between text-white focus:shadow-none">
+            <div className="col-span-8 items-center justify-start">
+              <AccordionButton
+                _focus={{ outline: "none" }}
+                ref={accordionButton}
+                onClick={() => setAccordionExpanded(!accordionExpanded)}
+              >
+                <img src={currentPlatform?.icon} alt={currentPlatform?.name} className="mr-5 h-11 w-11" />
+                <p className="text-left">{currentPlatform?.name}</p>
+              </AccordionButton>
             </div>
-            <div className="grid grid-cols-2 items-center">
+            <div className="grid grid-cols-2 items-center justify-end gap-8">
               <Switch
                 data-testid={`switch-${currentPlatform?.name}`}
                 value={`${currentPlatform?.name}`}
                 colorScheme="purple"
                 isChecked={checked}
                 onChange={(e) => {
+                  if (!e.target.checked && accordionExpanded) {
+                    // collapse before disabling accordion
+                    accordionButton.current?.click();
+                    setAccordionExpanded(false);
+                  }
+                  setDisableExpand(!disableExpand);
                   if (e.target.checked) {
                     setSelectedProviders((selectedProviders || []).concat(platformProviders));
                   } else {
@@ -64,9 +77,16 @@ export const RefreshMyStampsModalContentCard = ({
                   }
                 }}
               />
-              <AccordionIcon marginLeft="8px" fontSize="28px" />
+              <AccordionIcon
+                className="cursor-pointer"
+                marginLeft="8px"
+                fontSize="28px"
+                onClick={() => {
+                  accordionButton.current?.click();
+                }}
+              />
             </div>
-          </AccordionButton>
+          </div>
           <AccordionPanel borderTop="1px solid #083A40" marginTop="8px" paddingLeft="0" paddingRight="0">
             <RefreshMyStampsSelector
               validPlatformGroups={platformGroups}

diff --git a/app/components/RefreshMyStampsSelector.tsx b/app/components/RefreshMyStampsSelector.tsx
@@ -33,7 +33,7 @@ export function RefreshMyStampsSelector({
                       <li key={`${provider.title}${i}`} data-testid={`indicator-${provider.name}`}>
                         <div className="relative mr-10 text-sm text-white">{provider.title}</div>
                       </li>
-                      <div className="align-right flex">
+                      <div className="align-right flex rounded bg-white">
                         <Checkbox
                           type="checkbox"
                           key={`${provider.title}${i}`}