feat: confidence boost as a floating stamp. Enhance TierCard recommendation. Pricing calculator

src/components/PricingCalculator/Form.tsx

@@ -0,0 +1,101 @@
+import { Button, NumberInput, Select } from '@mantine/core';
+import type { LanguageCode } from '@notifycal/shared/types';
+import type { ReactElement } from 'react';
+import { useEffect, useRef } from 'react';
+import { getTimeOptions, getWorkingHoursOptions } from './calculator';
+import { translations } from './PricingCalculator';
+
+interface FormProps {
+  employees: number;
+  avgTimeWithClient: string;
+  workingHoursPerDay: string;
+  workingDaysPerMonth: number;
+  lang: LanguageCode;
+  onEmployeesChange: (value: number) => void;
+  onAvgTimeWithClientChange: (value: string) => void;
+  onWorkingHoursPerDayChange: (value: string) => void;
+  onWorkingDaysPerMonthChange: (value: number) => void;
+  onCalculate: (shouldClear?: boolean) => void;
+}
+
+export const Form = ({
+  employees,
+  avgTimeWithClient,
+  workingHoursPerDay,
+  workingDaysPerMonth,
+  lang,
+  onEmployeesChange,
+  onAvgTimeWithClientChange,
+  onWorkingHoursPerDayChange,
+  onWorkingDaysPerMonthChange,
+  onCalculate
+}: FormProps): ReactElement => {
+  const translation = translations[lang];
+  const timeOptions = getTimeOptions(translation.units);
+  const workingHoursOptions = getWorkingHoursOptions(translation.units);
+
+  const isFormValid = employees > 0 && workingDaysPerMonth > 0;
+  const wasValidRef = useRef(isFormValid);
+
+  useEffect(() => {
+    if (wasValidRef.current && !isFormValid) {
+      onCalculate(true);
+    }
+    wasValidRef.current = isFormValid;
+  }, [isFormValid, onCalculate]);
+
+  return (
+    <form className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
+      <NumberInput
+        className="w-full md:order-1"
+        label={translation.employees}
+        max={100}
+        min={0}
+        value={employees}
+        onChange={(value) => {
+          onEmployeesChange(Number(value) || 0);
+        }}
+      />
+      <Select
+        className="w-full md:order-2"
+        data={timeOptions}
+        label={translation.timeWithClient}
+        value={avgTimeWithClient}
+        onChange={(value) => {
+          onAvgTimeWithClientChange(value || '60');
+        }}
+      />
+      <Select
+        className="w-full md:order-4"
+        data={workingHoursOptions}
+        label={translation.workingHours}
+        value={workingHoursPerDay}
+        onChange={(value) => {
+          onWorkingHoursPerDayChange(value || '8');
+        }}
+      />
+      <NumberInput
+        className="w-full md:order-5"
+        label={translation.workingDays}
+        max={31}
+        min={0}
+        value={workingDaysPerMonth}
+        onChange={(value) => {
+          onWorkingDaysPerMonthChange(Number(value) || 0);
+        }}
+      />
+      <div className="md:order-3 md:row-span-2 flex items-center md:py-1 md:pt-6 md:pl-4">
+        <Button
+          className="w-full h-full md:min-h-[90px] text-sm font-bold py-4 md:py-0"
+          color="accent2"
+          size="lg"
+          variant="outline"
+          disabled={!isFormValid}
+          onClick={() => onCalculate()}
+        >
+          {translation.calculate}
+        </Button>
+      </div>
+    </form>
+  );
+};

src/components/PricingCalculator/HideCalculatorButton.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@mantine/core';
+import type { LanguageCode } from '@notifycal/shared/types';
+import { IconChevronUp } from '@tabler/icons-react';
+import type { ReactElement } from 'react';
+import { translations } from './PricingCalculator';
+
+interface HideCalculatorButtonProps {
+  lang: LanguageCode;
+  onCollapse: () => void;
+}
+
+export const HideCalculatorButton = ({ lang, onCollapse }: HideCalculatorButtonProps): ReactElement => {
+  const translation = translations[lang];
+
+  return (
+    <div className="mt-4 text-center">
+      <Button className="text-gray-600 hover:underline" size="sm" variant="transparent" onClick={onCollapse}>
+        <IconChevronUp className="mr-2" size={20} />
+        <span>{translation.hideCalculator}</span>
+        <IconChevronUp className="ml-2" size={20} />
+      </Button>
+    </div>
+  );
+};

