@greatapps/common 1.1.237 → 1.1.239

package/dist/store/useBuyCreditsModal.mjs

@@ -0,0 +1,18 @@
+import { useModalManager } from "./useModalManager";
+const useBuyCreditsModal = () => {
+  const { activeModal, modalData, openModal, closeModal } = useModalManager();
+  const isOpen = activeModal === "buyCreditsModal";
+  const data = modalData;
+  return {
+    open: isOpen,
+    onConfirm: data?.onConfirm,
+    initialActiveCardId: data?.initialActiveCardId,
+    initialSelectedValue: data?.initialSelectedValue,
+    openModal: (onConfirm) => openModal("buyCreditsModal", { onConfirm }),
+    closeModal
+  };
+};
+export {
+  useBuyCreditsModal
+};
+//# sourceMappingURL=useBuyCreditsModal.mjs.map

package/dist/store/useBuyCreditsModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/store/useBuyCreditsModal.ts"],"sourcesContent":["import { useModalManager } from './useModalManager';\n\ninterface BuyCreditsModalData {\n  onConfirm?: (creditAmount: number, price: number) => void;\n  initialActiveCardId?: string;\n  initialSelectedValue?: number;\n}\n\nexport const useBuyCreditsModal = () => {\n  const { activeModal, modalData, openModal, closeModal } = useModalManager();\n\n  const isOpen = activeModal === 'buyCreditsModal';\n  const data = modalData as BuyCreditsModalData;\n\n  return {\n    open: isOpen,\n    onConfirm: data?.onConfirm,\n    initialActiveCardId: data?.initialActiveCardId,\n    initialSelectedValue: data?.initialSelectedValue,\n\n    openModal: (onConfirm?: (creditAmount: number, price: number) => void) =>\n      openModal('buyCreditsModal', { onConfirm }),\n    closeModal,\n  };\n};\n"],"mappings":"AAAA,SAAS,uBAAuB;AAQzB,MAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,aAAa,WAAW,WAAW,WAAW,IAAI,gBAAgB;AAE1E,QAAM,SAAS,gBAAgB;AAC/B,QAAM,OAAO;AAEb,SAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW,MAAM;AAAA,IACjB,qBAAqB,MAAM;AAAA,IAC3B,sBAAsB,MAAM;AAAA,IAE5B,WAAW,CAAC,cACV,UAAU,mBAAmB,EAAE,UAAU,CAAC;AAAA,IAC5C;AAAA,EACF;AACF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.237",
+  "version": "1.1.239",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/modals/BuyCreditsModal.tsx

