3f1a4922-6438-402b-8a31-b68b7edbe989

Build # 3f1a4922-6438-402b-8a31-b68b7edbe989

Build Type

push

circleci

Committed by GitHub Actions — l10n sync

Commit Message

Merge in latest l10n strings

Run Details

1561 of 2384 branches covered (65.48%)

Branch coverage included in aggregate %.

5107 of 6949 relevant lines covered (73.49%)

19.12 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

73.68

/frontend/src/components/landing/DemoPhone.tsx

import Image, { StaticImageData } from "next/image";
import styles from "./DemoPhone.module.scss";
import BgImage from "./images/hero-image-bg.svg";
import PremiumScreenshot from "./images/hero-image-premium.svg";
import PremiumScreenshotFr from "./images/hero-image-premium-fr.svg";
import PremiumScreenshotDe from "./images/hero-image-premium-de.svg";
import NoPremiumScreenshot from "./images/hero-image-nopremium.svg";
import FgImage from "./images/hero-image-fg.svg";
import FgImageDe from "./images/hero-image-fg-de.svg";
import FgImageFr from "./images/hero-image-fg-fr.svg";
import { getLocale } from "../../functions/getLocale";
import { useL10n } from "../../hooks/l10n";

export type Props = {
  premium?: boolean;
};

/**
 * Image of a phone showing the Relay interface, either the Premium or regular UI as desired.
 */

export const DemoPhone = (props: Props) => {
  const l10n = useL10n();
  const lang = getLocale(l10n).split("-")[0] ?? "en";

  const getScreenshotImage = (
    isPremium: boolean,
    lang: string
  ): StaticImageData => {
    if (lang === "fr") {
      return PremiumScreenshotFr;
    }
    if (lang === "de") {
      return PremiumScreenshotDe;
    }
    // If Premium is not availabe in the country,
    // show no premium demo phone state
    if (!isPremium) {
      return NoPremiumScreenshot;
    }
    return PremiumScreenshot;
  };

  const getForegroundImage = (lang: string): StaticImageData => {
    if (lang === "fr") {
      return FgImageFr;
    }
    if (lang === "de") {
      return FgImageDe;
    }
    return FgImage;
  };

  return (
    <div className={styles.container}>
      <Image src={BgImage} alt="" className={styles.background} />

      <Image
        src={getScreenshotImage(props.premium ?? false, lang)}
        className={styles.phone}
        alt=""
      />
      <Image
        src={getForegroundImage(lang)}
        alt=""
        className={styles.foreground}
      />
    </div>
  );
};

1	import Image, { StaticImageData } from "next/image";	2✔
2	import styles from "./DemoPhone.module.scss";	2✔
3	import BgImage from "./images/hero-image-bg.svg";	2✔
4	import PremiumScreenshot from "./images/hero-image-premium.svg";	2✔
5	import PremiumScreenshotFr from "./images/hero-image-premium-fr.svg";	2✔
6	import PremiumScreenshotDe from "./images/hero-image-premium-de.svg";	2✔
7	import NoPremiumScreenshot from "./images/hero-image-nopremium.svg";	2✔
8	import FgImage from "./images/hero-image-fg.svg";	2✔
9	import FgImageDe from "./images/hero-image-fg-de.svg";	2✔
10	import FgImageFr from "./images/hero-image-fg-fr.svg";	2✔
11	import { getLocale } from "../../functions/getLocale";	2✔
12	import { useL10n } from "../../hooks/l10n";	2✔
13
14	export type Props = {
15	premium?: boolean;
16	};
17
18	/**
19	* Image of a phone showing the Relay interface, either the Premium or regular UI as desired.
20	*/
21
22	export const DemoPhone = (props: Props) => {	12✔
23	const l10n = useL10n();	12✔
24	const lang = getLocale(l10n).split("-")[0] ?? "en";	12!
25
26	const getScreenshotImage = (	12✔
27	isPremium: boolean,
28	lang: string
29	): StaticImageData => {
30	if (lang === "fr") {	12!
31	return PremiumScreenshotFr;	×
32	}
33	if (lang === "de") {	12!
34	return PremiumScreenshotDe;	×
35	}
36	// If Premium is not availabe in the country,
37	// show no premium demo phone state
38	if (!isPremium) {	12✔
39	return NoPremiumScreenshot;	5✔
40	}
41	return PremiumScreenshot;	7✔
42	};
43
44	const getForegroundImage = (lang: string): StaticImageData => {	12✔
45	if (lang === "fr") {	12!
46	return FgImageFr;	×
47	}
48	if (lang === "de") {	12!
49	return FgImageDe;	×
50	}
51	return FgImage;	12✔
52	};
53
54	return (
55	<div className={styles.container}>
56	<Image src={BgImage} alt="" className={styles.background} />
57
58	<Image
59	src={getScreenshotImage(props.premium ?? false, lang)}	12!
60	className={styles.phone}
61	alt=""
62	/>
63	<Image
64	src={getForegroundImage(lang)}
65	alt=""
66	className={styles.foreground}
67	/>
68	</div>
69	);
70	};

mozilla / fx-private-relay / 3f1a4922-6438-402b-8a31-b68b7edbe989

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous