@greatapps/common 1.1.792 → 1.1.794

package/src/components/ui/data-display/SuccessConfettiIcon.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Selo de sucesso com confetes — a arte de sempre, agora animada.
+ *
+ * A cada mount o selo entra com spring enquanto o contorno se desenha, o check risca em
+ * seguida e os confetes explodem do centro pra fora (os mais próximos primeiro), desenhando
+ * o traço no voo; depois ficam flutuando devagar, cada um no seu ritmo.
+ *
+ * ANIMAÇÃO: CSS puro injetado pelo próprio componente (mesmo padrão do `ImageCropModal`), e
+ * não classes vindas do `globals.css` de cada app como no `AiCreditsOfferModal`. Aqui isso
+ * importa: é um ícone folha que qualquer app pode renderizar, então carregar o CSS junto
+ * evita ter que replicar um bloco de keyframes nos quatro consumidores e mantê-los em sincronia.
+ *
+ * Comprimento de traço e vetor de explosão dependem da geometria de cada path, então são
+ * medidos no cliente (`getTotalLength`/`getBBox`) e injetados como CSS vars por elemento. Só
+ * ligamos a classe de play depois de medir — antes disso os traços ficam invisíveis, o que
+ * também deixa o `useEffect` (em vez de `useLayoutEffect`) seguro: não há flash de conteúdo
+ * não animado, e a lib não precisa supor se o consumidor renderiza no servidor.
+ */
+
+const ANIMATION_CSS = `
+.gp-confetti {
+  --gp-confetti-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%,
+    1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
+    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%,
+    1.003 76.9%, 1.004 83.8%, 1);
+  --gp-confetti-out: cubic-bezier(0.22, 1, 0.36, 1);
+  overflow: visible;
+}
+@supports not (animation-timing-function: linear(0, 1)) {
+  .gp-confetti { --gp-confetti-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }
+}
+.gp-confetti path {
+  stroke-dasharray: var(--gp-len) calc(var(--gp-len) + 4px);
+  stroke-dashoffset: calc(var(--gp-len) + 2px);
+  transform-box: fill-box;
+  transform-origin: center;
+  opacity: 0;
+}
+.gp-confetti-seal {
+  transform-box: fill-box;
+  transform-origin: center;
+  opacity: 0;
+  transform: scale(0.4);
+}
+.gp-confetti--play .gp-confetti-seal {
+  animation:
+    gp-confetti-seal-pop 670ms var(--gp-confetti-spring) 80ms both,
+    gp-confetti-seal-breathe 3600ms ease-in-out 930ms infinite alternate;
+}
+.gp-confetti--play .gp-confetti-seal path { opacity: 1; }
+.gp-confetti--play .gp-confetti-badge {
+  animation: gp-confetti-draw 470ms var(--gp-confetti-out) 95ms both;
+}
+.gp-confetti--play .gp-confetti-check {
+  animation: gp-confetti-draw 320ms var(--gp-confetti-out) 310ms both;
+}
+.gp-confetti-piece {
+  --gp-confetti-delay: calc(375ms + var(--gp-i, 0) * 28ms);
+  --gp-confetti-drawtime: 350ms;
+}
+.gp-confetti-squiggle { --gp-confetti-drawtime: 600ms; }
+.gp-confetti--play .gp-confetti-piece {
+  animation:
+    gp-confetti-pop 735ms var(--gp-confetti-spring) var(--gp-confetti-delay) both,
+    gp-confetti-draw var(--gp-confetti-drawtime) var(--gp-confetti-out) var(--gp-confetti-delay) both,
+    gp-confetti-float var(--gp-fd, 3200ms) ease-in-out calc(var(--gp-confetti-delay) + 735ms) infinite alternate;
+}
+@keyframes gp-confetti-seal-pop { to { opacity: 1; transform: scale(1); } }
+@keyframes gp-confetti-seal-breathe { from { transform: scale(1); } to { transform: scale(1.025); } }
+@keyframes gp-confetti-draw { to { stroke-dashoffset: 0; } }
+@keyframes gp-confetti-pop {
+  from { opacity: 0; transform: translate(var(--gp-tx, 0px), var(--gp-ty, 0px)) scale(0.2) rotate(var(--gp-rot0, 0deg)); }
+  to   { opacity: var(--gp-op, 1); transform: translate(0, 0) scale(1) rotate(0deg); }
+}
+@keyframes gp-confetti-float {
+  from { opacity: var(--gp-op, 1); transform: translate(0, 0) rotate(0deg); }
+  to   { opacity: calc(var(--gp-op, 1) * 0.55); transform: translate(var(--gp-fx, 0px), var(--gp-fy, 0px)) rotate(var(--gp-fr, 0deg)); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gp-confetti path,
+  .gp-confetti-seal { animation: none !important; }
+  .gp-confetti-seal { opacity: 1 !important; transform: none !important; }
+  .gp-confetti path {
+    opacity: var(--gp-op, 1) !important;
+    stroke-dashoffset: 0 !important;
+    transform: none !important;
+  }
+}
+`;
+
+/** Centro do selo no viewBox — os confetes explodem a partir daqui. */
+const CENTER = { x: 74.5, y: 41.5 };
+
+const rand = (min: number, max: number) => min + Math.random() * (max - min);
+
+export function SuccessConfettiIcon({ className }: { className?: string }) {
+  const ref = useRef<SVGSVGElement>(null);
+  const [play, setPlay] = useState(false);
+
+  useEffect(() => {
+    const svg = ref.current;
+    if (!svg) return;
+
+    try {
+      svg.querySelectorAll<SVGPathElement>('path').forEach((path) => {
+        path.style.setProperty('--gp-len', `${path.getTotalLength().toFixed(2)}px`);
+      });
+
+      Array.from(svg.querySelectorAll<SVGPathElement>('.gp-confetti-piece'))
+        .map((path) => {
+          const box = path.getBBox();
+          const dx = box.x + box.width / 2 - CENTER.x;
+          const dy = box.y + box.height / 2 - CENTER.y;
+          return { path, dx, dy, dist: Math.hypot(dx, dy) };
+        })
+        .sort((a, b) => a.dist - b.dist)
+        .forEach(({ path, dx, dy }, i) => {
+          path.style.setProperty('--gp-i', String(i));
+          // começa mais perto do selo e voa pra posição final
+          path.style.setProperty('--gp-tx', `${(-dx * 0.55).toFixed(2)}px`);
+          path.style.setProperty('--gp-ty', `${(-dy * 0.55).toFixed(2)}px`);
+          path.style.setProperty('--gp-rot0', `${rand(-60, 60).toFixed(1)}deg`);
+          // deriva idle: pequena, lenta e diferente pra cada peça
+          path.style.setProperty('--gp-fx', `${rand(-2.2, 2.2).toFixed(2)}px`);
+          path.style.setProperty('--gp-fy', `${rand(-2.6, 2.6).toFixed(2)}px`);
+          path.style.setProperty('--gp-fr', `${rand(-16, 16).toFixed(1)}deg`);
+          path.style.setProperty('--gp-fd', `${Math.round(rand(2400, 4200))}ms`);
+        });
+    } catch {
+      // svg sem layout (display:none) — sem medidas o CSS cai pro traço inteiro, só anima pop/float
+    }
+
+    setPlay(true);
+  }, []);
+
+  return (
+    <>
+      <style>{ANIMATION_CSS}</style>
+      <svg
+        ref={ref}
+        width="149"
+        height="83"
+        viewBox="0 0 149 83"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={['gp-confetti', play && 'gp-confetti--play', className].filter(Boolean).join(' ')}
+        aria-hidden
+      >
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M18.6348 28.4102C18.6348 30.574 19.9096 30.8716 21.7838 31.1393" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M109.117 41.4266C110.106 41.3745 110.639 40.9023 110.797 39.957" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M64.6035 75.1963C62.2234 77.2378 61.7986 79.4524 63.2302 82.1283" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M108.953 6.33984C106.531 6.40444 105.075 7.59006 104.965 10.072C104.898 11.5735 105.114 12.692 103.285 13.0577" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M131.021 51.2682C130.631 53.6598 129.26 54.9429 126.786 54.7178C125.289 54.5817 124.21 54.217 123.601 55.9798" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M34.1753 59.0104C33.2963 61.0245 32.8213 61.1372 30.7893 61.1213C29.7394 61.1131 28.0011 61.8028 27.5653 62.8448" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 1 } as React.CSSProperties} d="M112.314 25.2715L113.514 24.7026" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 1 } as React.CSSProperties} d="M51.492 49.2344C51.0065 49.3838 50.6337 49.7823 50.2324 50.0741" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M77.8867 9.72656C77.4011 9.87596 77.3223 10.0019 77.3223 10.0019" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M10.7246 56.0059C10.239 56.1553 10.1602 56.2812 10.1602 56.2812" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M28.3302 80.1108C28.6726 79.7356 28.6766 79.587 28.6766 79.587" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M128.043 49.0421C127.77 48.6138 127.627 48.5713 127.627 48.5713" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M135.461 29.4915C134.972 29.6314 134.891 29.7558 134.891 29.7558" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 0.4 } as React.CSSProperties} d="M52.3396 22.1222C52.0664 21.6939 51.924 21.6514 51.924 21.6514" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece" style={{ '--gp-op': 1 } as React.CSSProperties} d="M45.9383 40.1115L45.1508 39.1744" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <path className="gp-confetti-piece gp-confetti-squiggle" style={{ '--gp-op': 0.8 } as React.CSSProperties} d="M97.7421 69.0733C97.1523 69.9712 97.989 71.6124 98.5913 72.3132C99.7005 73.6036 100.945 73.8145 102.199 73.9149C103.234 73.9977 105.21 73.5621 105.476 72.3174C105.948 71.1367 104.935 69.8432 103.934 70.3872C102.571 71.1277 103.112 72.7192 103.73 73.7787C104.604 75.2776 105.879 76.6545 107.249 77.7108C108.333 78.5474 109.732 79.029 110.308 79.0142" stroke="#12B76A" strokeWidth="1.41098" strokeLinecap="round"/>
+        <path className="gp-confetti-piece gp-confetti-squiggle" style={{ '--gp-op': 1 } as React.CSSProperties} d="M55.1022 11.4613C55.7297 11.187 55.8499 9.89737 55.7699 9.24592C55.6225 8.04626 55.0286 7.4129 54.3908 6.83895C53.8646 6.36537 52.6539 5.803 52.0797 6.41026C51.4175 6.89618 51.5122 8.05793 52.2377 8.15673C53.2253 8.2912 53.4868 7.15184 53.5227 6.28731C53.5734 5.06421 53.367 3.74644 52.9989 2.5746C52.7073 1.64647 52.1242 0.793399 51.8104 0.565035" stroke="#12B76A" strokeWidth="1.12879" strokeLinecap="round"/>
+        <g className="gp-confetti-seal">
+          <path className="gp-confetti-badge" fillRule="evenodd" clipRule="evenodd" d="M58.1139 44.0572L60.4163 47.0706L60.9134 50.8219C61.1889 52.9028 62.8247 54.5405 64.9056 54.818L68.6666 55.3208L71.678 57.6214C73.3446 58.8949 75.6548 58.8949 77.3214 57.6214L80.3348 55.3189H80.3309L84.0842 54.8218C86.1651 54.5463 87.8028 52.9105 88.0802 50.8297L88.5812 47.0687C88.5812 47.0706 89.7449 45.5466 90.8836 44.0572C92.1572 42.3906 92.1553 40.0805 90.8836 38.4138L88.585 35.3985L88.0879 31.6472C87.8124 29.5663 86.1766 27.9286 84.0958 27.6512L80.3329 27.1502L77.3214 24.8497C75.6548 23.5761 73.3446 23.5761 71.678 24.8497L68.6646 27.1502H68.6685L64.9152 27.6492C62.8344 27.9248 61.1966 29.5605 60.9192 31.6414L60.4163 35.4024C60.4163 35.4004 59.2526 36.9245 58.1139 38.4138C56.8422 40.0785 56.8422 42.3906 58.1139 44.0572V44.0572Z" stroke="#12B76A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          <path className="gp-confetti-check" d="M79.9009 38.541L73.1554 45.2865L69.1035 41.2384" stroke="#12B76A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </g>
+      </svg>
+    </>
+  );
+}

