Skip to content

Commit 3c23e06

Browse files
brunolemosbrunolemos
committed
[Mobile] Show "Desktop app" download button on mobile as well
1 parent b7422c1 commit 3c23e06

2 files changed

Lines changed: 124 additions & 117 deletions

File tree

‎packages/components/src/components/modals/SettingsModal.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -112,15 +112,7 @@ export const SettingsModal = React.memo((props: SettingsModalProps) => {
112112
</View>
113113
)}
114114

115-
{!!(
116-
Platform.isElectron ||
117-
(Platform.OS === 'web' && sizename > '2-medium')
118-
) && (
119-
<>
120-
<DesktopPreferences />
121-
<Spacer height={contentPadding} />
122-
</>
123-
)}
115+
<DesktopPreferences />
124116

125117
<ThemePreference />
126118

‎packages/components/src/components/widgets/DesktopPreferences.tsx‎

Lines changed: 123 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { H3 } from '../common/H3'
2121
import { Spacer } from '../common/Spacer'
2222
import { SubHeader } from '../common/SubHeader'
2323
import { Switch } from '../common/Switch'
24+
import { useAppLayout } from '../context/LayoutContext'
2425
import { ThemedIcon } from '../themed/ThemedIcon'
2526
import { ThemedText } from '../themed/ThemedText'
2627
import { ThemedView } from '../themed/ThemedView'
@@ -34,14 +35,18 @@ export const DesktopPreferences = React.memo(() => {
3435
isMenuBarMode,
3536
} = useDesktopOptions()
3637

38+
const { sizename } = useAppLayout()
39+
3740
const hasAccessToPushNotifications = getColumnOptionMetadata({
3841
Platform,
3942
plan,
4043
}).enableDesktopPushNotifications.hasAccess
4144

4245
return (
4346
<View>
44-
<SubHeader title="Desktop">
47+
<SubHeader
48+
title={Platform.isElectron ? 'Desktop options' : 'Desktop app'}
49+
>
4550
{!Platform.isElectron && (
4651
<>
4752
<Spacer flex={1} />
@@ -66,118 +71,128 @@ export const DesktopPreferences = React.memo(() => {
6671
)}
6772
</SubHeader>
6873

69-
<View style={{ paddingHorizontal: contentPadding }}>
70-
<View
71-
style={[
72-
sharedStyles.horizontal,
73-
sharedStyles.alignItemsCenter,
74-
sharedStyles.justifyContentSpaceBetween,
75-
]}
76-
>
77-
<H3>Menubar mode</H3>
78-
<Switch
79-
analyticsLabel="desktop_menubar_mode"
80-
disabled={!Platform.isElectron}
81-
onValueChange={value =>
82-
window.ipc.send('update-settings', {
83-
settings: 'isMenuBarMode',
84-
value,
85-
})
86-
}
87-
value={!!(Platform.isElectron && isMenuBarMode)}
88-
/>
89-
</View>
74+
{!!(
75+
Platform.isElectron ||
76+
(Platform.OS === 'web' && sizename > '2-medium')
77+
) && (
78+
<View style={{ paddingHorizontal: contentPadding }}>
79+
<View
80+
style={[
81+
sharedStyles.horizontal,
82+
sharedStyles.alignItemsCenter,
83+
sharedStyles.justifyContentSpaceBetween,
84+
]}
85+
>
86+
<H3>Menubar mode</H3>
87+
<Switch
88+
analyticsLabel="desktop_menubar_mode"
89+
disabled={!Platform.isElectron}
90+
onValueChange={value =>
91+
window.ipc.send('update-settings', {
92+
settings: 'isMenuBarMode',
93+
value,
94+
})
95+
}
96+
value={!!(Platform.isElectron && isMenuBarMode)}
97+
/>
98+
</View>
9099

91-
<Spacer height={contentPadding} />
100+
<Spacer height={contentPadding} />
92101

93-
<View
94-
style={[
95-
sharedStyles.horizontal,
96-
sharedStyles.alignItemsCenter,
97-
sharedStyles.justifyContentSpaceBetween,
98-
]}
99-
>
100-
<H3>Push Notifications</H3>
101-
<Switch
102-
analyticsLabel="desktop_push_notifications"
103-
color={!hasAccessToPushNotifications ? 'red' : undefined}
104-
disabled={!Platform.isElectron}
105-
onValueChange={value =>
106-
window.ipc.send('update-settings', {
107-
settings: 'enablePushNotifications',
108-
value,
109-
})
110-
}
111-
value={!!(Platform.isElectron && enablePushNotifications)}
112-
/>
113-
</View>
102+
<View
103+
style={[
104+
sharedStyles.horizontal,
105+
sharedStyles.alignItemsCenter,
106+
sharedStyles.justifyContentSpaceBetween,
107+
]}
108+
>
109+
<H3>Push Notifications</H3>
110+
<Switch
111+
analyticsLabel="desktop_push_notifications"
112+
color={!hasAccessToPushNotifications ? 'red' : undefined}
113+
disabled={!Platform.isElectron}
114+
onValueChange={value =>
115+
window.ipc.send('update-settings', {
116+
settings: 'enablePushNotifications',
117+
value,
118+
})
119+
}
120+
value={!!(Platform.isElectron && enablePushNotifications)}
121+
/>
122+
</View>
114123

115-
<Spacer height={contentPadding} />
116-
<View
117-
style={[
118-
sharedStyles.horizontal,
119-
sharedStyles.alignItemsCenter,
120-
sharedStyles.justifyContentSpaceBetween,
121-
]}
122-
>
123-
<H3>Push Notifications Sound</H3>
124-
<Switch
125-
analyticsLabel="desktop_push_notifications_sound"
126-
color={!hasAccessToPushNotifications ? 'red' : undefined}
127-
disabled={!Platform.isElectron || !enablePushNotifications}
128-
onValueChange={value =>
129-
window.ipc.send('update-settings', {
130-
settings: 'enablePushNotificationsSound',
131-
value,
132-
})
133-
}
134-
value={
135-
// hasAccessToPushNotifications &&
136-
!!(
137-
Platform.isElectron &&
138-
enablePushNotifications &&
139-
enablePushNotificationsSound
140-
)
141-
}
142-
/>
143-
</View>
124+
<Spacer height={contentPadding} />
125+
<View
126+
style={[
127+
sharedStyles.horizontal,
128+
sharedStyles.alignItemsCenter,
129+
sharedStyles.justifyContentSpaceBetween,
130+
]}
131+
>
132+
<H3>Push Notifications Sound</H3>
133+
<Switch
134+
analyticsLabel="desktop_push_notifications_sound"
135+
color={!hasAccessToPushNotifications ? 'red' : undefined}
136+
disabled={!Platform.isElectron || !enablePushNotifications}
137+
onValueChange={value =>
138+
window.ipc.send('update-settings', {
139+
settings: 'enablePushNotificationsSound',
140+
value,
141+
})
142+
}
143+
value={
144+
// hasAccessToPushNotifications &&
145+
!!(
146+
Platform.isElectron &&
147+
enablePushNotifications &&
148+
enablePushNotificationsSound
149+
)
150+
}
151+
/>
152+
</View>
144153

145-
{!!(
146-
Platform.isElectron &&
147-
!hasAccessToPushNotifications &&
148-
enablePushNotifications &&
149-
cheapestPlanWithNotifications
150-
) && (
151-
<>
152-
<Spacer height={contentPadding} />
154+
{!!(
155+
Platform.isElectron &&
156+
!hasAccessToPushNotifications &&
157+
enablePushNotifications &&
158+
cheapestPlanWithNotifications
159+
) && (
160+
<>
161+
<Spacer height={contentPadding} />
153162

154-
<ThemedView
155-
backgroundColor="backgroundColorLess1"
156-
style={[sharedStyles.alignSelfStretch, { borderRadius: radius }]}
157-
>
158-
<Button
159-
analyticsLabel="desktop_preferences_push_notifications_cta"
160-
size="auto"
161-
onPress={() => {
162-
dispatch(
163-
actions.pushModal({
164-
name: 'PRICING',
165-
params: {
166-
highlightFeature: 'enablePushNotifications',
167-
// initialSelectedPlanId: cheapestPlanWithNotifications.id,
168-
},
169-
}),
170-
)
171-
}}
172-
textStyle={{ fontWeight: '300' }}
173-
>{`Unlock Push Notifications and other features for ${formatPriceAndInterval(
174-
cheapestPlanWithNotifications.amount,
175-
cheapestPlanWithNotifications,
176-
)}`}</Button>
177-
</ThemedView>
178-
</>
179-
)}
180-
</View>
163+
<ThemedView
164+
backgroundColor="backgroundColorLess1"
165+
style={[
166+
sharedStyles.alignSelfStretch,
167+
{ borderRadius: radius },
168+
]}
169+
>
170+
<Button
171+
analyticsLabel="desktop_preferences_push_notifications_cta"
172+
size="auto"
173+
onPress={() => {
174+
dispatch(
175+
actions.pushModal({
176+
name: 'PRICING',
177+
params: {
178+
highlightFeature: 'enablePushNotifications',
179+
// initialSelectedPlanId: cheapestPlanWithNotifications.id,
180+
},
181+
}),
182+
)
183+
}}
184+
textStyle={{ fontWeight: '300' }}
185+
>{`Unlock Push Notifications and other features for ${formatPriceAndInterval(
186+
cheapestPlanWithNotifications.amount,
187+
cheapestPlanWithNotifications,
188+
)}`}</Button>
189+
</ThemedView>
190+
</>
191+
)}
192+
193+
<Spacer height={contentPadding} />
194+
</View>
195+
)}
181196
</View>
182197
)
183198
})

0 commit comments

Comments
 (0)