Add support for ACI safety numbers behind a feature flag

ts/components/SafetyNumberOnboarding.tsx

@@ -0,0 +1,78 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { useCallback, useRef } from 'react';
+import Lottie from 'lottie-react';
+import type { LottieRefCurrentProps } from 'lottie-react';
+
+import { Button, ButtonVariant } from './Button';
+import { Intl } from './Intl';
+import type { LocalizerType } from '../types/Util';
+import { SAFETY_NUMBER_MIGRATION_URL } from '../types/support';
+import { useReducedMotion } from '../hooks/useReducedMotion';
+import animationData from '../../images/safety-number-onboarding.json';
+import reducedAnimationData from '../../images/safety-number-onboarding-reduced-motion.json';
+
+export type PropsType = {
+  i18n: LocalizerType;
+  onClose: () => void;
+};
+
+export function SafetyNumberOnboarding({
+  i18n,
+  onClose,
+}: PropsType): JSX.Element | null {
+  const isMotionReduced = useReducedMotion();
+  const lottieRef = useRef<LottieRefCurrentProps | null>(null);
+
+  const onDOMLoaded = useCallback(() => {
+    if (isMotionReduced) {
+      lottieRef.current?.goToAndPlay(0);
+      return;
+    }
+
+    lottieRef.current?.playSegments(
+      [
+        [0, 360],
+        [60, 360],
+      ],
+      true
+    );
+  }, [isMotionReduced]);
+
+  return (
+    <div className="module-SafetyNumberOnboarding">
+      <h2>
+        <Intl i18n={i18n} id="icu:SafetyNumberOnboarding__title" />
+      </h2>
+      <p>
+        <Intl i18n={i18n} id="icu:SafetyNumberOnboarding__p1" />
+      </p>
+      <p>
+        <Intl i18n={i18n} id="icu:SafetyNumberOnboarding__p2" />
+      </p>
+      <Lottie
+        lottieRef={lottieRef}
+        animationData={isMotionReduced ? reducedAnimationData : animationData}
+        onDOMLoaded={onDOMLoaded}
+      />
+      <div className="module-SafetyNumberOnboarding__help">
+        <a
+          key="signal-support"
+          href={SAFETY_NUMBER_MIGRATION_URL}
+          rel="noreferrer"
+          target="_blank"
+        >
+          <Intl i18n={i18n} id="icu:SafetyNumberOnboarding__help" />
+        </a>
+      </div>
+      <Button
+        className="module-SafetyNumberOnboarding__close"
+        onClick={onClose}
+        variant={ButtonVariant.Primary}
+      >
+        <Intl i18n={i18n} id="icu:SafetyNumberOnboarding__close" />
+      </Button>
+    </div>
+  );
+}