ui phase 6

2026-07-19 09:49:25 +03:30
parent 4c70d8e424
commit a438edeeaa
54 changed files with 1766 additions and 475 deletions
@@ -0,0 +1,95 @@
+'use client';
+import { FunctionComponent, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Box, Collapse, Stack, Typography } from '@mui/material';
+import AppIcon from '@/components/common/AppIcon';
+import AppButton from '@/components/common/AppButton';
+import EscrowNotice from '@/components/EscrowNotice';
+
+interface ExplainerStep {
+  icon: string;
+  labelKey: string;
+}
+
+const STEPS: ExplainerStep[] = [
+  { icon: 'payment', labelKey: 'escrow_step_pay' },
+  { icon: 'lock', labelKey: 'escrow_step_hold' },
+  { icon: 'verified', labelKey: 'escrow_step_release' },
+];
+
+/**
+ * Wraps the product-mandated `EscrowNotice` (never edited) with an optional «چطور کار می‌کند؟» expander: a
+ * 3-step visual (پرداخت ← امانت نزد بالین‌یار ← آزادسازی پس از تایید پایان ویزیت) grounded in
+ * `product/payments/escrow-ledger.md`, plus the cancellation/refund implication. Used from checkout and the
+ * confirmation receipt so escrow — the platform's whole reason to pay on-platform — gets more than one
+ * alert line at the moment of maximum skepticism.
+ * @component EscrowExplainer
+ */
+const EscrowExplainer: FunctionComponent = () => {
+  const t = useTranslations('payment');
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Stack sx={{ gap: 1 }}>
+      <EscrowNotice />
+      <AppButton
+        variant="text"
+        color="primary"
+        size="small"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        endIcon={
+          <Box
+            component="span"
+            sx={{ display: 'inline-flex', transition: 'transform 150ms ease', transform: open ? 'rotate(180deg)' : 'none' }}
+          >
+            <AppIcon icon="expand" size={18} />
+          </Box>
+        }
+        sx={{ alignSelf: 'flex-start', px: 0.5 }}
+      >
+        {t('escrow_explainer_toggle')}
+      </AppButton>
+      <Collapse in={open}>
+        <Stack sx={{ gap: 1.5, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+          <Stack
+            direction="row"
+            sx={{ gap: { xs: 1.5, sm: 2 }, alignItems: 'flex-start', flexWrap: 'wrap', justifyContent: 'space-between' }}
+          >
+            {STEPS.map((step, index) => (
+              <Stack key={step.labelKey} direction="row" sx={{ gap: 1, alignItems: 'center', flex: '1 1 auto' }}>
+                <Stack sx={{ gap: 0.5, alignItems: 'center', minWidth: 72 }}>
+                  <Stack
+                    sx={{
+                      width: 40,
+                      height: 40,
+                      borderRadius: '50%',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      bgcolor: 'var(--bal-primary-soft)',
+                    }}
+                  >
+                    <AppIcon icon={step.icon} size={20} color="var(--bal-primary)" />
+                  </Stack>
+                  <Typography variant="caption" sx={{ fontWeight: 700, textAlign: 'center' }}>
+                    {t(step.labelKey)}
+                  </Typography>
+                </Stack>
+                {index < STEPS.length - 1 ? (
+                  <Box sx={{ flex: 'none', display: { xs: 'none', sm: 'block' }, pt: 2 }}>
+                    <AppIcon icon="forward" size={16} color="var(--bal-text-secondary)" />
+                  </Box>
+                ) : null}
+              </Stack>
+            ))}
+          </Stack>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('escrow_cancellation_note')}
+          </Typography>
+        </Stack>
+      </Collapse>
+    </Stack>
+  );
+};
+
+export default EscrowExplainer;