Add disabled states, display pay text properly

Disabled states mainly just to disable focus styles
joonassandell · Jul 20, 2024 · 3774b73 · 3774b73
1 parent 4f91a76
commit 3774b73
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/app/dynamic-pay-button/PayButton.tsx b/app/dynamic-pay-button/PayButton.tsx
@@ -32,6 +32,7 @@ export const PayButton = ({ className }: PayButtonProps) => {
         },
         className,
       )}
+      disabled={success || loading}
       onClick={handleLoading}
     >
       <AnimateDimension
@@ -48,7 +49,7 @@ export const PayButton = ({ className }: PayButtonProps) => {
           transition={TRANS_SPRING_FAST}
           whileTap={{ scale: loading || success ? 1 : 0.88 }}
         >
-          {(!loading || !success) && 'Pay Now'}
+          {((!loading && !success) || (loading && !success)) && 'Pay Now'}
           {loading && !success && (
             <m.div
               animate={{ scale: 1 }}

diff --git a/app/dynamic-pay-button/TabContent.tsx b/app/dynamic-pay-button/TabContent.tsx
@@ -36,7 +36,7 @@ export const TabContent = ({ value }: TabContentProps) => {
 };
 
 const TabContentCard = () => {
-  const { ccv, inputRef, setCcv, setSwitchCard, success } =
+  const { ccv, inputRef, loading, setCcv, setSwitchCard, success } =
     useDynamicPayButton();
 
   return (
@@ -73,6 +73,7 @@ const TabContentCard = () => {
                   success,
               },
             )}
+            disabled={success || loading}
             maxLength={3}
             onChange={e => setCcv(e.target.value)}
             pattern="\d*"