adserver-dashboard 1.0.0

package/client/src/pages/public-approval.tsx

@@ -0,0 +1,551 @@
+import { useState, useMemo } from 'react';
+import { useTranslation } from '@/lib/i18n';
+import { Card, CardContent } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import { Button } from '@moving-walls/design-system';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@moving-walls/design-system';
+import {
+  Loader2,
+  Calendar,
+  Building2,
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+  Target,
+  FileText,
+  Globe,
+  Eye,
+} from 'lucide-react';
+import { usePublicCampaign, usePublicLineItems, AlreadyDecidedError } from '@/hooks/use-approval';
+import { ApprovalSheet } from '@/components/approval/approval-sheet';
+import { LineItemDetailsSheet } from '@/components/approval/line-item-details-sheet';
+import { usePageTitle } from '@/hooks/use-page-title';
+import type { PublicLineItem } from '@/types/approval';
+
+function getTokenFromUrl(): string {
+  const params = new URLSearchParams(window.location.search);
+  const token = params.get('token');
+  if (token) return token;
+
+  const fullUrl = window.location.href;
+  const tokenMatch = fullUrl.match(/[?&%3F]token[=%3D]([^&%]+)/i);
+  if (tokenMatch) {
+    return decodeURIComponent(tokenMatch[1]);
+  }
+
+  return '';
+}
+
+function formatDate(dateStr?: string | null): string {
+  if (!dateStr) return '--';
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: '2-digit',
+    year: 'numeric',
+  });
+}
+
+function formatCurrency(amount?: number, currency?: string): string {
+  if (amount === undefined || amount === null) return '--';
+  const currencyCode = currency || 'USD';
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currencyCode,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+function formatDateRange(startDate?: string | null, endDate?: string | null): string {
+  if (!startDate && !endDate) return '--';
+  const start = startDate ? formatDate(startDate) : '--';
+  const end = endDate ? formatDate(endDate) : '--';
+  return `${start} - ${end}`;
+}
+
+function formatNumber(num?: number): string {
+  if (num === undefined || num === null) return '--';
+  return num.toLocaleString();
+}
+
+export default function PublicApprovalPage() {
+  const { t } = useTranslation('approval');
+  usePageTitle(t('pageTitle'));
+  const token = useMemo(() => getTokenFromUrl(), []);
+  const [otpVerified, setOtpVerified] = useState(false);
+  const [selectedLineItem, setSelectedLineItem] = useState<PublicLineItem | null>(null);
+  const [detailsSheetOpen, setDetailsSheetOpen] = useState(false);
+  const [approvalSheetOpen, setApprovalSheetOpen] = useState(false);
+  const [initialAction, setInitialAction] = useState<'approve' | 'reject' | null>(null);
+
+  const handleApproveClick = () => {
+    setInitialAction('approve');
+    setApprovalSheetOpen(true);
+  };
+
+  const handleRejectClick = () => {
+    setInitialAction('reject');
+    setApprovalSheetOpen(true);
+  };
+
+  const handleSheetOpenChange = (open: boolean) => {
+    setApprovalSheetOpen(open);
+    if (!open) {
+      setInitialAction(null);
+    }
+  };
+
+  const {
+    data: campaignData,
+    isLoading: isLoadingCampaign,
+    error: campaignError,
+  } = usePublicCampaign(token);
+
+  const {
+    data: lineItemsData,
+    isLoading: isLoadingLineItems,
+    error: lineItemsError,
+  } = usePublicLineItems(token);
+
+  const lineItems = lineItemsData?.lineItems || [];
+
+  const isLoading = isLoadingCampaign || isLoadingLineItems;
+  
+  const alreadyDecidedFromError = useMemo(() => {
+    const err = campaignError || lineItemsError;
+    if (err instanceof AlreadyDecidedError) {
+      return {
+        isAlreadyDecided: true,
+        decision: err.decision,
+      };
+    }
+    return null;
+  }, [campaignError, lineItemsError]);
+  
+  const error = (campaignError instanceof AlreadyDecidedError ? null : campaignError) || 
+                (lineItemsError instanceof AlreadyDecidedError ? null : lineItemsError);
+
+  const effectiveOtpVerified = otpVerified || campaignData?.otpVerified || false;
+
+  const campaign = useMemo(() => {
+    if (!campaignData) return null;
+    const nested = campaignData.campaign;
+    return {
+      dealId: nested?.dealId || campaignData.dealId || '',
+      name: nested?.name || campaignData.dealName || '',
+      brand: nested?.brand || campaignData.brand || campaignData.advertiser,
+      brandCategory: (nested as any)?.brandCategory || (campaignData as any)?.brandCategory || '',
+      mode: nested?.mode,
+      status: nested?.status || campaignData.status || '',
+      startDate: nested?.flightDates?.startDate || campaignData.startDate,
+      endDate: nested?.flightDates?.endDate || campaignData.endDate,
+      marketSelection: nested?.marketSelection,
+      budgetSetup: nested?.budgetSetup,
+      campaignGoal: nested?.campaignGoal,
+      impressions: nested?.campaignGoal?.target_value || (campaignData as any)?.impressions,
+      dayCap: (nested?.budgetSetup as any)?.day_cap || (campaignData as any)?.dayCap,
+      currency:
+        nested?.marketSelection?.currency ||
+        nested?.budgetSetup?.currency ||
+        campaignData.currency,
+      alreadyDecided: (campaignData as any)?.alreadyDecided || false,
+      existingDecision: (campaignData as any)?.existingDecision as 'APPROVED' | 'REJECTED' | undefined,
+    };
+  }, [campaignData]);
+
+  const approverStatus = useMemo(() => {
+    if (!campaignData?.approvalStatus?.approvers) return null;
+    const approver = campaignData.approvalStatus.approvers.find(
+      (a) => a.email === campaignData.approverEmail
+    );
+    return approver || null;
+  }, [campaignData]);
+
+  const alreadyDecided =
+    alreadyDecidedFromError?.isAlreadyDecided ||
+    campaign?.alreadyDecided ||
+    approverStatus?.status === 'APPROVED' || 
+    approverStatus?.status === 'REJECTED';
+  
+  const existingDecision = alreadyDecidedFromError?.decision || 
+    campaign?.existingDecision || 
+    approverStatus?.status as 'APPROVED' | 'REJECTED' | undefined;
+
+  const handleLineItemClick = (lineItem: PublicLineItem) => {
+    setSelectedLineItem(lineItem);
+    setDetailsSheetOpen(true);
+  };
+
+  if (!token) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white p-4">
+        <Card className="max-w-md w-full shadow-xl border-0">
+          <CardContent className="pt-8 pb-8">
+            <div className="flex flex-col items-center gap-5 text-center">
+              <div className="h-16 w-16 rounded-full bg-red-100 flex items-center justify-center">
+                <AlertTriangle className="h-8 w-8 text-red-600" />
+              </div>
+              <h1 className="text-2xl font-semibold text-mw-neutral-900">{t('errors.invalidLink')}</h1>
+              <p className="text-mw-neutral-600 leading-relaxed">
+                {t('errors.invalidLinkMessage')}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white">
+        <div className="flex flex-col items-center gap-4">
+          <Loader2 className="h-10 w-10 animate-spin text-mw-primary-500" />
+          <p className="text-mw-neutral-600 font-medium">{t('loading.campaignDetails')}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !campaignData) {
+    if (error instanceof AlreadyDecidedError) {
+    }
+    
+    const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+    const isExpired = errorMessage.toLowerCase().includes('expired');
+    const isInvalid =
+      errorMessage.toLowerCase().includes('invalid') ||
+      errorMessage.toLowerCase().includes('not found');
+
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white p-4">
+        <Card className="max-w-md w-full shadow-xl border-0">
+          <CardContent className="pt-8 pb-8">
+            <div className="flex flex-col items-center gap-5 text-center">
+              <div className="h-16 w-16 rounded-full bg-red-100 flex items-center justify-center">
+                <AlertTriangle className="h-8 w-8 text-red-600" />
+              </div>
+              <h1 className="text-2xl font-semibold text-mw-neutral-900">
+                {isExpired ? t('errors.linkExpired') : isInvalid ? t('errors.invalidLinkTitle') : t('errors.error')}
+              </h1>
+              <p className="text-mw-neutral-600 leading-relaxed">
+                {isExpired
+                  ? t('errors.linkExpiredMessage')
+                  : isInvalid
+                  ? t('errors.invalidLinkDescription')
+                  : errorMessage}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (alreadyDecidedFromError && (!campaignData || !campaign)) {
+    const isApproved = alreadyDecidedFromError.decision === 'APPROVED';
+    return (
+      <div className="min-h-screen bg-white">
+        <div className="border-b border-mw-neutral-200 bg-white">
+          <div className="w-full px-6 sm:px-8 py-4">
+            <div className="flex items-center gap-2">
+              <img src="/img/MW-logo-trans_1754045676555.png" alt="Moving Walls" className="h-8 w-auto" />
+              <span className="text-lg font-semibold text-mw-neutral-900">{t('header.adServer')}</span>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center justify-center min-h-[calc(100vh-80px)] p-4">
+          <Card className="max-w-md w-full shadow-xl border-0">
+            <CardContent className="pt-8 pb-8">
+              <div className="flex flex-col items-center gap-5 text-center">
+                <div className={`h-16 w-16 rounded-full flex items-center justify-center ${
+                  isApproved ? 'bg-green-100' : 'bg-red-100'
+                }`}>
+                  {isApproved ? (
+                    <CheckCircle className="h-8 w-8 text-green-600" />
+                  ) : (
+                    <XCircle className="h-8 w-8 text-red-600" />
+                  )}
+                </div>
+                <h1 className="text-2xl font-semibold text-mw-neutral-900">
+                  {isApproved ? t('decision.dealApproved') : t('decision.dealRejected')}
+                </h1>
+                <p className="text-mw-neutral-600 leading-relaxed">
+                  {t('decision.noFurtherAction', { decision: isApproved ? t('status.approved').toLowerCase() : t('status.rejected').toLowerCase() })}
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  if (!campaignData || !campaign) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white p-4">
+        <Card className="max-w-md w-full shadow-xl border-0">
+          <CardContent className="pt-8 pb-8">
+            <div className="flex flex-col items-center gap-5 text-center">
+              <div className="h-16 w-16 rounded-full bg-amber-100 flex items-center justify-center">
+                <AlertTriangle className="h-8 w-8 text-amber-600" />
+              </div>
+              <h1 className="text-2xl font-semibold text-mw-neutral-900">{t('errors.campaignNotFound')}</h1>
+              <p className="text-mw-neutral-600 leading-relaxed">
+                {t('errors.campaignNotFoundMessage')}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-white">
+      <div className="border-b border-mw-neutral-200 bg-white">
+        <div className="w-full px-6 sm:px-8 py-4">
+          <div className="flex items-center justify-between gap-6">
+            <div className="flex items-center gap-8">
+              <div className="flex items-center gap-2">
+                <img src="/img/MW-logo-trans_1754045676555.png" alt="Moving Walls" className="h-8 w-auto" />
+                <span className="text-lg font-semibold text-mw-neutral-900">{t('header.adServer')}</span>
+              </div>
+              
+              <div>
+                <h1 className="text-xl font-bold text-mw-neutral-900">{campaign.name}</h1>
+                <div className="flex items-center gap-2 mt-1">
+                  <span className="text-sm text-mw-neutral-500">{t('header.campaignId')}: {campaign.dealId?.slice(0, 8) || 'XXXX'}</span>
+                  {(existingDecision || campaign.status) && (
+                    <Badge className={`px-2 py-0.5 text-xs font-medium ${
+                      (existingDecision || campaign.status) === 'APPROVED' ? 'bg-green-100 text-green-700 border-green-200' :
+                      (existingDecision || campaign.status) === 'REJECTED' ? 'bg-red-100 text-red-700 border-red-200' :
+                      campaign.status === 'PENDING' ? 'bg-orange-100 text-orange-700 border-orange-200' :
+                      'bg-gray-100 text-gray-700 border-gray-200'
+                    }`}>
+                      {((existingDecision || campaign.status) as string).charAt(0) + ((existingDecision || campaign.status) as string).slice(1).toLowerCase()}
+                    </Badge>
+                  )}
+                </div>
+              </div>
+            </div>
+            
+            <div className="flex items-center gap-3 flex-shrink-0">
+              {alreadyDecided && existingDecision ? (
+                <div
+                  className={`flex items-center gap-2.5 px-5 py-2.5 rounded-lg font-medium ${
+                    existingDecision === 'APPROVED'
+                      ? 'bg-green-100 text-green-700'
+                      : 'bg-red-100 text-red-700'
+                  }`}
+                >
+                  {existingDecision === 'APPROVED' ? (
+                    <CheckCircle className="h-5 w-5" />
+                  ) : (
+                    <XCircle className="h-5 w-5" />
+                  )}
+                  <span>
+                    {existingDecision === 'APPROVED' ? t('status.approved') : t('status.rejected')}
+                  </span>
+                </div>
+              ) : (
+                <>
+                  <Button
+                    onClick={handleRejectClick}
+                    variant="outline"
+                    className="border-mw-neutral-300 bg-white text-mw-neutral-900 hover:bg-mw-neutral-50 px-6 py-2 font-medium"
+                  >
+                    {t('actions.rejectRequest')}
+                  </Button>
+                  <Button
+                    onClick={handleApproveClick}
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 font-medium"
+                  >
+                    {t('actions.approveRequest')}
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full px-6 sm:px-8 py-6 space-y-6">
+        <Card className="border border-mw-neutral-200 shadow-sm">
+          <CardContent className="py-5 px-6">
+            <div className="grid grid-cols-5 divide-x divide-mw-neutral-200">
+              <div className="flex items-start gap-3 pr-6">
+                <div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center flex-shrink-0">
+                  <Building2 className="h-5 w-5 text-blue-600" />
+                </div>
+                <div>
+                  <p className="text-xs text-mw-neutral-500 font-medium">{t('campaign.brand')}</p>
+                  <p className="text-sm font-semibold text-mw-neutral-900 mt-0.5">{campaign.brand || '--'}</p>
+                  <p className="text-xs text-mw-neutral-500 mt-0.5">{campaign.brandCategory}</p>
+                </div>
+              </div>
+              
+              <div className="flex items-start gap-3 px-6">
+                <div className="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center flex-shrink-0">
+                  <Calendar className="h-5 w-5 text-green-600" />
+                </div>
+                <div>
+                  <p className="text-xs text-mw-neutral-500 font-medium">{t('campaign.flightDates')}</p>
+                  <p className="text-sm font-semibold text-mw-neutral-900 mt-0.5">
+                    {formatDateRange(campaign.startDate, campaign.endDate)}
+                  </p>
+                </div>
+              </div>
+              
+              <div className="flex items-start gap-3 px-6">
+                <div className="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center flex-shrink-0">
+                  <Target className="h-5 w-5 text-purple-600" />
+                </div>
+                <div>
+                  <p className="text-xs text-mw-neutral-500 font-medium">{t('campaign.impressions')}</p>
+                  <p className="text-sm font-semibold text-mw-neutral-900 mt-0.5">
+                    {formatNumber(campaign.impressions)}
+                  </p>
+                </div>
+              </div>
+              
+              <div className="flex items-start gap-3 px-6">
+                <div className="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center flex-shrink-0">
+                  <FileText className="h-5 w-5 text-amber-600" />
+                </div>
+                <div>
+                  <p className="text-xs text-mw-neutral-500 font-medium">{t('campaign.budget')}</p>
+                  <p className="text-sm font-semibold text-mw-neutral-900 mt-0.5">
+                    {formatCurrency(campaign.budgetSetup?.budget_amount, campaign.currency)}
+                  </p>
+                  {campaign.dayCap && (
+                    <p className="text-xs text-mw-neutral-500 mt-0.5">
+                      {t('campaign.dayCap')}: {formatCurrency(campaign.dayCap, campaign.currency)}
+                    </p>
+                  )}
+                </div>
+              </div>
+              
+              <div className="flex items-start gap-3 pl-6">
+                <div className="w-10 h-10 rounded-lg bg-teal-50 flex items-center justify-center flex-shrink-0">
+                  <Globe className="h-5 w-5 text-teal-600" />
+                </div>
+                <div>
+                  <p className="text-xs text-mw-neutral-500 font-medium">{t('campaign.country')}</p>
+                  <p className="text-sm font-semibold text-mw-neutral-900 mt-0.5">
+                    {campaign.marketSelection?.country || '--'}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {lineItems.length > 0 && (
+          <div>
+            <h2 className="text-lg font-bold text-mw-neutral-900 mb-4">
+              {t('lineItems.title')}
+            </h2>
+            <Card className="border border-mw-neutral-200 shadow-sm overflow-hidden">
+              <div className="overflow-x-auto">
+                <Table hoverable className="border-0">
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="text-xs font-medium text-mw-neutral-500">
+                        {t('lineItems.lineItem')}
+                      </TableHead>
+                      <TableHead className="text-xs font-medium text-mw-neutral-500 w-24">
+                        {t('lineItems.inventory')}
+                      </TableHead>
+                      <TableHead className="text-xs font-medium text-mw-neutral-500 w-48">
+                        {t('lineItems.flightDate')}
+                      </TableHead>
+                      <TableHead className="text-xs font-medium text-mw-neutral-500 w-32">
+                        {t('lineItems.impression')}
+                      </TableHead>
+                      <TableHead className="text-xs font-medium text-mw-neutral-500 w-32">
+                        {t('lineItems.budget')}
+                      </TableHead>
+                      <TableHead className="text-xs font-medium text-mw-neutral-500 w-20">
+                        {t('lineItems.actions')}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {lineItems.map((lineItem, index) => (
+                      <TableRow key={lineItem.id}>
+                        <TableCell className="py-4">
+                          <div>
+                            <p className="text-sm font-medium text-mw-neutral-900">
+                              {lineItem.name}
+                            </p>
+                            <p className="text-xs text-mw-neutral-500 mt-0.5">
+                              {t('lineItems.lineItemId')}: {lineItem.id?.slice(0, 8)}
+                            </p>
+                          </div>
+                        </TableCell>
+                        <TableCell className="py-4">
+                          <span className="text-sm text-mw-neutral-900">
+                            {lineItem.totalInventories || 0}
+                          </span>
+                        </TableCell>
+                        <TableCell className="py-4">
+                          <span className="text-sm text-mw-neutral-900">
+                            {formatDateRange(
+                              lineItem.schedule?.[0]?.validity?.start_date || (lineItem as any).startDate,
+                              lineItem.schedule?.[0]?.validity?.end_date || (lineItem as any).endDate
+                            )}
+                          </span>
+                        </TableCell>
+                        <TableCell className="py-4">
+                          <span className="text-sm text-mw-neutral-900">
+                            {formatNumber((lineItem as any).impressions || (lineItem.pacing as any)?.impressions || lineItem.pacing?.daily_cap)}
+                          </span>
+                        </TableCell>
+                        <TableCell className="py-4">
+                          <span className="text-sm text-mw-neutral-900">
+                            {formatCurrency((lineItem as any).budget, (lineItem as any).currency || campaign.currency)}
+                          </span>
+                        </TableCell>
+                        <TableCell className="py-4">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0 hover:bg-mw-neutral-100"
+                            onClick={() => handleLineItemClick(lineItem)}
+                          >
+                            <Eye className="h-4 w-4 text-mw-neutral-600" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </Card>
+          </div>
+        )}
+      </div>
+
+      <ApprovalSheet
+        open={approvalSheetOpen}
+        onOpenChange={handleSheetOpenChange}
+        token={token}
+        approverEmail={campaignData?.approverEmail || ''}
+        otpVerified={effectiveOtpVerified}
+        alreadyDecided={alreadyDecided}
+        existingDecision={existingDecision}
+        onOtpVerified={() => setOtpVerified(true)}
+        initialAction={initialAction}
+      />
+
+      <LineItemDetailsSheet
+        open={detailsSheetOpen}
+        onOpenChange={setDetailsSheetOpen}
+        lineItem={selectedLineItem}
+        token={token}
+      />
+    </div>
+  );
+}