feat: Checkout Summary allow Tooltip for disabled buttons

aleph-im · Oct 24, 2024 · e6be0b0 · e6be0b0
1 parent 4a00379
commit e6be0b0
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 31 deletions.
diff --git a/src/components/form/CheckoutSummary/cmp.tsx b/src/components/form/CheckoutSummary/cmp.tsx
@@ -250,13 +250,15 @@ export const CheckoutSummary = ({
   domains,
   description,
   button: buttonNode,
+  footerButton = buttonNode,
   control,
   receiverAddress,
   paymentMethod,
   website,
   mainRef,
   isPersistent = type === EntityType.Instance,
   disablePaymentMethod = true,
+  disabledStreamTooltip,
   onSwitchPaymentMethod,
 }: // streamDuration,
 CheckoutSummaryProps) => {
@@ -289,6 +291,7 @@ CheckoutSummaryProps) => {
       disabledHold={disabledHold}
       disabledStream={disabledStream}
       onSwitch={onSwitchPaymentMethod}
+      disabledStreamTooltip={disabledStreamTooltip}
     />
   )
 
@@ -298,7 +301,7 @@ CheckoutSummaryProps) => {
       <CheckoutSummaryFooter
         {...{
           paymentMethod,
-          submitButton: buttonNode,
+          submitButton: footerButton,
           paymentMethodSwitch: paymentMethodSwitchNode,
           mainRef,
           totalCost: cost?.totalCost,

diff --git a/src/components/form/CheckoutSummary/types.ts b/src/components/form/CheckoutSummary/types.ts
@@ -25,13 +25,15 @@ export type CheckoutSummaryProps = {
   volumes?: VolumeField[]
   domains?: DomainField[]
   button?: ReactNode
+  footerButton?: ReactNode
   description?: ReactNode
   mainRef?: RefObject<HTMLElement>
   paymentMethod: PaymentMethod
   control?: Control
   receiverAddress?: string
   streamDuration?: StreamDurationField
   disablePaymentMethod?: boolean
+  disabledStreamTooltip?: ReactNode
   onSwitchPaymentMethod?: (e: PaymentMethod) => void
 }
 

diff --git a/src/components/form/SelectPaymentMethod/cmp.tsx b/src/components/form/SelectPaymentMethod/cmp.tsx
@@ -3,42 +3,64 @@ import { Switch } from '@aleph-front/core'
 import { SelectPaymentMethodProps } from './types'
 import { useSelectPaymentMethod } from '@/hooks/form/useSelectPaymentMethod'
 import { StyledLabel } from './styles'
+import { PaymentMethod } from '@/helpers/constants'
+import ResponsiveTooltip from '@/components/common/ResponsiveTooltip'
 
 export const SelectPaymentMethod = (props: SelectPaymentMethodProps) => {
   const {
     disabledHold,
     disabledStream,
     paymentMethodCtrl,
+    disabledStreamTooltip,
+    switchRef,
+    selectedPaymentMethod,
     handleClickHold,
     handleClickStream,
   } = useSelectPaymentMethod(props)
 
   return (
-    <div tw="flex items-center justify-center gap-4" className="tp-body3">
-      <StyledLabel
-        {...{
-          onClick: handleClickHold,
-          $disabled: disabledHold,
-        }}
+    <>
+      <div
+        tw="flex items-center justify-center gap-4"
+        className="tp-body3"
+        ref={switchRef}
       >
-        Hold tokens
-      </StyledLabel>
-      <Switch
-        {...{
-          ...paymentMethodCtrl.field,
-          ...paymentMethodCtrl.fieldState,
-          disabled: disabledHold || disabledStream,
-        }}
-      />
-      <StyledLabel
-        {...{
-          onClick: handleClickStream,
-          $disabled: disabledStream,
-        }}
-      >
-        Pay-as-you-go
-      </StyledLabel>
-    </div>
+        <StyledLabel
+          {...{
+            onClick: handleClickHold,
+            $selected: selectedPaymentMethod === PaymentMethod.Hold,
+            $disabled: disabledHold,
+          }}
+        >
+          Hold tokens
+        </StyledLabel>
+        <Switch
+          {...{
+            ...paymentMethodCtrl.field,
+            ...paymentMethodCtrl.fieldState,
+            disabled: disabledHold || disabledStream,
+          }}
+          ref={switchRef}
+        />
+        <StyledLabel
+          {...{
+            onClick: handleClickStream,
+            $selected: selectedPaymentMethod === PaymentMethod.Stream,
+            $disabled: disabledStream,
+          }}
+        >
+          Pay-as-you-go
+        </StyledLabel>
+      </div>
+      {disabledStream && (
+        <ResponsiveTooltip
+          my="bottom-left"
+          at="center-center"
+          targetRef={switchRef as React.RefObject<HTMLButtonElement>}
+          content={disabledStreamTooltip}
+        />
+      )}
+    </>
   )
 }
 

diff --git a/src/components/form/SelectPaymentMethod/styles.tsx b/src/components/form/SelectPaymentMethod/styles.tsx
@@ -1,14 +1,11 @@
 import tw from 'twin.macro'
 import styled, { css } from 'styled-components'
 
-export type StyledLabelProps = { $disabled?: boolean }
+export type StyledLabelProps = { $selected?: boolean; $disabled?: boolean }
 
 export const StyledLabel = styled.label<StyledLabelProps>`
-  ${({ $disabled = false }) => css`
-    /* ${tw`cursor-pointer`} */
-    /* @todo: fix it after supporting stream payment with automatic allocation or hold payment with manual allocation */
-    ${tw`cursor-not-allowed`}
-
+  ${({ $selected = false, $disabled = false }) => css`
+    ${$disabled ? tw`cursor-not-allowed` : !$selected ? tw`cursor-pointer` : ''}
     ${$disabled &&
     css`
       ${tw`opacity-40 cursor-not-allowed`}