src/components/PricingCalculator/PricingCalculator.tsx

@@ -0,0 +1,122 @@
+import { Card } from '@mantine/core';
+import type { TierInfoWithIcon } from '@notifycal/shared/components';
+import type { LanguageCode, TierId } from '@notifycal/shared/types';
+import { IconCalculator } from '@tabler/icons-react';
+import { useState, type FC } from 'react';
+import { calculateTierRecommendation, type CalculationResult } from './calculator';
+import { Form } from './Form';
+import { HideCalculatorButton } from './HideCalculatorButton';
+import caTranslations from './i18n/ca.json' with { type: 'json' };
+import enTranslations from './i18n/en.json' with { type: 'json' };
+import esTranslations from './i18n/es.json' with { type: 'json' };
+import { CalculatorResultContainer } from './ResultContainer';
+import { ShowCalculatorButton } from './ShowCalculatorButton';
+
+interface PricingCalculatorProps {
+  orderedTierInfoWithIcons: Array<TierInfoWithIcon>;
+  onTierRecommendation: (data: { tierId: TierId; trigger: number }) => void;
+  onTierSelect: (tierId: TierId) => void;
+  isSelectButtonLoading: boolean;
+  contactUrl: string;
+  collapsible?: boolean;
+  defaultExpanded?: boolean;
+  lang: LanguageCode;
+}
+
+export const translations: Record<LanguageCode, typeof esTranslations> = {
+  en: enTranslations,
+  es: esTranslations,
+  ca: caTranslations
+};
+
+export const PricingCalculator: FC<PricingCalculatorProps> = ({
+  orderedTierInfoWithIcons,
+  onTierRecommendation,
+  onTierSelect,
+  isSelectButtonLoading,
+  contactUrl,
+  collapsible = false,
+  defaultExpanded = false,
+  lang
+}) => {
+  const translation = translations[lang];
+  const [employees, setEmployees] = useState<number>(1);
+  const [avgTimeWithClient, setAvgTimeWithClient] = useState<string>('60');
+  const [workingHoursPerDay, setWorkingHoursPerDay] = useState<string>('8');
+  const [workingDaysPerMonth, setWorkingDaysPerMonth] = useState<number>(22);
+  const [calculationResult, setCalculationResult] = useState<CalculationResult | undefined>(undefined);
+  const [isExpanded, setIsExpanded] = useState<boolean>(collapsible ? defaultExpanded : true);
+
+  const minutesPerMessage = 5;
+  const handleCalculate = (shouldClear?: boolean): void => {
+    if (shouldClear) {
+      setCalculationResult(undefined);
+      return;
+    }
+
+    const result = calculateTierRecommendation({
+      employees,
+      avgTimeWithClient,
+      workingHoursPerDay,
+      workingDaysPerMonth,
+      minutesPerMessage,
+      orderedTierInfoWithIcons
+    });
+    setCalculationResult(result);
+    onTierRecommendation({
+      tierId: result.recommendedTier.id,
+      trigger: Date.now()
+    });
+  };
+
+  if (collapsible && !isExpanded) {
+    return (
+      <ShowCalculatorButton
+        lang={lang}
+        onExpand={() => {
+          setIsExpanded(true);
+        }}
+      />
+    );
+  }
+
+  return (
+    <Card withBorder className="bg-white max-w-4xl mx-auto" padding="lg" radius="md" shadow="md">
+      <div className="text-center mb-4 sm:flex sm:items-center sm:justify-center sm:gap-1">
+        <IconCalculator className="text-accent2-600 mx-auto mb-2 sm:mx-0 sm:mb-0" size={30} />
+        <h4 className="font-semibold">{translation.title}</h4>
+      </div>
+
+      <Form
+        avgTimeWithClient={avgTimeWithClient}
+        employees={employees}
+        workingDaysPerMonth={workingDaysPerMonth}
+        workingHoursPerDay={workingHoursPerDay}
+        lang={lang}
+        onAvgTimeWithClientChange={setAvgTimeWithClient}
+        onCalculate={handleCalculate}
+        onEmployeesChange={setEmployees}
+        onWorkingDaysPerMonthChange={setWorkingDaysPerMonth}
+        onWorkingHoursPerDayChange={setWorkingHoursPerDay}
+      />
+
+      <CalculatorResultContainer
+        calculationResult={calculationResult}
+        contactUrl={contactUrl}
+        isSelectButtonLoading={isSelectButtonLoading}
+        lang={lang}
+        minutesPerMessage={minutesPerMessage}
+        onTierSelect={onTierSelect}
+      />
+
+      {collapsible && (
+        <HideCalculatorButton
+          lang={lang}
+          onCollapse={() => {
+            setIsExpanded(false);
+          }}
+        />
+      )}
+    </Card>
+  );
+};