package/src/enums/AccountHubFlow.ts

@@ -5,4 +5,5 @@ export enum AccountHubFlow {
   RECEIPT = 'receipt',
   CREATE_PROJECT = 'create-project',
   ADD_USER = 'add-user',
+  CONFIRMATION = 'confirmation',
 }

package/src/index.ts

@@ -659,9 +659,13 @@ export {
   ACCOUNT_HUB_SECTION_PARAM,
   ACCOUNT_HUB_FLOW_PARAM,
   ACCOUNT_HUB_COUPON_PARAM,
+  ACCOUNT_HUB_PLAN_PARAM,
+  ACCOUNT_HUB_TOTAL_PARAM,
+  ACCOUNT_HUB_PERIOD_PARAM,
+  ACCOUNT_HUB_CHARGE_PARAM,
 } from "./modules/accounts/constants/account-hub-link.constants";
 export { LEGACY_ACCOUNT_ROUTES } from "./modules/accounts/constants/legacy-account-routes.constants";
-export type { AccountHubLink, LegacyAccountRouteTarget } from "./modules/accounts/types/account-hub-link.type";
+export type { AccountHubLink, AccountHubPurchase, LegacyAccountRouteTarget } from "./modules/accounts/types/account-hub-link.type";
 export { parseAccountHubLink } from "./modules/accounts/utils/parse-account-hub-link";
 export { buildAccountHubUrl } from "./modules/accounts/utils/build-account-hub-url";
 export { mapLegacyAccountRoute } from "./modules/accounts/utils/map-legacy-account-route";

