TP-111|Kunal|HRC EMI CARD revamp (#1012)

src/components/TooltipV2/TooltipV2.tsx

@@ -35,6 +35,7 @@ interface TooltipOptions {
 }
 
 interface TooltipContentProps extends React.HTMLProps<HTMLDivElement> {
+  arrowClassName?: string;
   arrowColor?: string;
   bgColor?: string;
   shouldAnimate?: boolean;
@@ -192,6 +193,7 @@ export const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentPro
 
     const arrowColor = props?.arrowColor || 'var(--tooltip-background-color)';
     const bgColor = props?.bgColor || 'var(--tooltip-background-color)';
+    const arrowClass = props?.arrowClassName || '';
     const shouldAnimate = props?.shouldAnimate || false;
 
     if (!context.open) return null;
@@ -214,7 +216,12 @@ export const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentPro
             props.children
           )}
           {/* @ts-expect-error typescript is not able to infer the type of arrowRef */}
-          <FloatingArrow context={context} ref={context?.arrowRef} fill={arrowColor} />
+          <FloatingArrow
+            className={arrowClass}
+            context={context}
+            ref={context?.arrowRef}
+            fill={arrowColor}
+          />
         </div>
       </FloatingPortal>
     );

src/pages/Dashboard/AmountDueCard.tsx

@@ -26,6 +26,12 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from '@cp/components/TooltipV2/TooltipV2';
 import InfoIconOutlined from '@cp/assets/images/icons/InfoIconOutlined';
 import HourglassIconV2 from '@cp/assets/icons/HourglassIconV2';
+import IdeaIcon from '@cp/assets/icons/IdeaIcon';
+import TickIcon from '@cp/assets/icons/TickIcon';
+import InefficientIcon from '@cp/assets/icons/InefficientIcon';
+import { CloseIcon } from '@icons';
+import Button from '@primitives/Button';
+import InfoFilledIcon from '@cp/assets/icons/InfoFilledIcon';
 
 interface AmountDueCardProps {
   totalAmount: number;
@@ -256,48 +262,73 @@ const AmountDueCard = (props: AmountDueCardProps) => {
                       </Tooltip>
                     </div>
                   ) : (
-                    <></>
-                    //   @TODO : to be added later
-                    /*  <Checkbox
-                    checked={showHoldEligibility}
-                  onChange={() => {
-                    setShowHoldEligibility(prev => !prev);
-                  }}
-                  title="Show Hold Eligibility"
-                  checkboxTitleClass={cx('text-[var(--blue-base)] font-medium font-[14px]')}
-                />*/
+                    <>
+                      <Tooltip placement="top" hiddenPadding={0} hideStrategy="referenceHidden">
+                        <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
+                          <Tag
+                            labelClass="cursor-default"
+                            label={`View hold eligibility`}
+                            size="sm"
+                            endAdornment={
+                              <InfoIconOutlined fillColor="var(--navi-color-gray-c3)" />
+                            }
+                          />
+                        </TooltipTrigger>
+                        <TooltipContent
+                          arrowClassName={styles.arrow}
+                          className={cx(styles.tooltipWrapper, 'ml-[42px]')}
+                        >
+                          <div className="flex justify-between gap-[20px]">
+                            <Typography
+                              color="var(--text-primary)"
+                              className="text-[13px]"
+                              variant="p4"
+                            >
+                              Total overdue after{' '}
+                              {holdEligibleDues?.waiverRequestType === WAIVER_REQUEST_TYPE.WAIVER
+                                ? `waiver`
+                                : 'hold'}
+                            </Typography>
+                            <Typography
+                              color="var(--text-primary)"
+                              className="text-[13px]"
+                              variant="p4"
+                            >
+                              {formatAmount(holdEligibleDues?.totalUnpaidDueAmount?.amount || 0)}
+                            </Typography>
+                          </div>
+                          <div className="flex justify-between gap-[20px]">
+                            <Typography
+                              color="var(--text-primary)"
+                              className="text-[13px]"
+                              variant="p4"
+                            >
+                              {holdEligibleDues?.waiverRequestType === WAIVER_REQUEST_TYPE.WAIVER
+                                ? `Amount to be waived (100%)`
+                                : 'Penalty to be held (50%)'}
+                            </Typography>
+                            <Typography
+                              color="var(--text-primary)"
+                              className="text-[13px]"
+                              variant="p4"
+                            >
+                              {formatAmount(holdEligibleDues?.heldPenaltyCharge?.amount || 0)}
+                            </Typography>
+                          </div>
+                        </TooltipContent>
+                      </Tooltip>
+                    </>
                   )}
                 </Typography>
                 <Typography variant="p3" className={cx(styles.fw700, styles.emiPenaltyValue)}>
-                  <Popper
-                    placement="right-end"
-                    openOnClick={false}
-                    mainAxisOffset={17}
-                    crossAxisOffset={5.5}
-                    disableCloseOnOutsideClick
-                    transform={false}
-                  >
-                    <PopperTrigger openOnClick={false} ref={popperTriggerRef}>
-                      {showHoldEligibility
-                        ? `${
-                            holdEligibleDues?.heldPenaltyCharge?.amount > 0 ? '-' : ''
-                          } ${formatAmount(holdEligibleDues?.heldPenaltyCharge?.amount)}`
-                        : `${heldPenaltyCharge > 0 ? '-' : ''} ${formatAmount(heldPenaltyCharge)}`}
-                    </PopperTrigger>
-                    <PopperContent
-                      className={cx('penaltyPopperWrapper', 'swing')}
-                      arrowColor="var(--green-dark)"
-                      noHeader
-                    >
-                      {holdEligibleDues?.waiverRequestType === WAIVER_REQUEST_TYPE.WAIVER
-                        ? `Eligible for 100% waiver to close EMI`
-                        : 'Eligible for 50% of EMI Penalty'}
-                    </PopperContent>
-                  </Popper>
+                  {showHoldEligibility
+                    ? `${holdEligibleDues?.heldPenaltyCharge?.amount > 0 ? '-' : ''} ${formatAmount(
+                        holdEligibleDues?.heldPenaltyCharge?.amount
+                      )}`
+                    : `${heldPenaltyCharge > 0 ? '-' : ''} ${formatAmount(heldPenaltyCharge)}`}
                 </Typography>
               </GridRow>
             )}
-
             <GridRow className={cx(styles.emiPenaltyCharge, styles.justify_btw)}>
               <Typography variant="p3" className={styles.emiPenaltyText}>
                 Paid Amount

src/pages/Dashboard/AmountdueCard.module.scss

@@ -173,3 +173,7 @@
   border-radius: 4px;
   background: var(--grayscale-warm-4);
 }
+
+.arrow {
+  left: 60px !important;
+}