diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-10-15 22:28:44 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-10-15 22:28:44 +0200 |
commit | 939c00860ae65231070338b5bc0b09db7af0e149 (patch) | |
tree | 9f9b5f1f84967f1185af7f0848f1142a92f36e42 /src | |
parent | remove console log (diff) | |
download | ferdium-app-939c00860ae65231070338b5bc0b09db7af0e149.tar.gz ferdium-app-939c00860ae65231070338b5bc0b09db7af0e149.tar.zst ferdium-app-939c00860ae65231070338b5bc0b09db7af0e149.zip |
plan selection polishing
Diffstat (limited to 'src')
5 files changed, 108 insertions, 90 deletions
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js index d26cc08a2..9cd592083 100644 --- a/src/features/planSelection/components/PlanSelection.js +++ b/src/features/planSelection/components/PlanSelection.js | |||
@@ -11,6 +11,7 @@ import PlanItem from './PlanItem'; | |||
11 | import { i18nPlanName } from '../../../helpers/plan-helpers'; | 11 | import { i18nPlanName } from '../../../helpers/plan-helpers'; |
12 | import { PLANS } from '../../../config'; | 12 | import { PLANS } from '../../../config'; |
13 | import { FeatureList } from '../../../components/ui/FeatureList'; | 13 | import { FeatureList } from '../../../components/ui/FeatureList'; |
14 | import Appear from '../../../components/ui/effects/Appear'; | ||
14 | 15 | ||
15 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
16 | welcome: { | 17 | welcome: { |
@@ -132,6 +133,10 @@ const styles = theme => ({ | |||
132 | display: 'block', | 133 | display: 'block', |
133 | color: `${theme.styleTypes.primary.contrast} !important`, | 134 | color: `${theme.styleTypes.primary.contrast} !important`, |
134 | }, | 135 | }, |
136 | scrollContainer: { | ||
137 | border: '1px solid red', | ||
138 | overflow: 'scroll-x', | ||
139 | }, | ||
135 | }); | 140 | }); |
136 | 141 | ||
137 | @injectSheet(styles) @observer | 142 | @injectSheet(styles) @observer |
@@ -166,67 +171,69 @@ class PlanSelection extends Component { | |||
166 | const { intl } = this.context; | 171 | const { intl } = this.context; |
167 | 172 | ||
168 | return ( | 173 | return ( |
169 | <div | 174 | <Appear> |
170 | className={classes.root} | 175 | <div |
171 | > | 176 | className={classes.root} |
172 | <div className={classes.container}> | 177 | > |
173 | <div className={classes.bigIcon}> | 178 | <div className={classes.container}> |
174 | <Icon icon={mdiRocket} /> | 179 | <div className={classes.bigIcon}> |
175 | </div> | 180 | <Icon icon={mdiRocket} /> |
176 | <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1> | 181 | </div> |
177 | <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2> | 182 | <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1> |
178 | <div className={classes.plans}> | 183 | <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2> |
179 | <PlanItem | 184 | <div className={classes.plans}> |
180 | name={i18nPlanName(PLANS.FREE, intl)} | 185 | <PlanItem |
181 | text={intl.formatMessage(messages.textFree)} | 186 | name={i18nPlanName(PLANS.FREE, intl)} |
182 | price={0} | 187 | text={intl.formatMessage(messages.textFree)} |
183 | currency={currency} | 188 | price={0} |
184 | ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)} | 189 | currency={currency} |
185 | upgrade={() => stayOnFree()} | 190 | ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)} |
186 | simpleCTA | 191 | upgrade={() => stayOnFree()} |
187 | > | 192 | simpleCTA |
188 | <FeatureList | 193 | > |
189 | plan={PLANS.FREE} | 194 | <FeatureList |
190 | className={classes.featureList} | 195 | plan={PLANS.FREE} |
191 | /> | 196 | className={classes.featureList} |
192 | </PlanItem> | 197 | /> |
193 | <PlanItem | 198 | </PlanItem> |
194 | name={i18nPlanName(plans.personal.yearly.id, intl)} | 199 | <PlanItem |
195 | text={intl.formatMessage(messages.textPersonal)} | 200 | name={i18nPlanName(plans.personal.yearly.id, intl)} |
196 | price={plans.personal.yearly.price} | 201 | text={intl.formatMessage(messages.textPersonal)} |
197 | currency={currency} | 202 | price={plans.personal.yearly.price} |
198 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} | 203 | currency={currency} |
199 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | 204 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)} |
200 | > | 205 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} |
201 | <FeatureList | 206 | > |
202 | plan={PLANS.PERSONAL} | 207 | <FeatureList |
203 | className={classes.featureList} | 208 | plan={PLANS.PERSONAL} |
204 | /> | 209 | className={classes.featureList} |
205 | </PlanItem> | 210 | /> |
206 | <PlanItem | 211 | </PlanItem> |
207 | name={i18nPlanName(plans.pro.yearly.id, intl)} | 212 | <PlanItem |
208 | text={intl.formatMessage(messages.textProfessional)} | 213 | name={i18nPlanName(plans.pro.yearly.id, intl)} |
209 | price={plans.pro.yearly.price} | 214 | text={intl.formatMessage(messages.textProfessional)} |
210 | currency={currency} | 215 | price={plans.pro.yearly.price} |
211 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} | 216 | currency={currency} |
212 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} | 217 | ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)} |
213 | perUser | 218 | upgrade={() => upgradeAccount(plans.personal.yearly.id)} |
219 | perUser | ||
220 | > | ||
221 | <FeatureList | ||
222 | plan={PLANS.PRO} | ||
223 | className={classes.featureList} | ||
224 | /> | ||
225 | </PlanItem> | ||
226 | </div> | ||
227 | <a | ||
228 | href="https://meetfranz.com/pricing" | ||
229 | target="_blank" | ||
230 | className={classes.fullFeatureList} | ||
214 | > | 231 | > |
215 | <FeatureList | 232 | {intl.formatMessage(messages.fullFeatureList)} |
216 | plan={PLANS.PRO} | 233 | </a> |
217 | className={classes.featureList} | ||
218 | /> | ||
219 | </PlanItem> | ||
220 | </div> | 234 | </div> |
221 | <a | ||
222 | href="https://meetfranz.com/pricing" | ||
223 | target="_blank" | ||
224 | className={classes.fullFeatureList} | ||
225 | > | ||
226 | {intl.formatMessage(messages.fullFeatureList)} | ||
227 | </a> | ||
228 | </div> | 235 | </div> |
229 | </div> | 236 | </Appear> |
230 | ); | 237 | ); |
231 | } | 238 | } |
232 | } | 239 | } |
diff --git a/src/features/planSelection/containers/PlanSelectionScreen.js b/src/features/planSelection/containers/PlanSelectionScreen.js index b0d9b5ab5..01b357861 100644 --- a/src/features/planSelection/containers/PlanSelectionScreen.js +++ b/src/features/planSelection/containers/PlanSelectionScreen.js | |||
@@ -8,7 +8,8 @@ import FeaturesStore from '../../../stores/FeaturesStore'; | |||
8 | import UserStore from '../../../stores/UserStore'; | 8 | import UserStore from '../../../stores/UserStore'; |
9 | import PlanSelection from '../components/PlanSelection'; | 9 | import PlanSelection from '../components/PlanSelection'; |
10 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; | 10 | import ErrorBoundary from '../../../components/util/ErrorBoundary'; |
11 | import { planSelectionStore } from '..'; | 11 | import { planSelectionStore, GA_CATEGORY_PLAN_SELECTION } from '..'; |
12 | import { gaEvent } from '../../../lib/analytics'; | ||
12 | 13 | ||
13 | const { dialog, app } = remote; | 14 | const { dialog, app } = remote; |
14 | 15 | ||
@@ -37,6 +38,10 @@ class PlanSelectionScreen extends Component { | |||
37 | intl: intlShape, | 38 | intl: intlShape, |
38 | }; | 39 | }; |
39 | 40 | ||
41 | componentDidMount() { | ||
42 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'show'); | ||
43 | } | ||
44 | |||
40 | upgradeAccount(planId) { | 45 | upgradeAccount(planId) { |
41 | const { user, features } = this.props.stores; | 46 | const { user, features } = this.props.stores; |
42 | const { upgradeAccount, hideOverlay } = this.props.actions.planSelection; | 47 | const { upgradeAccount, hideOverlay } = this.props.actions.planSelection; |
@@ -83,6 +88,8 @@ class PlanSelectionScreen extends Component { | |||
83 | upgradeAccount={(planId) => { | 88 | upgradeAccount={(planId) => { |
84 | if (user.data.hadSubscription) { | 89 | if (user.data.hadSubscription) { |
85 | this.upgradeAccount(planId); | 90 | this.upgradeAccount(planId); |
91 | |||
92 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', planId); | ||
86 | } else { | 93 | } else { |
87 | activateTrial({ | 94 | activateTrial({ |
88 | planId, | 95 | planId, |
@@ -103,11 +110,15 @@ class PlanSelectionScreen extends Component { | |||
103 | ], | 110 | ], |
104 | }); | 111 | }); |
105 | 112 | ||
113 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Stay on Free'); | ||
114 | |||
106 | if (selection === 0) { | 115 | if (selection === 0) { |
107 | downgradeAccount(); | 116 | downgradeAccount(); |
108 | hideOverlay(); | 117 | hideOverlay(); |
109 | } else { | 118 | } else { |
110 | upgradeAccount(plans.personal.yearly.id); | 119 | upgradeAccount(plans.personal.yearly.id); |
120 | |||
121 | gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Revoke'); | ||
111 | } | 122 | } |
112 | }} | 123 | }} |
113 | subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded} | 124 | subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded} |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 4e1b01419..f2fd7a52a 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -413,4 +413,4 @@ | |||
413 | "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>", | 413 | "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>", |
414 | "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings", | 414 | "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings", |
415 | "workspaces.switchingIndicator.switchingTo": "Switching to" | 415 | "workspaces.switchingIndicator.switchingTo": "Switching to" |
416 | } | 416 | } \ No newline at end of file |
diff --git a/src/i18n/messages/src/features/planSelection/components/PlanSelection.json b/src/i18n/messages/src/features/planSelection/components/PlanSelection.json index 3dc4f74f4..76f4ed50b 100644 --- a/src/i18n/messages/src/features/planSelection/components/PlanSelection.json +++ b/src/i18n/messages/src/features/planSelection/components/PlanSelection.json | |||
@@ -4,11 +4,11 @@ | |||
4 | "defaultMessage": "!!!Welcome back, {name}", | 4 | "defaultMessage": "!!!Welcome back, {name}", |
5 | "file": "src/features/planSelection/components/PlanSelection.js", | 5 | "file": "src/features/planSelection/components/PlanSelection.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 16, | 7 | "line": 17, |
8 | "column": 11 | 8 | "column": 11 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 19, | 11 | "line": 20, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
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.", | 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.", |
18 | "file": "src/features/planSelection/components/PlanSelection.js", | 18 | "file": "src/features/planSelection/components/PlanSelection.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 20, | 20 | "line": 21, |
21 | "column": 15 | 21 | "column": 15 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 23, | 24 | "line": 24, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,11 @@ | |||
30 | "defaultMessage": "!!!Basic functionality", | 30 | "defaultMessage": "!!!Basic functionality", |
31 | "file": "src/features/planSelection/components/PlanSelection.js", | 31 | "file": "src/features/planSelection/components/PlanSelection.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 24, | 33 | "line": 25, |
34 | "column": 12 | 34 | "column": 12 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 27, | 37 | "line": 28, |
38 | "column": 3 | 38 | "column": 3 |
39 | } | 39 | } |
40 | }, | 40 | }, |
@@ -43,11 +43,11 @@ | |||
43 | "defaultMessage": "!!!More services, no waiting - ideal for personal use.", | 43 | "defaultMessage": "!!!More services, no waiting - ideal for personal use.", |
44 | "file": "src/features/planSelection/components/PlanSelection.js", | 44 | "file": "src/features/planSelection/components/PlanSelection.js", |
45 | "start": { | 45 | "start": { |
46 | "line": 28, | 46 | "line": 29, |
47 | "column": 16 | 47 | "column": 16 |
48 | }, | 48 | }, |
49 | "end": { | 49 | "end": { |
50 | "line": 31, | 50 | "line": 32, |
51 | "column": 3 | 51 | "column": 3 |
52 | } | 52 | } |
53 | }, | 53 | }, |
@@ -56,11 +56,11 @@ | |||
56 | "defaultMessage": "!!!Unlimited services and professional features for you - and your team.", | 56 | "defaultMessage": "!!!Unlimited services and professional features for you - and your team.", |
57 | "file": "src/features/planSelection/components/PlanSelection.js", | 57 | "file": "src/features/planSelection/components/PlanSelection.js", |
58 | "start": { | 58 | "start": { |
59 | "line": 32, | 59 | "line": 33, |
60 | "column": 20 | 60 | "column": 20 |
61 | }, | 61 | }, |
62 | "end": { | 62 | "end": { |
63 | "line": 35, | 63 | "line": 36, |
64 | "column": 3 | 64 | "column": 3 |
65 | } | 65 | } |
66 | }, | 66 | }, |
@@ -69,11 +69,11 @@ | |||
69 | "defaultMessage": "!!!Stay on Free", | 69 | "defaultMessage": "!!!Stay on Free", |
70 | "file": "src/features/planSelection/components/PlanSelection.js", | 70 | "file": "src/features/planSelection/components/PlanSelection.js", |
71 | "start": { | 71 | "start": { |
72 | "line": 36, | 72 | "line": 37, |
73 | "column": 17 | 73 | "column": 17 |
74 | }, | 74 | }, |
75 | "end": { | 75 | "end": { |
76 | "line": 39, | 76 | "line": 40, |
77 | "column": 3 | 77 | "column": 3 |
78 | } | 78 | } |
79 | }, | 79 | }, |
@@ -82,11 +82,11 @@ | |||
82 | "defaultMessage": "!!!Downgrade to Free", | 82 | "defaultMessage": "!!!Downgrade to Free", |
83 | "file": "src/features/planSelection/components/PlanSelection.js", | 83 | "file": "src/features/planSelection/components/PlanSelection.js", |
84 | "start": { | 84 | "start": { |
85 | "line": 40, | 85 | "line": 41, |
86 | "column": 20 | 86 | "column": 20 |
87 | }, | 87 | }, |
88 | "end": { | 88 | "end": { |
89 | "line": 43, | 89 | "line": 44, |
90 | "column": 3 | 90 | "column": 3 |
91 | } | 91 | } |
92 | }, | 92 | }, |
@@ -95,11 +95,11 @@ | |||
95 | "defaultMessage": "!!!Start my free 14-days Trial", | 95 | "defaultMessage": "!!!Start my free 14-days Trial", |
96 | "file": "src/features/planSelection/components/PlanSelection.js", | 96 | "file": "src/features/planSelection/components/PlanSelection.js", |
97 | "start": { | 97 | "start": { |
98 | "line": 44, | 98 | "line": 45, |
99 | "column": 15 | 99 | "column": 15 |
100 | }, | 100 | }, |
101 | "end": { | 101 | "end": { |
102 | "line": 47, | 102 | "line": 48, |
103 | "column": 3 | 103 | "column": 3 |
104 | } | 104 | } |
105 | }, | 105 | }, |
@@ -108,11 +108,11 @@ | |||
108 | "defaultMessage": "!!!Choose Personal", | 108 | "defaultMessage": "!!!Choose Personal", |
109 | "file": "src/features/planSelection/components/PlanSelection.js", | 109 | "file": "src/features/planSelection/components/PlanSelection.js", |
110 | "start": { | 110 | "start": { |
111 | "line": 48, | 111 | "line": 49, |
112 | "column": 23 | 112 | "column": 23 |
113 | }, | 113 | }, |
114 | "end": { | 114 | "end": { |
115 | "line": 51, | 115 | "line": 52, |
116 | "column": 3 | 116 | "column": 3 |
117 | } | 117 | } |
118 | }, | 118 | }, |
@@ -121,11 +121,11 @@ | |||
121 | "defaultMessage": "!!!Choose Professional", | 121 | "defaultMessage": "!!!Choose Professional", |
122 | "file": "src/features/planSelection/components/PlanSelection.js", | 122 | "file": "src/features/planSelection/components/PlanSelection.js", |
123 | "start": { | 123 | "start": { |
124 | "line": 52, | 124 | "line": 53, |
125 | "column": 18 | 125 | "column": 18 |
126 | }, | 126 | }, |
127 | "end": { | 127 | "end": { |
128 | "line": 55, | 128 | "line": 56, |
129 | "column": 3 | 129 | "column": 3 |
130 | } | 130 | } |
131 | }, | 131 | }, |
@@ -134,11 +134,11 @@ | |||
134 | "defaultMessage": "!!!Complete comparison of all plans", | 134 | "defaultMessage": "!!!Complete comparison of all plans", |
135 | "file": "src/features/planSelection/components/PlanSelection.js", | 135 | "file": "src/features/planSelection/components/PlanSelection.js", |
136 | "start": { | 136 | "start": { |
137 | "line": 56, | 137 | "line": 57, |
138 | "column": 19 | 138 | "column": 19 |
139 | }, | 139 | }, |
140 | "end": { | 140 | "end": { |
141 | "line": 59, | 141 | "line": 60, |
142 | "column": 3 | 142 | "column": 3 |
143 | } | 143 | } |
144 | } | 144 | } |
diff --git a/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json b/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json index 04b2144b4..905c6e09a 100644 --- a/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json +++ b/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json | |||
@@ -4,11 +4,11 @@ | |||
4 | "defaultMessage": "!!!Downgrade your Franz Plan", | 4 | "defaultMessage": "!!!Downgrade your Franz Plan", |
5 | "file": "src/features/planSelection/containers/PlanSelectionScreen.js", | 5 | "file": "src/features/planSelection/containers/PlanSelectionScreen.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 16, | 7 | "line": 17, |
8 | "column": 15 | 8 | "column": 15 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 19, | 11 | "line": 20, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
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.", | 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.", |
18 | "file": "src/features/planSelection/containers/PlanSelectionScreen.js", | 18 | "file": "src/features/planSelection/containers/PlanSelectionScreen.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 20, | 20 | "line": 21, |
21 | "column": 17 | 21 | "column": 17 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 23, | 24 | "line": 24, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,11 @@ | |||
30 | "defaultMessage": "!!!Downgrade to Free", | 30 | "defaultMessage": "!!!Downgrade to Free", |
31 | "file": "src/features/planSelection/containers/PlanSelectionScreen.js", | 31 | "file": "src/features/planSelection/containers/PlanSelectionScreen.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 24, | 33 | "line": 25, |
34 | "column": 22 | 34 | "column": 22 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 27, | 37 | "line": 28, |
38 | "column": 3 | 38 | "column": 3 |
39 | } | 39 | } |
40 | }, | 40 | }, |
@@ -43,11 +43,11 @@ | |||
43 | "defaultMessage": "!!!Choose Personal", | 43 | "defaultMessage": "!!!Choose Personal", |
44 | "file": "src/features/planSelection/containers/PlanSelectionScreen.js", | 44 | "file": "src/features/planSelection/containers/PlanSelectionScreen.js", |
45 | "start": { | 45 | "start": { |
46 | "line": 28, | 46 | "line": 29, |
47 | "column": 20 | 47 | "column": 20 |
48 | }, | 48 | }, |
49 | "end": { | 49 | "end": { |
50 | "line": 31, | 50 | "line": 32, |
51 | "column": 3 | 51 | "column": 3 |
52 | } | 52 | } |
53 | } | 53 | } |