package/src/modules/accounts/constants/account-hub-link.constants.ts

@@ -1,3 +1,7 @@
 export const ACCOUNT_HUB_SECTION_PARAM = 'account';
 export const ACCOUNT_HUB_FLOW_PARAM = 'flow';
 export const ACCOUNT_HUB_COUPON_PARAM = 'coupon';
+export const ACCOUNT_HUB_PLAN_PARAM = 'plan';
+export const ACCOUNT_HUB_TOTAL_PARAM = 'total';
+export const ACCOUNT_HUB_PERIOD_PARAM = 'period';
+export const ACCOUNT_HUB_CHARGE_PARAM = 'charge';

package/src/modules/accounts/types/account-hub-link.type.ts

@@ -1,10 +1,19 @@
 import type { AccountHubFlow } from '../../../enums/AccountHubFlow';
+import type { BillingPeriod } from '../../subscriptions/types/billing-period.type';
 import type { MyAccountSection } from '../../../store/useAccountModals';
 
+export interface AccountHubPurchase {
+  planName: string;
+  total: number;
+  billingPeriod: BillingPeriod;
+  immediateChargeTotal: number | null;
+}
+
 export interface AccountHubLink {
   section: MyAccountSection;
   flow?: AccountHubFlow;
   couponCode?: string;
+  purchase?: AccountHubPurchase;
 }
 
 export interface LegacyAccountRouteTarget {

package/src/modules/accounts/utils/build-account-hub-url.ts

@@ -1,7 +1,11 @@
 import {
+  ACCOUNT_HUB_CHARGE_PARAM,
   ACCOUNT_HUB_COUPON_PARAM,
   ACCOUNT_HUB_FLOW_PARAM,
+  ACCOUNT_HUB_PERIOD_PARAM,
+  ACCOUNT_HUB_PLAN_PARAM,
   ACCOUNT_HUB_SECTION_PARAM,
+  ACCOUNT_HUB_TOTAL_PARAM,
 } from '../constants/account-hub-link.constants';
 import type { AccountHubLink } from '../types/account-hub-link.type';
 
@@ -10,5 +14,15 @@ export function buildAccountHubUrl(baseUrl: string, link: AccountHubLink, pathna
   url.searchParams.set(ACCOUNT_HUB_SECTION_PARAM, link.section);
   if (link.flow) url.searchParams.set(ACCOUNT_HUB_FLOW_PARAM, link.flow);
   if (link.couponCode) url.searchParams.set(ACCOUNT_HUB_COUPON_PARAM, link.couponCode);
+
+  if (link.purchase) {
+    url.searchParams.set(ACCOUNT_HUB_PLAN_PARAM, link.purchase.planName);
+    url.searchParams.set(ACCOUNT_HUB_TOTAL_PARAM, String(link.purchase.total));
+    url.searchParams.set(ACCOUNT_HUB_PERIOD_PARAM, link.purchase.billingPeriod);
+    if (link.purchase.immediateChargeTotal != null) {
+      url.searchParams.set(ACCOUNT_HUB_CHARGE_PARAM, String(link.purchase.immediateChargeTotal));
+    }
+  }
+
   return url.toString();
 }

package/src/modules/accounts/utils/is-billing-period.ts

@@ -0,0 +1,7 @@
+import type { BillingPeriod } from '../../subscriptions/types/billing-period.type';
+
+const BILLING_PERIODS: string[] = ['monthly', 'semiannual', 'annual'];
+
+export function isBillingPeriod(value: string): value is BillingPeriod {
+  return BILLING_PERIODS.includes(value);
+}

package/src/modules/accounts/utils/parse-account-hub-link.ts

@@ -1,13 +1,36 @@
 import { AccountHubFlow } from '../../../enums/AccountHubFlow';
 import {
+  ACCOUNT_HUB_CHARGE_PARAM,
   ACCOUNT_HUB_COUPON_PARAM,
   ACCOUNT_HUB_FLOW_PARAM,
+  ACCOUNT_HUB_PERIOD_PARAM,
+  ACCOUNT_HUB_PLAN_PARAM,
   ACCOUNT_HUB_SECTION_PARAM,
+  ACCOUNT_HUB_TOTAL_PARAM,
 } from '../constants/account-hub-link.constants';
-import type { AccountHubLink } from '../types/account-hub-link.type';
+import type { AccountHubLink, AccountHubPurchase } from '../types/account-hub-link.type';
 import { isAccountHubFlow } from './is-account-hub-flow';
+import { isBillingPeriod } from './is-billing-period';
 import { isMyAccountSection } from './is-my-account-section';
 
+function readPurchase(searchParams: URLSearchParams, flow?: AccountHubFlow): AccountHubPurchase | undefined {
+  if (flow !== AccountHubFlow.CONFIRMATION) return undefined;
+
+  const planName = searchParams.get(ACCOUNT_HUB_PLAN_PARAM);
+  const total = Number(searchParams.get(ACCOUNT_HUB_TOTAL_PARAM));
+  const period = searchParams.get(ACCOUNT_HUB_PERIOD_PARAM);
+  if (!planName || !Number.isFinite(total) || !period || !isBillingPeriod(period)) return undefined;
+
+  const charge = Number(searchParams.get(ACCOUNT_HUB_CHARGE_PARAM));
+
+  return {
+    planName,
+    total,
+    billingPeriod: period,
+    immediateChargeTotal: Number.isFinite(charge) && charge > 0 ? charge : null,
+  };
+}
+
 export function parseAccountHubLink(searchParams: URLSearchParams): AccountHubLink | null {
   const section = searchParams.get(ACCOUNT_HUB_SECTION_PARAM);
   if (!section || !isMyAccountSection(section)) return null;
@@ -17,5 +40,5 @@ export function parseAccountHubLink(searchParams: URLSearchParams): AccountHubLi
   const couponCode =
     resolvedFlow === AccountHubFlow.PLANS ? (searchParams.get(ACCOUNT_HUB_COUPON_PARAM) ?? undefined) : undefined;
 
-  return { section, flow: resolvedFlow, couponCode };
+  return { section, flow: resolvedFlow, couponCode, purchase: readPurchase(searchParams, resolvedFlow) };
 }