polishing

10 files changed, 184 insertions, 90 deletions

diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index 40ce49814..67af04470 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -32,6 +32,10 @@ const messages = defineMessages({
     id: 'pricing.trial.terms.automaticTrialEnd',
     defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
+  trialWorth: {
+    id: 'pricing.trial.terms.trialWorth',
+    defaultMessage: '!!!Free trial (normally {currency}{price} per month)',
+  },
   activationError: {
     id: 'pricing.trial.error',
     defaultMessage: '!!!Sorry, we could not activate your trial!',
@@ -104,6 +108,8 @@ export default @observer @injectSheet(styles) class Signup extends Component {
     trialActivationError: PropTypes.bool.isRequired,
     canSkipTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
+    currency: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
   };
 
   static contextTypes = {
@@ -118,6 +124,8 @@ export default @observer @injectSheet(styles) class Signup extends Component {
       trialActivationError,
       canSkipTrial,
       classes,
+      currency,
+      price,
     } = this.props;
     const { intl } = this.context;
 
@@ -156,6 +164,13 @@ export default @observer @injectSheet(styles) class Signup extends Component {
                 {intl.formatMessage(messages.noStringsAttachedHeadline)}
               </H2>
               <ul className={classes.keyTermsList}>
+                <FeatureItem
+                  icon="👉"
+                  name={intl.formatMessage(messages.trialWorth, {
+                    currency,
+                    price,
+                  })}
+                />
                 <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
                 <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
               </ul>
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index 8e0ded16a..ff378bd8b 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -40,6 +40,15 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
     const { getUserInfoRequest, activateTrialRequest } = stores.user;
     const { featuresRequest, features } = stores.features;
 
+    const { pricingConfig } = features;
+
+    let currency = '$';
+    let price = '5.99';
+    if (pricingConfig) {
+      ({ currency } = pricingConfig);
+      ({ price } = pricingConfig.plans.pro.yearly);
+    }
+
     return (
       <Pricing
         onSubmit={this.submit.bind(this)}
@@ -48,6 +57,8 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
         trialActivationError={activateTrialRequest.isError}
         canSkipTrial={features.canSkipTrial}
         error={error}
+        currency={currency}
+        price={price}
       />
     );
   }
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js
index a49cd40d3..ea04c8448 100644
--- a/src/features/planSelection/components/PlanItem.js
+++ b/src/features/planSelection/components/PlanItem.js
@@ -10,10 +10,6 @@ import { H2 } from '@meetfranz/ui';
 
 import { Button } from '@meetfranz/forms';
 import { mdiArrowRight } from '@mdi/js';
-// import { FeatureList } from '../ui/FeatureList';
-// import { PLANS, PAYMENT_INTERVAL } from '../../config';
-// import { i18nPlanName, i18nIntervalName } from '../../helpers/plan-helpers';
-// import { PLAN_INTERVAL_CONFIG_TYPE } from './types';
 
 const messages = defineMessages({
   perMonth: {
@@ -24,6 +20,10 @@ const messages = defineMessages({
     id: 'subscription.interval.perMonthPerUser',
     defaultMessage: '!!!per month & user',
   },
+  bestValue: {
+    id: 'subscription.bestValue',
+    defaultMessage: '!!!Best value',
+  },
 });
 
 const styles = theme => ({
@@ -41,7 +41,6 @@ const styles = theme => ({
       marginBottom: 20,
       fontSize: 30,
       color: theme.styleTypes.primary.contrast,
-      // fontWeight: 'bold',
     },
   },
   currency: {
@@ -58,9 +57,6 @@ const styles = theme => ({
       verticalAlign: 20,
     },
   },
-  interval: {
-    // paddingBottom: 40,
-  },
   text: {
     marginBottom: 'auto',
   },
@@ -68,10 +64,6 @@ const styles = theme => ({
     background: theme.styleTypes.primary.accent,
     color: theme.styleTypes.primary.contrast,
     margin: [40, 'auto', 0, 'auto'],
-
-    // '&:active': {
-    //   opacity: 0.7,
-    // },
   },
   divider: {
     width: 40,
@@ -83,10 +75,10 @@ const styles = theme => ({
     padding: 20,
     background: color(theme.styleTypes.primary.accent).darken(0.25).hex(),
     color: theme.styleTypes.primary.contrast,
+    position: 'relative',
   },
   content: {
     padding: 20,
-    // border: [1, 'solid', 'red'],
     background: '#EFEFEF',
   },
   simpleCTA: {
@@ -97,6 +89,20 @@ const styles = theme => ({
       fill: theme.styleTypes.primary.accent,
     },
   },
+  bestValue: {
+    background: theme.styleTypes.success.accent,
+    color: theme.styleTypes.success.contrast,
+    right: -66,
+    top: -40,
+    height: 'auto',
+    position: 'absolute',
+    transform: 'rotateZ(45deg)',
+    textAlign: 'center',
+    padding: [5, 50],
+    transformOrigin: 'left bottom',
+    fontSize: 12,
+    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+  },
 });
 
 
@@ -111,6 +117,8 @@ export default @observer @injectSheet(styles) class PlanItem extends Component {
     simpleCTA: PropTypes.bool,
     perUser: PropTypes.bool,
     classes: PropTypes.object.isRequired,
+    bestValue: PropTypes.bool,
+    className: PropTypes.string,
     children: PropTypes.element,
   };
 
@@ -118,6 +126,8 @@ export default @observer @injectSheet(styles) class PlanItem extends Component {
     simpleCTA: false,
     perUser: false,
     children: null,
+    bestValue: false,
+    className: '',
   }
 
   static contextTypes = {
@@ -135,16 +145,26 @@ export default @observer @injectSheet(styles) class PlanItem extends Component {
       ctaLabel,
       simpleCTA,
       perUser,
+      bestValue,
+      className,
       children,
     } = this.props;
     const { intl } = this.context;
 
     const priceParts = `${price}`.split('.');
-    // const intervalName = i18nIntervalName(PAYMENT_INTERVAL.MONTHLY, intl);
 
     return (
-      <div className={classes.root}>
+      <div className={classnames({
+        [classes.root]: true,
+        [className]: className,
+      })}
+      >
         <div className={classes.header}>
+          {bestValue && (
+            <div className={classes.bestValue}>
+              {intl.formatMessage(messages.bestValue)}
+            </div>
+          )}
           <H2 className={classes.planName}>{name}</H2>
           <p className={classes.text}>
             {text}
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js
index 9cd592083..1a45cf035 100644
--- a/src/features/planSelection/components/PlanSelection.js
+++ b/src/features/planSelection/components/PlanSelection.js
@@ -137,6 +137,9 @@ const styles = theme => ({
     border: '1px solid red',
     overflow: 'scroll-x',
   },
+  featuredPlan: {
+    transform: 'scale(1.05)',
+  },
 });
 
 @injectSheet(styles) @observer
@@ -197,29 +200,31 @@ class PlanSelection extends Component {
                 />
               </PlanItem>
               <PlanItem
-                name={i18nPlanName(plans.personal.yearly.id, intl)}
-                text={intl.formatMessage(messages.textPersonal)}
-                price={plans.personal.yearly.price}
+                name={i18nPlanName(plans.pro.yearly.id, intl)}
+                text={intl.formatMessage(messages.textProfessional)}
+                price={plans.pro.yearly.price}
                 currency={currency}
-                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)}
+                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)}
                 upgrade={() => upgradeAccount(plans.personal.yearly.id)}
+                className={classes.featuredPlan}
+                perUser
+                bestValue
               >
                 <FeatureList
-                  plan={PLANS.PERSONAL}
+                  plan={PLANS.PRO}
                   className={classes.featureList}
                 />
               </PlanItem>
               <PlanItem
-                name={i18nPlanName(plans.pro.yearly.id, intl)}
-                text={intl.formatMessage(messages.textProfessional)}
-                price={plans.pro.yearly.price}
+                name={i18nPlanName(plans.personal.yearly.id, intl)}
+                text={intl.formatMessage(messages.textPersonal)}
+                price={plans.personal.yearly.price}
                 currency={currency}
-                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)}
+                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)}
                 upgrade={() => upgradeAccount(plans.personal.yearly.id)}
-                perUser
               >
                 <FeatureList
-                  plan={PLANS.PRO}
+                  plan={PLANS.PERSONAL}
                   className={classes.featureList}
                 />
               </PlanItem>
diff --git a/src/features/planSelection/containers/PlanSelectionScreen.js b/src/features/planSelection/containers/PlanSelectionScreen.js
index 01b357861..dff9051d8 100644
--- a/src/features/planSelection/containers/PlanSelectionScreen.js
+++ b/src/features/planSelection/containers/PlanSelectionScreen.js
@@ -43,15 +43,12 @@ class PlanSelectionScreen extends Component {
   }
 
   upgradeAccount(planId) {
-    const { user, features } = this.props.stores;
     const { upgradeAccount, hideOverlay } = this.props.actions.planSelection;
 
     upgradeAccount({
       planId,
       onCloseWindow: () => {
         hideOverlay();
-        user.getUserInfoRequest.invalidate({ immediately: true });
-        features.featuresRequest.invalidate({ immediately: true });
       },
     });
   }
@@ -68,17 +65,6 @@ class PlanSelectionScreen extends Component {
     const { activateTrial } = this.props.actions.user;
     const { upgradeAccount, downgradeAccount, hideOverlay } = this.props.actions.planSelection;
 
-    // const planConfig = [{
-    //   id: 'free',
-    //   price: 0,
-    // }, {
-    //   id: plans.personal.yearly.id,
-    //   price: plans.personal.yearly.price,
-    // }, {
-    //   id: plans.pro.yearly.id,
-    //   price: plans.pro.yearly.price,
-    // }];
-
     return (
       <ErrorBoundary>
         <PlanSelection
diff --git a/src/features/planSelection/store.js b/src/features/planSelection/store.js
index 57d71011b..e229c37e5 100644
--- a/src/features/planSelection/store.js
+++ b/src/features/planSelection/store.js
@@ -98,6 +98,9 @@ export default class PlanSelectionStore extends FeatureStore {
     win.loadURL(`file://${__dirname}/../../index.html#/payment/${encodeURIComponent(hostedPageURL)}`);
 
     win.on('closed', () => {
+      this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
+      this.stores.features.featuresRequest.invalidate({ immediately: true });
+
       onCloseWindow();
     });
   };
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 210ea001a..eafac1f87 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -482,55 +482,68 @@
         }
       },
       {
-        "defaultMessage": "!!!Sorry, we could not activate your trial!",
+        "defaultMessage": "!!!Free trial (normally {currency}{price} per month)",
         "end": {
           "column": 3,
           "line": 38
         },
         "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.terms.trialWorth",
+        "start": {
+          "column": 14,
+          "line": 35
+        }
+      },
+      {
+        "defaultMessage": "!!!Sorry, we could not activate your trial!",
+        "end": {
+          "column": 3,
+          "line": 42
+        },
+        "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.error",
         "start": {
           "column": 19,
-          "line": 35
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Start my 14-day Franz Professional Trial",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 46
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.cta.accept",
         "start": {
           "column": 13,
-          "line": 39
+          "line": 43
         }
       },
       {
         "defaultMessage": "!!!Continue to Franz",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 50
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.cta.skip",
         "start": {
           "column": 11,
-          "line": 43
+          "line": 47
         }
       },
       {
         "defaultMessage": "!!!Franz Professional includes:",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 54
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.features.headline",
         "start": {
           "column": 20,
-          "line": 47
+          "line": 51
         }
       }
     ],
@@ -3923,6 +3936,19 @@
           "column": 19,
           "line": 23
         }
+      },
+      {
+        "defaultMessage": "!!!Best value",
+        "end": {
+          "column": 3,
+          "line": 30
+        },
+        "file": "src/features/planSelection/components/PlanItem.js",
+        "id": "subscription.bestValue",
+        "start": {
+          "column": 13,
+          "line": 27
+        }
       }
     ],
     "path": "src/features/planSelection/components/PlanItem.json"
@@ -3933,143 +3959,143 @@
         "defaultMessage": "!!!Welcome back, {name}",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 20
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.fullscreen.welcome",
         "start": {
           "column": 11,
-          "line": 16
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!It's time to make a choice. Franz works best on our Personal and Professional plans. Please have a look and choose the best one for you.",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 24
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.fullscreen.subheadline",
         "start": {
           "column": 15,
-          "line": 20
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Basic functionality",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 28
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.free.text",
         "start": {
           "column": 12,
-          "line": 24
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!More services, no waiting - ideal for personal use.",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 32
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.personal.text",
         "start": {
           "column": 16,
-          "line": 28
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Unlimited services and professional features for you - and your team.",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 36
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.pro.text",
         "start": {
           "column": 20,
-          "line": 32
+          "line": 33
         }
       },
       {
         "defaultMessage": "!!!Stay on Free",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 40
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.cta.stayOnFree",
         "start": {
           "column": 17,
-          "line": 36
+          "line": 37
         }
       },
       {
         "defaultMessage": "!!!Downgrade to Free",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 44
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.cta.ctaDowngradeFree",
         "start": {
           "column": 20,
-          "line": 40
+          "line": 41
         }
       },
       {
         "defaultMessage": "!!!Start my free 14-days Trial",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 48
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.cta.trial",
         "start": {
           "column": 15,
-          "line": 44
+          "line": 45
         }
       },
       {
         "defaultMessage": "!!!Choose Personal",
         "end": {
           "column": 3,
-          "line": 51
+          "line": 52
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.cta.upgradePersonal",
         "start": {
           "column": 23,
-          "line": 48
+          "line": 49
         }
       },
       {
         "defaultMessage": "!!!Choose Professional",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 56
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.cta.upgradePro",
         "start": {
           "column": 18,
-          "line": 52
+          "line": 53
         }
       },
       {
         "defaultMessage": "!!!Complete comparison of all plans",
         "end": {
           "column": 3,
-          "line": 59
+          "line": 60
         },
         "file": "src/features/planSelection/components/PlanSelection.js",
         "id": "feature.planSelection.fullFeatureList",
         "start": {
           "column": 19,
-          "line": 56
+          "line": 57
         }
       }
     ],
@@ -4112,52 +4138,52 @@
         "defaultMessage": "!!!Downgrade your Franz Plan",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 20
         },
         "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
         "id": "feature.planSelection.fullscreen.dialog.title",
         "start": {
           "column": 15,
-          "line": 16
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 24
         },
         "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
         "id": "feature.planSelection.fullscreen.dialog.message",
         "start": {
           "column": 17,
-          "line": 20
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Downgrade to Free",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 28
         },
         "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
         "id": "feature.planSelection.fullscreen.dialog.cta.downgrade",
         "start": {
           "column": 22,
-          "line": 24
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!Choose Personal",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 32
         },
         "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
         "id": "feature.planSelection.fullscreen.dialog.cta.upgrade",
         "start": {
           "column": 20,
-          "line": 28
+          "line": 29
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index f2fd7a52a..6977ec096 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -170,6 +170,7 @@
   "pricing.trial.terms.automaticTrialEnd": "Your free trial ends automatically after 14 days",
   "pricing.trial.terms.headline": "No strings attached",
   "pricing.trial.terms.noCreditCard": "No credit card required",
+  "pricing.trial.terms.trialWorth": "Free trial (normally {currency}{price} per month)",
   "service.crashHandler.action": "Reload {name}",
   "service.crashHandler.autoReload": "Trying to automatically restore {name} in {seconds} seconds",
   "service.crashHandler.headline": "Oh no!",
@@ -369,6 +370,7 @@
   "signup.link.login": "Already have an account, sign in?",
   "signup.password.label": "Password",
   "signup.submit.label": "Create account",
+  "subscription.bestValue": "Best value",
   "subscription.cta.activateTrial": "Yes, start the free Franz Professional trial",
   "subscription.cta.allOptions": "See all options",
   "subscription.cta.choosePlan": "Choose your plan",
@@ -413,4 +415,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/src/components/auth/Pricing.json b/src/i18n/messages/src/components/auth/Pricing.json
index 2d09c9ebb..3f0cf4e86 100644
--- a/src/i18n/messages/src/components/auth/Pricing.json
+++ b/src/i18n/messages/src/components/auth/Pricing.json
@@ -65,15 +65,28 @@
     }
   },
   {
+    "id": "pricing.trial.terms.trialWorth",
+    "defaultMessage": "!!!Free trial (normally {currency}{price} per month)",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 35,
+      "column": 14
+    },
+    "end": {
+      "line": 38,
+      "column": 3
+    }
+  },
+  {
     "id": "pricing.trial.error",
     "defaultMessage": "!!!Sorry, we could not activate your trial!",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 35,
+      "line": 39,
       "column": 19
     },
     "end": {
-      "line": 38,
+      "line": 42,
       "column": 3
     }
   },
@@ -82,11 +95,11 @@
     "defaultMessage": "!!!Start my 14-day Franz Professional Trial",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 39,
+      "line": 43,
       "column": 13
     },
     "end": {
-      "line": 42,
+      "line": 46,
       "column": 3
     }
   },
