frontend phase 9

client/src/components/EscrowNotice/EscrowNotice.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../theme';
+import faMessages from '../../../messages/fa.json';
+
+// next-intl mocked to read the REAL fa message file, so the test pins the product-mandated escrow copy
+// as it actually ships — a rewording in fa.json (or a broken key) fails here as a conscious change.
+jest.mock('next-intl', () => ({
+  useTranslations: (namespace: string) => (key: string) => {
+    const messages = jest.requireActual('../../../messages/fa.json') as Record<string, Record<string, string>>;
+    return messages[namespace][key];
+  },
+}));
+
+import EscrowNotice from './EscrowNotice';
+
+function renderNotice() {
+  return render(
+    <ThemeProvider>
+      <EscrowNotice />
+    </ThemeProvider>,
+  );
+}
+
+describe('<EscrowNotice/> component', () => {
+  it('renders the mandated escrow copy verbatim from fa.json', () => {
+    renderNotice();
+    expect(
+      screen.getByText('مبلغ به‌صورت امانی نزد بالین‌یار می‌ماند و پس از پایان ویزیت آزاد می‌شود'),
+    ).toBeInTheDocument();
+    expect(screen.getByText(faMessages.payment.escrow_notice)).toBeInTheDocument();
+  });
+
+  it('renders as an info (trust) surface, never an error tone', () => {
+    renderNotice();
+    const alert = screen.getByTestId('escrow-notice');
+    expect(alert.className).toContain('MuiAlert-colorInfo');
+    expect(alert.className).not.toContain('MuiAlert-colorError');
+  });
+});

client/src/components/EscrowNotice/EscrowNotice.tsx

@@ -0,0 +1,37 @@
+'use client';
+import { FunctionComponent } from 'react';
+import { useTranslations } from 'next-intl';
+import AppAlert from '@/components/common/AppAlert';
+import AppIcon from '@/components/common/AppIcon';
+
+/**
+ * The escrow trust callout — product-mandated copy («مبلغ به‌صورت امانی نزد بالین‌یار می‌ماند و پس از
+ * پایان ویزیت آزاد می‌شود»), rendered **verbatim in fa** as an info/trust surface (teal `--bal-info`
+ * tokens, a lock — never an error tone). It is *why* the family pays on-platform, so f10/f11 must reuse
+ * this exact component rather than re-writing the message. Self-translating (the copy is fixed), no props.
+ * @component EscrowNotice
+ */
+const EscrowNotice: FunctionComponent = () => {
+  const t = useTranslations('payment');
+  return (
+    <AppAlert
+      severity="info"
+      variant="outlined"
+      icon={<AppIcon icon="lock" size={20} color="var(--bal-primary)" />}
+      data-testid="escrow-notice"
+      sx={{
+        marginY: 0,
+        // --bal-primary, not --bal-info: the info token is an alert *background* color and is too dark
+        // to read as text on the dark scheme; primary is the same deep teal in light and lifts in dark.
+        borderColor: 'var(--bal-primary)',
+        color: 'var(--bal-primary)',
+        backgroundColor: 'var(--bal-primary-soft)',
+        fontWeight: 500,
+      }}
+    >
+      {t('escrow_notice')}
+    </AppAlert>
+  );
+};
+
+export default EscrowNotice;

client/src/components/EscrowNotice/index.tsx

@@ -0,0 +1 @@
+export { default } from './EscrowNotice';