src/components/PricingCalculator/ResultContainer.tsx

@@ -0,0 +1,39 @@
+import type { LanguageCode, TierId } from '@notifycal/shared/types';
+import type { ReactElement } from 'react';
+import { ResultDisplay, StandbyDisplayContent } from './ResultDisplay';
+import type { CalculationResult } from './calculator';
+
+interface CalculatorResultContainerProps {
+  calculationResult: CalculationResult | undefined;
+  contactUrl: string;
+  isSelectButtonLoading: boolean;
+  minutesPerMessage: number;
+  lang: LanguageCode;
+  onTierSelect: (tierId: TierId) => void;
+}
+
+export const CalculatorResultContainer = ({
+  calculationResult,
+  contactUrl,
+  isSelectButtonLoading,
+  minutesPerMessage,
+  lang,
+  onTierSelect
+}: CalculatorResultContainerProps): ReactElement => (
+  <div className="mt-6 p-4 border border-gray-400 rounded-lg min-h-[200px] flex items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200 shadow-inner">
+    {!calculationResult ? (
+      <StandbyDisplayContent lang={lang} />
+    ) : (
+      <div className="w-full">
+        <ResultDisplay
+          contactUrl={contactUrl}
+          data={calculationResult}
+          isSelectButtonLoading={isSelectButtonLoading}
+          lang={lang}
+          minutesPerMessage={minutesPerMessage}
+          onTierSelect={onTierSelect}
+        />
+      </div>
+    )}
+  </div>
+);

src/components/PricingCalculator/ResultDisplay.tsx

@@ -0,0 +1,69 @@
+import type { LanguageCode, TierId } from '@notifycal/shared/types';
+import { IconCalculator } from '@tabler/icons-react';
+import type { ReactElement } from 'react';
+import type { CalculationResult } from './calculator';
+import { translations } from './PricingCalculator';
+import { Action, Arrow, MonthlyEstimateAndMetrics } from './ResultDisplayComponents';
+
+interface StandbyDisplayContentProps {
+  lang: LanguageCode;
+}
+
+export const StandbyDisplayContent = ({ lang }: StandbyDisplayContentProps): ReactElement => {
+  const translation = translations[lang];
+
+  return (
+    <div className="text-gray-500 py-2 text-center">
+      <IconCalculator className="mx-auto mb-1 opacity-50" size={24} />
+      <p className="text-xs">{translation.standbyMessage}</p>
+    </div>
+  );
+};
+
+interface ResultDisplayProps {
+  data: CalculationResult;
+  minutesPerMessage: number;
+  isSelectButtonLoading: boolean;
+  contactUrl: string;
+  lang: LanguageCode;
+  onTierSelect: (tierId: TierId) => void;
+}
+
+export const ResultDisplay = ({
+  data,
+  minutesPerMessage,
+  isSelectButtonLoading,
+  contactUrl,
+  lang,
+  onTierSelect
+}: ResultDisplayProps): ReactElement => {
+  const translation = translations[lang];
+
+  const { monthlyMessages, recommendedTier, exceedsTopTier, savedHours } = data;
+  const estimateAndMetrics = MonthlyEstimateAndMetrics(
+    monthlyMessages,
+    savedHours,
+    minutesPerMessage,
+    exceedsTopTier,
+    translation
+  );
+  const actionButton = (
+    <Action
+      contactUrl={contactUrl}
+      isSelectButtonLoading={isSelectButtonLoading}
+      tier={recommendedTier ?? undefined}
+      type={exceedsTopTier ? 'contact' : 'tier'}
+      lang={lang}
+      onTierSelect={onTierSelect}
+    />
+  );
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-4 md:flex-row md:space-y-0 md:gap-6">
+      {estimateAndMetrics}
+      <div className="md:hidden">{Arrow('vertical')}</div>
+      <div className="hidden md:block">{Arrow('horizontal')}</div>
+      {actionButton}
+    </div>
+  );
+};