applications/account/src/app/single-signup-v2/configuration/helper.tsx

   1 import { c } from 'ttag';
   2
   3 import { Icon } from '@proton/components';
   4 import { BRAND_NAME } from '@proton/shared/lib/constants';
   5 import { Audience } from '@proton/shared/lib/interfaces';
   6
   7 import type { BenefitItem } from '../Benefits';
   8 import swissFlag from '../flag.svg';
   9
  10 export const getBenefits = (appName: string) => {
  11     return c('pass_signup_2023: Info').t`${appName} benefits`;
  12 };
  13
  14 export const getJoinB2BString = () => {
  15     return c('drive_signup_2024: Info')
  16         .t`Join the 50,000+ organizations already benefiting from ${BRAND_NAME}'s security`;
  17 };
  18 export const getJoinString = (audience?: Audience) => {
  19     if (audience === Audience.B2B) {
  20         return getJoinB2BString();
  21     }
  22     return c('pass_signup_2023: Info')
  23         .t`Join over 100 million people who have chosen ${BRAND_NAME} to stay safe online`;
  24 };
  25
  26 export const getBasedString = () => {
  27     return c('pass_signup_2023: Info').t`Based in Switzerland, GDPR compliant`;
  28 };
  29
  30 export const getGenericBenefits = (): BenefitItem[] => {
  31     return [
  32         {
  33             key: 10,
  34             text: c('pass_signup_2023: Info').t`Protected by Swiss privacy laws`,
  35             icon: {
  36                 name: 'shield',
  37             },
  38         },
  39         {
  40             key: 11,
  41             text: c('pass_signup_2023: Info').t`Open-source and audited`,
  42             icon: {
  43                 name: 'magnifier',
  44             },
  45         },
  46     ];
  47 };
  48
  49 export const getBuiltInEncryptionBenefit = (): BenefitItem => {
  50     return {
  51         key: `built-in-encryption`,
  52         text: c('Signup: Info').t`Built-in encryption`,
  53         icon: {
  54             name: 'lock',
  55         },
  56     };
  57 };
  58
  59 export const getEndToEndEncryptionBenefit = (): BenefitItem => {
  60     return {
  61         key: `end-to-end-encryption`,
  62         text: c('Signup: Info').t`End-to-end encryption`,
  63         icon: {
  64             name: 'lock',
  65         },
  66     };
  67 };
  68
  69 export const getSwissPrivacyLawsBenefit = (): BenefitItem => {
  70     return {
  71         key: `swiss-privacy-laws`,
  72         text: c('Signup: Info').t`Protected by Swiss privacy laws`,
  73         icon: {
  74             name: 'shield',
  75         },
  76     };
  77 };
  78
  79 export const getWorksOnAllDevicesBenefit = (): BenefitItem => {
  80     return {
  81         key: `works-on-all-devices`,
  82         text: c('Signup: Info').t`Works on all devices`,
  83         icon: {
  84             name: 'mobile',
  85         },
  86     };
  87 };
  88
  89 export const getISO27001CertifiedBenefit = (): BenefitItem => {
  90     return {
  91         key: `iso27001-certified`,
  92         text: c('Signup: Info').t`ISO 27001 certified`,
  93         icon: {
  94             name: 'globe',
  95         },
  96     };
  97 };
  98
  99 export const getBasedInSwitzerlandGDPRBenefit = (): BenefitItem => {
 100     return {
 101         key: `based-in-switzerland-gdpr`,
 102         text: c('Signup: Info').t`Based in Switzerland, GDPR compliant`,
 103         icon: {
 104             name: 'shield',
 105         },
 106     };
 107 };
 108
 109 export const getTeamKnowsEncryptionBenefit = (): BenefitItem => {
 110     return {
 111         key: `team-knows-encryption`,
 112         text: c('Signup: Info').t`From the team that knows encryption`,
 113         icon: {
 114             name: 'lock',
 115         },
 116     };
 117 };
 118
 119 export const getOpenSourceAndAuditedBenefit = (): BenefitItem => {
 120     return {
 121         key: `open-source-and-audited`,
 122         text: c('Signup: Info').t`Open source and audited`,
 123         icon: {
 124             name: 'magnifier',
 125         },
 126     };
 127 };
 128
 129 export const getAppsMailIncludedBenefit = (): BenefitItem => {
 130     return {
 131         key: `apps-mail-included`,
 132         text: c('Signup: Info').t`Calendar, password manager, file storage, and VPN included`,
 133         icon: {
 134             name: 'grid-2',
 135         },
 136     };
 137 };
 138
 139 export const getAppsIncludedBenefit = (): BenefitItem => {
 140     return {
 141         key: `apps-included`,
 142         text: c('Signup: Info').t`Integrated email, calendar, file storage, password manager, and VPN`,
 143         icon: {
 144             name: 'grid-2',
 145         },
 146     };
 147 };
 148
 149 export const getEmailAliasesBenefit = (): BenefitItem => {
 150     return {
 151         key: `email-aliases`,
 152         text: c('Signup: Info').t`Email aliases`,
 153         icon: {
 154             name: 'alias',
 155         },
 156     };
 157 };
 158
 159 export const getUnlimitedPasswordsBenefit = (): BenefitItem => {
 160     return {
 161         key: `unlimited-passwords`,
 162         text: c('Signup: Info').t`Unlimited passwords`,
 163         icon: {
 164             name: 'key',
 165         },
 166     };
 167 };
 168
 169 export const getDeviceSyncBenefit = (): BenefitItem => {
 170     return {
 171         key: `device-sync`,
 172         text: c('Signup: Info').t`Device sync`,
 173         icon: {
 174             name: 'mobile',
 175         },
 176     };
 177 };
 178
 179 export const getAliasesEmailProtectionBenefit = (): BenefitItem => {
 180     return {
 181         key: `aliases-email-protection`,
 182         text: c('Signup: Info').t`10 aliases for email protection from breaches`,
 183         icon: {
 184             name: 'alias',
 185         },
 186     };
 187 };
 188
 189 export const getAdvancedSecurityBenefit = (): BenefitItem => {
 190     return {
 191         key: `advanced-security`,
 192         text: c('Signup: Info').t`Advanced security features`,
 193         icon: {
 194             name: 'sliders',
 195         },
 196     };
 197 };
 198
 199 export const getScribeBenefit = (): BenefitItem => {
 200     return {
 201         key: `scribe-benefit`,
 202         text: c('mail_signup_2024: Info').t`${BRAND_NAME} Scribe writing assistant`,
 203         icon: {
 204             name: 'pen-sparks',
 205         },
 206     };
 207 };
 208
 209 export const getBundleVisionaryBenefits = (): BenefitItem[] => {
 210     return [
 211         getEndToEndEncryptionBenefit(),
 212         getSwissPrivacyLawsBenefit(),
 213         getOpenSourceAndAuditedBenefit(),
 214         getWorksOnAllDevicesBenefit(),
 215         getAppsIncludedBenefit(),
 216     ];
 217 };
 218
 219 export const getFamilyDuoBenefits = (): BenefitItem[] => {
 220     return [
 221         getEndToEndEncryptionBenefit(),
 222         getSwissPrivacyLawsBenefit(),
 223         getOpenSourceAndAuditedBenefit(),
 224         getScribeBenefit(),
 225         getAppsIncludedBenefit(),
 226     ];
 227 };
 228
 229 export const getGenericFeatures = (isLargeViewport: boolean, audience?: Audience) => {
 230     const e2e = {
 231         key: 'e2e',
 232         left: <Icon size={6} className="color-primary" name="lock" />,
 233         text: c('pass_signup_2023: Feature').t`End-to-end encrypted`,
 234     };
 235
 236     const swiss = {
 237         key: 'swiss',
 238         left: <img width="24" alt="" src={swissFlag} className="rounded-sm" />,
 239         text: isLargeViewport
 240             ? c('pass_signup_2023: Feature').t`Protected by Swiss privacy laws`
 241             : c('pass_signup_2023: Feature').t`Swiss based`,
 242     };
 243
 244     const openSource = {
 245         key: 'open-source',
 246         left: <Icon size={6} className="color-primary" name="globe" />,
 247         text: c('pass_signup_2023: Feature').t`Open source`,
 248     };
 249
 250     const gdpr = {
 251         key: 'gdpr',
 252         left: <Icon size={6} className="color-primary" name="shield" />,
 253         text: c('signup_2024: Feature').t`GDPR and HIPAA compliant`,
 254     };
 255
 256     const audienceSpecificFeatures = audience === Audience.B2B ? [e2e, swiss, gdpr] : [e2e, openSource, swiss];
 257
 258     return audienceSpecificFeatures;
 259 };