@@ -95,11 +108,11 @@
     "defaultMessage": "!!!Continue to Franz",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 43,
+      "line": 47,
       "column": 11
     },
     "end": {
-      "line": 46,
+      "line": 50,
       "column": 3
     }
   },
@@ -108,11 +121,11 @@
     "defaultMessage": "!!!Franz Professional includes:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 47,
+      "line": 51,
       "column": 20
     },
     "end": {
-      "line": 50,
+      "line": 54,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/planSelection/components/PlanItem.json b/src/i18n/messages/src/features/planSelection/components/PlanItem.json
index 839686390..5a94f32ee 100644
--- a/src/i18n/messages/src/features/planSelection/components/PlanItem.json
+++ b/src/i18n/messages/src/features/planSelection/components/PlanItem.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!per month",
     "file": "src/features/planSelection/components/PlanItem.js",
     "start": {
-      "line": 19,
+      "line": 15,
       "column": 12
     },
     "end": {
-      "line": 22,
+      "line": 18,
       "column": 3
     }
   },
@@ -17,10 +17,23 @@
     "defaultMessage": "!!!per month & user",
     "file": "src/features/planSelection/components/PlanItem.js",
     "start": {
-      "line": 23,
+      "line": 19,
       "column": 19
     },
     "end": {
+      "line": 22,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.bestValue",
+    "defaultMessage": "!!!Best value",
+    "file": "src/features/planSelection/components/PlanItem.js",
+    "start": {
+      "line": 23,
+      "column": 13
+    },
+    "end": {
       "line": 26,
       "column": 3
     }