@@ -0,0 +1,304 @@
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { Separator } from '../ui/data-display/Separator';
+import { Toast } from '../ui/feedback/Toast';
+import { SelectField } from '../ui/form/SelectField';
+import { Skeleton } from '../ui/feedback/Skeleton';
+import { PaymentInfoCard } from '../ui/data-display/PaymentInfoCard';
+import { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';
+import {
+  AI_CREDIT_OPTIONS,
+  AI_CREDIT_VALUES,
+} from '../../modules/subscriptions/constants/addons.constants';
+import { useBuyCreditsModal } from '../../store/useBuyCreditsModal';
+import { useModalManager } from '../../store/useModalManager';
+import { useCards } from '../../modules/cards/hooks/cards.hook';
+import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
+import { useCalculateSubscription } from '../../modules/subscriptions/hooks/calculate-subscription.hook';
+import { useUpdateSubscriptionPlan } from '../../modules/subscriptions/hooks/update-subscription-plan.hook';
+import { buildPlanExtras } from '../../modules/subscriptions/utils/build-plan-extras';
+import { getPriceFromCalculatedData } from '../../modules/subscriptions/utils/periodicity';
+import { IconInfoCircle, IconX, IconLoader2 } from '@tabler/icons-react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import z from 'zod';
+import { toast } from 'sonner';
+
+const buyCreditSchema = z.object({
+  creditOption: z.number().refine((val) => AI_CREDIT_VALUES.has(val), {
+    message: 'Selecione uma opção de créditos',
+  }),
+  selectedCardId: z.string().min(1, 'Selecione um cartão'),
+});
+
+type BuyCreditFormData = z.infer<typeof buyCreditSchema>;
+
+export default function BuyCreditsModal() {
+  const { open, closeModal } = useBuyCreditsModal();
+  const { openModal } = useModalManager();
+  const { data: cardsData } = useCards();
+  const { data: subscriptionData } = useActiveSubscription();
+  const subscription = subscriptionData?.data?.[0] ?? null;
+
+  const {
+    mutate: calculate,
+    isPending: isCalculatePending,
+    data: calculateData,
+  } = useCalculateSubscription();
+  const updatePlanMutation = useUpdateSubscriptionPlan();
+
+  const aiItem = useMemo(
+    () => subscription?.items?.find((item) => item.id_addon === ADDON_IDS.AI),
+    [subscription]
+  );
+
+  const currentCredits = aiItem?.quantity ?? 0;
+  const subscriptionId = subscription?.id;
+  const planId = subscription?.id_plan;
+
+  const form = useForm<BuyCreditFormData>({
+    resolver: zodResolver(buyCreditSchema),
+    mode: 'onChange',
+    defaultValues: {
+      creditOption: currentCredits,
+      selectedCardId: cardsData?.data?.[0]?.id.toString() ?? '',
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      form.reset({
+        creditOption: currentCredits,
+        selectedCardId:
+          form.getValues('selectedCardId') || cardsData?.data?.[0]?.id.toString() || '',
+      });
+
+      calculate({
+        id_product: 1,
+        ...(planId != null && { id_plan: planId }),
+        ...(subscriptionId != null && { id_subscription: subscriptionId }),
+        plan_extras: buildPlanExtras(subscription?.items ?? [], [
+          {
+            id_addon: ADDON_IDS.AI,
+            quantity: currentCredits,
+            currency: 'BRL',
+          },
+        ]),
+      });
+    }
+  }, [open, subscription, currentCredits, cardsData, form, calculate, planId, subscriptionId]);
+
+  const creditOption = form.watch('creditOption');
+  const selectedCardId = form.watch('selectedCardId');
+  const { isDirty, isSubmitting, isValid } = form.formState;
+
+  const subscriptionItems = useMemo(() => subscription?.items ?? [], [subscription]);
+
+  const handleCreditOptionChange = useCallback(
+    (value: string | number | boolean) => {
+      const credits = Number(value);
+
+      form.setValue('creditOption', credits, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+
+      const option = AI_CREDIT_OPTIONS.find((opt) => opt.credits === credits);
+      if (!option) return;
+
+      calculate({
+        id_product: 1,
+        ...(planId != null && { id_plan: planId }),
+        ...(subscriptionId != null && { id_subscription: subscriptionId }),
+        plan_extras: buildPlanExtras(subscriptionItems, [
+          {
+            id_addon: ADDON_IDS.AI,
+            quantity: option.credits,
+            currency: 'BRL',
+          },
+        ]),
+      });
+    },
+    [form, subscriptionId, planId, subscriptionItems, calculate]
+  );
+
+  const calculatedData = calculateData?.data ?? null;
+
+  const totalPrice = useMemo(() => {
+    if (!calculatedData) return null;
+    return getPriceFromCalculatedData(calculatedData, subscription?.periodicity);
+  }, [calculatedData, subscription]);
+
+  const formatPrice = useCallback((price: number) => {
+    return price.toLocaleString('pt-BR', {
+      style: 'currency',
+      currency: 'BRL',
+    });
+  }, []);
+
+  const isConfirmDisabled = !isDirty || !isValid || isCalculatePending || isSubmitting;
+
+  const handleClose = useCallback(() => {
+    form.reset();
+    closeModal();
+  }, [form, closeModal]);
+
+  const handleOpenAddCardModal = useCallback(() => {
+    openModal('addCardModal', {
+      returnToBuyCredits: true,
+      buyCreditsState: {
+        activeCardId: selectedCardId,
+        selectedValue: creditOption,
+      },
+    });
+  }, [openModal, selectedCardId, creditOption]);
+
+  const selectOptions = useMemo(() => {
+    return AI_CREDIT_OPTIONS.map((opt) => ({
+      value: opt.credits,
+      label: (
+        <div className="flex items-center justify-between gap-2 w-full">
+          <span className="paragraph-small-medium text-zinc-950 flex-1">
+            {opt.credits.toLocaleString('pt-BR')} créditos de IA
+          </span>
+          <span className="paragraph-small-medium text-zinc-500 opacity-70">{opt.priceLabel}</span>
+        </div>
+      ),
+      displayValue: `${opt.credits.toLocaleString('pt-BR')} créditos de IA`,
+    }));
+  }, []);
+
+  const onSubmit = useCallback(
+    async (data: BuyCreditFormData) => {
+      if (!subscriptionId) return;
+
+      const option = AI_CREDIT_OPTIONS.find((opt) => opt.credits === data.creditOption);
+      if (!option) return;
+
+      await updatePlanMutation.mutateAsync({
+        subscriptionId,
+        data: {
+          plan_extras: [
+            {
+              id_addon: ADDON_IDS.AI,
+              quantity: option.credits,
+            },
+          ],
+        },
+      });
+
+      toast.custom((t) => (
+        <Toast
+          variant="success"
+          message={`Créditos de IA alterados para ${data.creditOption.toLocaleString('pt-BR')}`}
+          toastId={t}
+        />
+      ));
+      form.reset();
+      closeModal();
+    },
+    [subscriptionId, updatePlanMutation, form, closeModal]
+  );
+
+  const renderPriceDisplay = useCallback(() => {
+    if (isCalculatePending) {
+      return <Skeleton className="h-7 w-24" />;
+    }
+    if (totalPrice !== null) {
+      return (
+        <span className="paragraph-xlarge-semibold text-zinc-950">
+          {totalPrice === 0 ? 'Incluso' : formatPrice(totalPrice)}
+        </span>
+      );
+    }
+    return <span className="paragraph-xlarge-semibold text-zinc-400">--</span>;
+  }, [isCalculatePending, totalPrice, formatPrice]);
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        showCloseButton={false}
+        className="flex flex-col p-0! gap-0! max-w-full! border-0 rounded-t-2xl rounded-b-none h-dvh top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[433px]! lg:h-auto! lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]! overflow-hidden lg:overflow-y-auto"
+      >
+        <DialogHeader className="px-4 py-3 border-b border-zinc-200 shrink-0 relative">
+          <DialogTitle className="paragraph-medium-semibold text-zinc-950 text-center">
+            Comprar créditos de IA
+          </DialogTitle>
+          <button
+            type="button"
+            onClick={handleClose}
+            className="absolute right-3 top-1/2 -translate-y-1/2 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors"
+          >
+            <IconX size={18} className="text-zinc-400" />
+          </button>
+        </DialogHeader>
+
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="flex flex-col flex-1 lg:flex-none overflow-hidden"
+        >
+          <div className="flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none overflow-y-auto">
+            <div className="flex flex-col gap-4">
+              <SelectField
+                options={selectOptions}
+                value={creditOption}
+                onChange={handleCreditOptionChange}
+                className="h-12!"
+              />
+
+              <PaymentInfoCard
+                selectedCardId={selectedCardId}
+                onCardSelect={(cardId) =>
+                  form.setValue('selectedCardId', cardId, { shouldValidate: true })
+                }
+                onOpenAddCard={handleOpenAddCardModal}
+              />
+
+              <div className="flex items-center gap-3 p-4 bg-cyan-50 rounded-lg">
+                <IconInfoCircle className="size-4 text-zinc-950 shrink-0" />
+                <span className="paragraph-small-regular text-zinc-950">
+                  As alterações entrarão em vigor a partir da sua próxima fatura.
+                </span>
+              </div>
+            </div>
+
+            <Separator className="bg-zinc-200 hidden lg:block" />
+
+            <div className="hidden lg:flex items-center justify-between">
+              <span className="paragraph-small-medium text-zinc-500">Valor total do plano</span>
+              {renderPriceDisplay()}
+            </div>
+
+            <Button
+              type="submit"
+              disabled={isConfirmDisabled}
+              className="w-full hidden lg:inline-flex"
+            >
+              {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
+              Confirmar e pagar
+            </Button>
+          </div>
+
+          <div className="flex flex-col gap-4 p-4 border-t border-zinc-200 shrink-0 lg:hidden">
+            <div className="flex items-center justify-between">
+              <span className="paragraph-small-medium text-zinc-500">Valor total do plano</span>
+              {renderPriceDisplay()}
+            </div>
+            <Button type="submit" disabled={isConfirmDisabled} className="w-full">
+              {isSubmitting && <IconLoader2 className="size-4 animate-spin" />}
+              Confirmar e pagar
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/navigation/subcomponents/CreditsCard.tsx

@@ -2,6 +2,7 @@
 
 import { useAppNavigationContext } from '../AppNavigationContext';
 import { Progress } from '../../../index';
+import { useBuyCreditsModal } from '../../../store/useBuyCreditsModal';
 
 export interface CreditsCardProps {
   used: number;
@@ -11,14 +12,16 @@ export interface CreditsCardProps {
 
 export function CreditsCard({ used, total, onClick }: CreditsCardProps) {
   const { breakpoint } = useAppNavigationContext();
+  const { openModal } = useBuyCreditsModal();
+  const handleClick = onClick ?? (() => openModal());
 
   // Only renders in mobile overlay
   if (breakpoint !== 'mobile') return null;
 
   return (
     <div
-      className={`flex flex-col bg-gray-950 rounded-lg gap-4 w-full px-4 pt-4 pb-[18px] ${onClick ? 'cursor-pointer' : ''}`}
-      onClick={onClick}
+      className="flex flex-col bg-gray-950 rounded-lg gap-4 w-full px-4 pt-4 pb-[18px] cursor-pointer"
+      onClick={handleClick}
     >
       <div className="flex items-center justify-between">
         <span className="paragraph-xsmall-semibold text-white">Créditos usados</span>