Merge Franz 5.5.0 beta.1 and 2 (#549)

* Automatic i18n update (i18n.meetfranz.com)

* Fix zoom not working

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Add environment variable

FRANZ_APPDATA_DIR

* Add environment variable for config

FRANZ_APPDATA_DIR

* fix stuff that shouldn't need fixing in the first place

* notarize app

* bump version to 5.4.1

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* update to electron 7.1.7

* bump version to 5.5.0

* Automatic i18n update (i18n.meetfranz.com)

* Bump electron to 7.1.10

* plan changes

* filter plan variants

* add missing string

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Replace/remove deprecated electron function calls

Electron replaced several function calls with object properties.
Franz still uses some of these deprecated functions, so this commit will replace these with their new property counterpart.

This commit is only transferring the changes made in getferdi/ferdi#371 and getferdi/ferdi#384 into the upstream repository.

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Update to electron 8.0.1

* feat(Service): Add service hibernation to save system resources

* Fix linting issues

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Bump version to electron 8.1.1

* update strings

* update electron-notarize

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Automatic i18n update (i18n.meetfranz.com)

* Add audio & video permission request for cataline

* Automatic i18n update (i18n.meetfranz.com)

* bump version to beta 1

* Automatic i18n update (i18n.meetfranz.com)

* enable external links

* Fix main content href

* Automatic i18n update (i18n.meetfranz.com)

* fix(Service): Fix issue with user agent override in service workers

* Automatic i18n update (i18n.meetfranz.com)

* fix macOS string replacement

* Automatic i18n update (i18n.meetfranz.com)

* fix(Experimental): Fix Google signin

* fix(Service): Add integrity checks to prevent services recipes getting lost

* Remove service reload on app-resume

* update strings

* bump version to beta 2

* Automatic i18n update (i18n.meetfranz.com)

* bump electron-builder and electron-updater deps

* test video permissions

* fix `extendInfo` keys

* fix typo

* fix permission request

* update camera/microphone entitlements

* Automatic i18n update (i18n.meetfranz.com)

* Test screen capture permissions

* unpack `mac-screen-capture-permissions`

* don't require localstorage temp key for permissions request

* move macOS permission request to main process

* Fix checking for permissions

* fix(macOS): Ask the user to move Franz to the `/Applications` Folder

* only try to recover recipe when user is online

* update service request link

* Update changelog

* Reset `service.lostRecipeReloadAttempt` once service is alive again

* Update translations

* Fix crash on macOS

* Fix merge errors

* Fix lint

* Disable ConnectionLostBanner

* #551 Add information about Ferdi to the user agent

* Fix requested changes

* Remove tsbuildinfo files

* Add .tsbuildinfo files to gitignore

* Fix "Cannot destructure property 'app' of '_electron.remote' as it is undefined"

Co-authored-by: FranzBot <i18n@meetfranz.com>
Co-authored-by: Makazzz <makazzzpro@live.ca>
Co-authored-by: Stefan Malzner <stefan@adlk.io>

4 files changed, 81 insertions, 59 deletions

diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
index 38de2dbc8..2f25e7139 100644
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -192,6 +192,11 @@ class AnnouncementScreen extends Component {
     stores: PropTypes.shape({
       ui: PropTypes.instanceOf(UIStore).isRequired,
     }).isRequired,
+    actions: PropTypes.shape({
+      app: PropTypes.shape({
+        openExternalUrl: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static contextTypes = {
@@ -199,7 +204,7 @@ class AnnouncementScreen extends Component {
   };
 
   render() {
-    const { classes, stores } = this.props;
+    const { classes, stores, actions } = this.props;
     const { intl } = this.context;
     const { changelog, announcement } = announcementsStore;
     const themeImage = stores.ui.isDarkThemeActive ? 'dark' : 'light';
@@ -223,14 +228,23 @@ class AnnouncementScreen extends Component {
                       __html: marked(announcement.main.text, markedOptions),
                     }}
                   />
-                  <div className={classes.mainCtaButton}>
-                    <Button
-                      label={announcement.main.cta.label}
-                      onClick={() => {
-                        window.location.href = `#${announcement.main.cta.href}`;
-                      }}
-                    />
-                  </div>
+                  {(announcement.main.cta.label || announcement.main.cta.href) && (
+                    <div className={classes.mainCtaButton}>
+                      <Button
+                        label={announcement.main.cta.label}
+                        onClick={() => {
+                          const {
+                            href,
+                          } = announcement.main.cta;
+                          if (announcement.main.cta.href.startsWith('http')) {
+                            actions.app.openExternalUrl({ url: href });
+                          } else {
+                            window.location.href = `#${href}`;
+                          }
+                        }}
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
             </div>
@@ -250,7 +264,14 @@ class AnnouncementScreen extends Component {
                     <Button
                       label={announcement.spotlight.cta.label}
                       onClick={() => {
-                        window.location.href = `#${announcement.spotlight.cta.href}`;
+                        const {
+                          href,
+                        } = announcement.spotlight.cta;
+                        if (announcement.spotlight.cta.href.startsWith('http')) {
+                          actions.app.openExternalUrl({ url: href });
+                        } else {
+                          window.location.href = `#${href}`;
+                        }
                       }}
                     />
                   </div>
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js
index ec061377b..3855fedf1 100644
--- a/src/features/planSelection/components/PlanItem.js
+++ b/src/features/planSelection/components/PlanItem.js
@@ -49,6 +49,7 @@ const styles = theme => ({
   priceWrapper: {
     height: 50,
     marginBottom: 0,
+    marginTop: ({ text }) => (!text ? 15 : 0),
   },
   price: {
     fontSize: 50,
@@ -64,7 +65,7 @@ const styles = theme => ({
   cta: {
     background: theme.styleTypes.primary.accent,
     color: theme.styleTypes.primary.contrast,
-    margin: [40, 'auto', 0, 'auto'],
+    margin: [30, 'auto', 0, 'auto'],
   },
   divider: {
     width: 40,
@@ -77,10 +78,14 @@ const styles = theme => ({
     background: color(theme.styleTypes.primary.accent).darken(0.25).hex(),
     color: theme.styleTypes.primary.contrast,
     position: 'relative',
+    height: 'auto',
   },
   content: {
     padding: [10, 20, 20],
     background: '#EFEFEF',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
   },
   simpleCTA: {
     background: 'none',
@@ -167,10 +172,14 @@ export default @observer @injectSheet(styles) class PlanItem extends Component {
             </div>
           )}
           <H2 className={classes.planName}>{name}</H2>
-          <p className={classes.text}>
-            {text}
-          </p>
-          <hr className={classes.divider} />
+          {text && (
+            <>
+              <p className={classes.text}>
+                {text}
+              </p>
+              <hr className={classes.divider} />
+            </>
+          )}
           <p className={classes.priceWrapper}>
             <span className={classes.currency}>{currency}</span>
             <span className={classes.price}>
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js
index 4bf5238dd..6f0dd30ad 100644
--- a/src/features/planSelection/components/PlanSelection.js
+++ b/src/features/planSelection/components/PlanSelection.js
@@ -6,7 +6,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import { H1, H2, Icon } from '@meetfranz/ui';
 import color from 'color';
 
-import { mdiRocket, mdiArrowRight } from '@mdi/js';
+import { mdiArrowRight } from '@mdi/js';
 import PlanItem from './PlanItem';
 import { i18nPlanName } from '../../../helpers/plan-helpers';
 import { PLANS } from '../../../config';
@@ -79,10 +79,10 @@ const styles = theme => ({
     overflowY: 'scroll',
   },
   container: {
-    width: '80%',
+    // width: '80%',
     height: 'auto',
-    background: theme.styleTypes.primary.accent,
-    padding: 40,
+    // background: theme.styleTypes.primary.accent,
+    // padding: 40,
     borderRadius: theme.borderRadius,
     maxWidth: 1000,
 
@@ -104,23 +104,6 @@ const styles = theme => ({
       boxShadow: [0, 2, 30, color('#000').alpha(0.1).rgb().string()],
     },
   },
-  bigIcon: {
-    background: theme.styleTypes.danger.accent,
-    width: 120,
-    height: 120,
-    display: 'flex',
-    alignItems: 'center',
-    borderRadius: '100%',
-    justifyContent: 'center',
-    margin: [-100, 'auto', 20],
-
-    '& svg': {
-      width: '80px !important',
-      height: '80px !important',
-      filter: 'drop-shadow( 0px 2px 3px rgba(0, 0, 0, 0.3))',
-      fill: theme.styleTypes.danger.contrast,
-    },
-  },
   headline: {
     fontSize: 40,
   },
@@ -158,7 +141,7 @@ const styles = theme => ({
     overflow: 'scroll-x',
   },
   featuredPlan: {
-    transform: 'scale(1.05)',
+    transform: ({ isPersonalPlanAvailable }) => (isPersonalPlanAvailable ? 'scale(1.05)' : null),
   },
   disclaimer: {
     textAlign: 'right',
@@ -177,8 +160,13 @@ class PlanSelection extends Component {
     upgradeAccount: PropTypes.func.isRequired,
     stayOnFree: PropTypes.func.isRequired,
     hadSubscription: PropTypes.bool.isRequired,
+    isPersonalPlanAvailable: PropTypes.bool,
   };
 
+  static defaultProps = {
+    isPersonalPlanAvailable: true,
+  }
+
   static contextTypes = {
     intl: intlShape,
   };
@@ -196,6 +184,7 @@ class PlanSelection extends Component {
       upgradeAccount,
       stayOnFree,
       hadSubscription,
+      isPersonalPlanAvailable,
     } = this.props;
 
     const { intl } = this.context;
@@ -206,15 +195,14 @@ class PlanSelection extends Component {
           className={classes.root}
         >
           <div className={classes.container}>
-            <div className={classes.bigIcon}>
-              <Icon icon={mdiRocket} />
-            </div>
             <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1>
-            <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2>
+            {isPersonalPlanAvailable && (
+              <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2>
+            )}
             <div className={classes.plans}>
               <PlanItem
                 name={i18nPlanName(PLANS.FREE, intl)}
-                text={intl.formatMessage(messages.textFree)}
+                text={isPersonalPlanAvailable ? intl.formatMessage(messages.textFree) : null}
                 price={0}
                 currency={currency}
                 ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)}
@@ -228,33 +216,35 @@ class PlanSelection extends Component {
               </PlanItem>
               <PlanItem
                 name={i18nPlanName(plans.pro.yearly.id, intl)}
-                text={intl.formatMessage(messages.textProfessional)}
+                text={isPersonalPlanAvailable ? intl.formatMessage(messages.textProfessional) : null}
                 price={plans.pro.yearly.price}
                 currency={currency}
                 ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)}
                 upgrade={() => upgradeAccount(plans.pro.yearly.id)}
                 className={classes.featuredPlan}
                 perUser
-                bestValue
-              >
-                <FeatureList
-                  plan={PLANS.PRO}
-                  className={classes.featureList}
-                />
-              </PlanItem>
-              <PlanItem
-                name={i18nPlanName(plans.personal.yearly.id, intl)}
-                text={intl.formatMessage(messages.textPersonal)}
-                price={plans.personal.yearly.price}
-                currency={currency}
-                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)}
-                upgrade={() => upgradeAccount(plans.personal.yearly.id)}
+                bestValue={isPersonalPlanAvailable}
               >
                 <FeatureList
-                  plan={PLANS.PERSONAL}
+                  plan={isPersonalPlanAvailable ? PLANS.PRO : null}
                   className={classes.featureList}
                 />
               </PlanItem>
+              {isPersonalPlanAvailable && (
+                <PlanItem
+                  name={i18nPlanName(plans.personal.yearly.id, intl)}
+                  text={intl.formatMessage(messages.textPersonal)}
+                  price={plans.personal.yearly.price}
+                  currency={currency}
+                  ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)}
+                  upgrade={() => upgradeAccount(plans.personal.yearly.id)}
+                >
+                  <FeatureList
+                    plan={PLANS.PERSONAL}
+                    className={classes.featureList}
+                  />
+                </PlanItem>
+              )}
             </div>
             <div className={classes.footer}>
               <a
diff --git a/src/features/planSelection/containers/PlanSelectionScreen.js b/src/features/planSelection/containers/PlanSelectionScreen.js
index d202c924e..e4d85cda5 100644
--- a/src/features/planSelection/containers/PlanSelectionScreen.js
+++ b/src/features/planSelection/containers/PlanSelectionScreen.js
@@ -53,7 +53,8 @@ class PlanSelectionScreen extends Component {
     const { intl } = this.context;
 
     const { user, features } = this.props.stores;
-    const { plans, currency } = features.features.pricingConfig;
+    const { isPersonalPlanAvailable, pricingConfig } = features.features;
+    const { plans, currency } = pricingConfig;
     const { activateTrial } = this.props.actions.user;
     const { downgradeAccount, hideOverlay } = this.props.actions.planSelection;
 
@@ -95,6 +96,7 @@ class PlanSelectionScreen extends Component {
           }}
           subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded}
           hadSubscription={user.data.hadSubscription}
+          isPersonalPlanAvailable={isPersonalPlanAvailable}
         />
       </ErrorBoundary>
     );