This repository has been archived by the owner on Jul 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 145
/
index.js
92 lines (83 loc) · 2.35 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/**
* External dependencies
*/
import React, { useEffect, useState } from '@wordpress/element';
import { Button, Icon } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { recordEvent } from '@woocommerce/tracks';
/**
* Internal dependencies
*/
import { platform, ANDROID_PLATFORM } from '../lib/platform';
import { AppIcon } from './app-icon';
import './style.scss';
import { PLAY_STORE_LINK, TRACKING_EVENT_NAME } from './constants';
const SHOW_APP_BANNER_MODIFIER_CLASS = 'woocommerce-layout__show-app-banner';
export const MobileAppBanner = ( { onInstall, onDismiss } ) => {
useEffect( () => {
const layout = document.getElementsByClassName(
'woocommerce-layout'
)[ 0 ];
if ( platform() === ANDROID_PLATFORM ) {
if ( layout ) {
// This is a hack to allow the mobile banner to work in the context of the header which is
// position fixed. This can be refactored away when we move away from the activity panel
// in future.
layout.classList.add( SHOW_APP_BANNER_MODIFIER_CLASS );
}
}
return () => {
if ( layout ) {
layout.classList.remove( SHOW_APP_BANNER_MODIFIER_CLASS );
}
};
}, [] );
const [ isDismissed, setDismissed ] = useState( false );
// On iOS the "Smart App Banner" meta tag is used so only display this on Android.
if ( platform() === ANDROID_PLATFORM && ! isDismissed ) {
return (
<div className="woocommerce-mobile-app-banner">
<Icon
icon="no-alt"
data-testid="dismiss-btn"
onClick={ () => {
onDismiss();
setDismissed( true );
recordEvent( TRACKING_EVENT_NAME, {
action: 'dismiss',
} );
} }
/>
<AppIcon />
<div className="woocommerce-mobile-app-banner__description">
<p className="woocommerce-mobile-app-banner__description__text">
{ __(
'Run your store from anywhere',
'woocommerce-admin'
) }
</p>
<p className="woocommerce-mobile-app-banner__description__text">
{ __(
'Download the WooCommerce app',
'woocommerce-admin'
) }
</p>
</div>
<Button
href={ PLAY_STORE_LINK }
isSecondary
onClick={ () => {
onInstall();
setDismissed( true );
recordEvent( TRACKING_EVENT_NAME, {
action: 'install',
} );
} }
>
{ __( 'Install', 'woocommerce-admin' ) }
</Button>
</div>
);
}
return null;
};