common tooltip

src/pages/Admin/Charity/Dashboard/Schedule/AllocationSlider.tsx

@@ -3,7 +3,7 @@ import leaf from "assets/icons/leaf.png";
 import sendMoney from "assets/icons/send-money.png";
 import Icon from "components/Icon";
 import Image from "components/Image";
-import { Arrow, Content, Tooltip } from "components/Tooltip";
+
 import { humanize } from "helpers";
 import type { ReactNode } from "react";
 import type { Allocation } from "types/aws";
@@ -14,6 +14,7 @@ interface Props {
   /** cash, liq, lock */
   value: Allocation;
   onChange: (value: Allocation) => void;
+  classes?: string;
 }
 
 export type Boundary = [number, number];
@@ -35,13 +36,14 @@ export function AllocationSlider({
   value,
   onChange,
   amount,
+  classes = "",
 }: Props) {
   const boundary = toBoundary(value);
 
   return (
-    <div className="grid">
+    <div className={`${classes} grid gap-y-4`}>
       {/** percentages */}
-      <div className="grid grid-cols-[auto_auto_1fr_auto_auto] gap-y-2">
+      <div className="grid grid-cols-[auto_auto_1fr_auto] gap-y-2">
         <Row
           title="Grant"
           icon={<Icon type="ArrowRight" className="text-gray" size={20} />}
@@ -67,7 +69,7 @@ export function AllocationSlider({
         value={boundary}
         minStepsBetweenThumbs={0}
         onValueChange={(b: Boundary) => onChange(toAlloc(b))}
-        className="group/slider relative flex items-center select-none touch-none mt-5"
+        className="group/slider relative flex items-center select-none touch-none mt-2"
         disabled={disabled}
       >
         <Slider.Track
@@ -100,20 +102,11 @@ function Row(props: IRow) {
       {props.icon}
       <p className="text-sm ml-2">{props.title}</p>
       <p className="text-gray text-xs text-right mr-2">{props.pct}%</p>
-      <p className={`text-sm text-right ${isLessThanMin ? "text-amber" : ""}`}>
+      <p
+        className={`text-sm text-right ${isLessThanMin ? "text-amber-d1" : ""}`}
+      >
         $ {humanize(num)}
       </p>
-
-      {isLessThanMin ? (
-        <Tooltip
-          trigger={<Icon type="Info" size={14} className="text-amber" />}
-        >
-          <Content className="bg-navy-d4 text-white p-3 isolate z-[60] text-xs w-40 rounded-lg">
-            Less than minimum of $50, would be processed next period.
-            <Arrow />
-          </Content>
-        </Tooltip>
-      ) : null}
     </div>
   );
 }

src/pages/Admin/Charity/Dashboard/Schedule/Edit.tsx

@@ -1,24 +1,37 @@
 import Modal from "components/Modal";
+import { Info } from "components/Status";
 import { useErrorContext } from "contexts/ErrorContext";
 import { useModalContext } from "contexts/ModalContext";
 import { humanize } from "helpers";
 import { useState } from "react";
 import { useEditEndowmentMutation } from "services/aws/aws";
 import type { Allocation } from "types/aws";
 import { AllocationSlider } from "./AllocationSlider";
+import { MIN_PROCESSING_AMOUNT, unprocessed } from "./common";
 
 export function Edit(props: Allocation & { id: number; amount: number }) {
   const { closeModal } = useModalContext();
   const [editEndow, { isLoading }] = useEditEndowmentMutation();
   const { handleError } = useErrorContext();
   const [alloc, setAlloc] = useState<Allocation>(props);
 
+  const leftover = unprocessed(alloc, props.amount);
+
   return (
-    <Modal className="fixed-center z-10 grid text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded-lg p-6">
-      <div className="mb-6 flex justify-between border-b border-gray-l4 pb-2">
+    <Modal className="fixed-center z-10 grid gap-y-4 text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded-lg p-6">
+      <div className="flex justify-between border-b border-gray-l4 pb-2">
         <h4>Edit allocation</h4>
         <p>$ {humanize(props.amount)}</p>
       </div>
+
+      {leftover > 0 && (
+        <Info classes="!text-amber-d1">
+          We process donations monthly, with a minimum balance requirement of $
+          {MIN_PROCESSING_AMOUNT} per bucket. If your balance in any bucket is
+          below ${MIN_PROCESSING_AMOUNT}, it will be carried over to the next
+          month until it exceeds $50
+        </Info>
+      )}
       <AllocationSlider
         amount={props.amount}
         disabled={isLoading}
@@ -28,7 +41,7 @@ export function Edit(props: Allocation & { id: number; amount: number }) {
       <button
         disabled={isLoading}
         type="button"
-        className="btn btn-blue px-4 py-2 text-sm uppercase mt-10 rounded-full"
+        className="btn btn-blue px-4 py-2 text-sm uppercase mt-4 rounded-full"
         onClick={async () => {
           try {
             await editEndow({ id: props.id, allocation: alloc }).unwrap();

src/pages/Admin/Charity/Dashboard/Schedule/Schedule.tsx

@@ -1,13 +1,16 @@
 import leaf from "assets/icons/leaf.png";
 import sendMoney from "assets/icons/send-money.png";
 import Icon from "components/Icon";
+import { Info } from "components/Status";
 import { Arrow, Content, Tooltip } from "components/Tooltip";
 import { useModalContext } from "contexts/ModalContext";
 import { humanize } from "helpers";
 import { useAdminContext } from "pages/Admin/Context";
 import type { ReactNode } from "react";
 import { useEndowmentQuery } from "services/aws/aws";
+import type { Allocation } from "types/aws";
 import { Edit } from "./Edit";
+import { MIN_PROCESSING_AMOUNT, unprocessed } from "./common";
 
 interface Props {
   amount: number;
@@ -23,6 +26,16 @@ export function Schedule(props: Props) {
     fields: ["allocation"],
   });
 
+  const allocation: Allocation = !endow
+    ? { cash: 0, liq: 50, lock: 50 }
+    : {
+        cash: endow.allocation?.cash ?? 0,
+        liq: endow.allocation?.liq ?? 50,
+        lock: endow.allocation?.lock ?? 50,
+      };
+
+  const leftover = unprocessed(allocation, props.amount);
+
   return (
     <div className="p-4 grid rounded border border-gray-l4 mt-4">
       <div className="flex flex-row items-center justify-between space-y-0">
@@ -33,11 +46,7 @@ export function Schedule(props: Props) {
           className="hover:text-blue disabled:text-gray"
           onClick={() => {
             if (!endow) throw "@dev: no endow";
-            showModal(Edit, {
-              ...(endow.allocation ?? { cash: 0, liq: 50, lock: 50 }),
-              amount: props.amount,
-              id,
-            });
+            showModal(Edit, { ...allocation, amount: props.amount, id });
           }}
         >
           <Icon type="Pencil" className="h-4 w-4" />
@@ -50,6 +59,14 @@ export function Schedule(props: Props) {
           in {props.periodRemaining}
         </span>
       </p>
+      {leftover > 0 && (
+        <Info classes="!text-amber-d1 mb-4">
+          We process donations monthly, with a minimum balance requirement of $
+          {MIN_PROCESSING_AMOUNT} per bucket. If your balance in any bucket is
+          below ${MIN_PROCESSING_AMOUNT}, it will be carried over to the next
+          month until it exceeds $50
+        </Info>
+      )}
       <div className="grid grid-cols-[auto_auto_auto_1fr_auto] gap-y-2 gap-x-2">
         <Row
           icon={<Icon type="ArrowRight" className="h-4 w-4 mr-2" />}
@@ -110,21 +127,11 @@ function Row({ pct, icon, title, amount }: IRow) {
       <span className="ml-2 text-navy-l1 text-sm">{pct ?? 50} %</span>
       <span
         className={`justify-self-end font-bold ${
-          isLessThanMin ? "text-amber" : ""
+          isLessThanMin ? "text-amber-d1" : ""
         }`}
       >
         $ {humanize((pct / 100) * amount)}
       </span>
-      {isLessThanMin && (
-        <Tooltip
-          trigger={<Icon type="Info" size={14} className="text-amber" />}
-        >
-          <Content className="p-3 rounded-lg bg-navy-d4 text-white text-sm">
-            Less than min
-            <Arrow />
-          </Content>
-        </Tooltip>
-      )}
     </div>
   );
 }

src/pages/Admin/Charity/Dashboard/Schedule/common.ts

@@ -0,0 +1,11 @@
+import type { Allocation } from "types/aws";
+
+export const MIN_PROCESSING_AMOUNT = 50;
+export const unprocessed = (alloc: Allocation, amount: number) => {
+  return Object.values(alloc).reduce((unprocessed, pct) => {
+    const val = (pct / 100) * amount;
+    if (val === 0) return unprocessed;
+    if (val > MIN_PROCESSING_AMOUNT) return unprocessed;
+    return unprocessed + val;
+  }, 0);
+};

tailwind.config.js

@@ -78,6 +78,8 @@ module.exports = {
         l6: "#FFFFFF",
       },
       amber: {
+        d2: "#b45309",
+        d1: "#d97706",
         DEFAULT: "#f59e0b",
         l3: "#fcd34d",
         l4: "#fef3c7",