Skip to content

Commit 0bfe105

Browse files
HardeepAsraniHardeepAsrani
committed
Initial setup for React assets
1 parent b6fa0c5 commit 0bfe105

24 files changed

+42855
-12139
lines changed

‎.github/workflows/build-dev-artifacts.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ jobs:
2323
- name: Setup Node
2424
uses: actions/setup-node@v1
2525
with:
26-
node-version: 14
26+
node-version: 16
2727
- name: Get Composer Cache Directory
2828
id: composer-cache
2929
run: |

‎.github/workflows/deploy.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ jobs:
1212
- name: Install node version
1313
uses: actions/setup-node@v1
1414
with:
15-
node-version: 14
15+
node-version: 16
1616
- name: Install dependencies
1717
run: |
1818
npm ci

‎.github/workflows/test-e2e.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ jobs:
1818
- name: Setup Node
1919
uses: actions/setup-node@v1
2020
with:
21-
node-version: 14
21+
node-version: 16
2222
- name: Get Composer Cache Directory
2323
id: composer-cache
2424
run: |
@@ -62,7 +62,7 @@ jobs:
6262
- name: Setup Node
6363
uses: actions/setup-node@v1
6464
with:
65-
node-version: 14
65+
node-version: 16
6666
- uses: cypress-io/github-action@v2
6767
with:
6868
env: host=testing.optimole.com

‎.gitignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,4 @@ code_quality
1111
build
1212
.DS_Store
1313
cc-test-reporter
14-
assets/js/bundle.js
15-
assets/js/bundle.min.js
14+
assets/build

‎assets/src/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* WordPress dependencies.
3+
*/
4+
import { render } from '@wordpress/element';
5+
6+
/**
7+
* Internal dependencies.
8+
*/
9+
import './style.scss';
10+
import './store';
11+
import App from './parts/Main';
12+
13+
render( <App />, document.getElementById( 'optimole-app' ));

‎assets/src/parts/Header.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/**
2+
* WordPress dependencies.
3+
*/
4+
import { Icon } from "@wordpress/components";
5+
import { useSelect } from "@wordpress/data";
6+
7+
/**
8+
* Internal dependencies.
9+
*/
10+
import { connected, disconnected } from "../utils/icons";
11+
12+
const Header = () => {
13+
const { isConnected } = useSelect( select => {
14+
const { isConnected } = select( 'optimole' );
15+
return {
16+
isConnected: isConnected(),
17+
};
18+
} );
19+
20+
return (
21+
<header className="optml-header">
22+
<div className="optml-header__container">
23+
<div className="optml-header__logo .cursor">
24+
<img
25+
class="spacing__right"
26+
src={ `${ optimoleDashboardApp.assets_url }/img/logo.png` }
27+
alt={ optimoleDashboardApp.strings.optimole + ' ' + optimoleDashboardApp.strings.service_details }
28+
title={ optimoleDashboardApp.strings.optimole + ' ' + optimoleDashboardApp.strings.service_details }
29+
/>
30+
<h3 className="text__font text__size-3 text__bold">{ optimoleDashboardApp.strings.optimole }</h3>
31+
</div>
32+
33+
<div className="optml-header__status">
34+
{ isConnected ? (
35+
<>
36+
<div className="text text__uppercase text__bold text__size-7 color__success spacing__right">
37+
{ optimoleDashboardApp.strings.connected }
38+
</div>
39+
40+
<Icon icon={ connected } />
41+
</>
42+
) : (
43+
<>
44+
<div className="text text__uppercase text__bold text__size-7 color__danger spacing__right">
45+
{ optimoleDashboardApp.strings.not_connected }
46+
</div>
47+
48+
<Icon icon={ disconnected } />
49+
</>
50+
) }
51+
</div>
52+
53+
{/* <nav class="otter-navigation">
54+
<button class="is-active"><span>Dashboard</span></button>
55+
<button class=""><span>Integrations</span></button>
56+
<button class=""><span>Free vs PRO</span></button>
57+
<button class=""><span>Feedback</span></button>
58+
</nav> */}
59+
</div>
60+
</header>
61+
)
62+
}
63+
64+
export default Header;

‎assets/src/parts/Main.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* WordPress dependencies.
3+
*/
4+
import { useSelect } from "@wordpress/data";
5+
6+
/**
7+
* Internal dependencies.
8+
*/
9+
import Header from './Header';
10+
import ConectLayout from './connect-layout';
11+
12+
const Main = () => {
13+
const { isConnected } = useSelect( select => {
14+
const { isConnected } = select( 'optimole' );
15+
return {
16+
isConnected: isConnected(),
17+
};
18+
} );
19+
20+
return (
21+
<>
22+
<Header/>
23+
24+
{ ! isConnected && (
25+
<ConectLayout />
26+
) }
27+
</>
28+
);
29+
};
30+
31+
export default Main;

‎assets/src/parts/connect-layout/APIForm.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* WordPress dependencies.
3+
*/
4+
import {
5+
Button,
6+
TextControl
7+
} from "@wordpress/components";
8+
9+
import { useState } from "@wordpress/element";
10+
11+
const APIForm = ({
12+
setMethod
13+
}) => {
14+
const [ apiKey, setApiKey ] = useState( '' );
15+
16+
return (
17+
<div className="optml-connect__key">
18+
<h2 className="text__font optml-connect__key__title">{ optimoleDashboardApp.strings.connect_btn }</h2>
19+
<p
20+
className="optml-connect__content__description"
21+
dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.steps_connect_api_desc } }
22+
/>
23+
24+
<div className="optml-connect__form__horizontal align__end card__light-background">
25+
<TextControl
26+
label={ optimoleDashboardApp.strings.add_api }
27+
placeholder={ optimoleDashboardApp.strings.email }
28+
value={ apiKey }
29+
onChange={ setApiKey }
30+
className="optml-connect__input basis__80"
31+
/>
32+
33+
<Button
34+
variant="primary"
35+
className="optml-connect__button basis__20"
36+
>
37+
{ optimoleDashboardApp.strings.connect_btn }
38+
</Button>
39+
</div>
40+
41+
<p className="text__help color__danger">
42+
Can not connect to Optimole service
43+
</p>
44+
45+
<div className="text__center spacing__vertical">
46+
<Button
47+
variant="link"
48+
onClick={ () => setMethod( 'email' ) }
49+
>
50+
{ optimoleDashboardApp.strings.back_to_connect }
51+
</Button>
52+
</div>
53+
</div>
54+
);
55+
};
56+
57+
export default APIForm;

‎assets/src/parts/connect-layout/index.js

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
/**
2+
* WordPress dependencies.
3+
*/
4+
import {
5+
Button,
6+
Icon,
7+
TextControl
8+
} from "@wordpress/components";
9+
10+
import {
11+
useDispatch,
12+
useSelect
13+
} from "@wordpress/data";
14+
15+
import {
16+
useEffect,
17+
useState
18+
} from "@wordpress/element";
19+
20+
/**
21+
* Internal dependencies.
22+
*/
23+
import APIForm from './APIForm';
24+
25+
const ConnectLayout = () => {
26+
const [ email, setEmail ] = useState( optimoleDashboardApp.current_user.email );
27+
const [ method, setMethod ] = useState( 'email' );
28+
const [ errors, setErrors ] = useState( {} );
29+
30+
const { registerAccount } = useDispatch( 'optimole' );
31+
32+
const {
33+
autConnectError,
34+
isConnecting
35+
} = useSelect( select => {
36+
const {
37+
getAutoConnectError,
38+
isConnecting
39+
} = select( 'optimole' );
40+
41+
return {
42+
autConnectError: getAutoConnectError(),
43+
isConnecting: isConnecting(),
44+
};
45+
} );
46+
47+
useEffect( () => {
48+
if ( autConnectError ) {
49+
setErrors( {
50+
'error_autoconnect': autConnectError
51+
} );
52+
}
53+
}, [ autConnectError ] );
54+
55+
const onConnect = async () => {
56+
setErrors( {} );
57+
58+
await registerAccount(
59+
{
60+
email
61+
},
62+
response => {
63+
if ( response.code === 'email_registered') {
64+
setErrors( {
65+
'email_registered': response.message
66+
} );
67+
return;
68+
}
69+
70+
if ( response.code !== 'success') {
71+
setErrors( {
72+
'error_register': optimoleDashboardApp.strings.error_register
73+
} );
74+
}
75+
}
76+
);
77+
};
78+
79+
if ( 'key' === method ) {
80+
return (
81+
<div className="optml-connect card">
82+
<div className="optml-connect__container">
83+
<APIForm
84+
setMethod={ setMethod }
85+
/>
86+
</div>
87+
</div>
88+
);
89+
}
90+
91+
return (
92+
<div className="optml-connect card">
93+
<div className="optml-connect__container">
94+
<div className="optml-connect__content">
95+
<h2 className="text__font optml-connect__content__title">{ optimoleDashboardApp.strings.account_needed_heading }</h2>
96+
<p
97+
className="optml-connect__content__description"
98+
dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_title } }
99+
/>
100+
101+
<div className="flex spacing__vertical">
102+
<Icon icon="yes-alt" />
103+
<p
104+
className="optml-connect__content__description__bullet"
105+
dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_1 } }
106+
/>
107+
</div>
108+
109+
<div className="flex spacing__vertical">
110+
<Icon icon="yes-alt" />
111+
<p
112+
className="optml-connect__content__description__bullet"
113+
dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_subtitle_2 } }
114+
/>
115+
</div>
116+
</div>
117+
118+
<div className="optml-connect__form card__light-background">
119+
<TextControl
120+
label={ optimoleDashboardApp.strings.email_address_label }
121+
placeholder={ optimoleDashboardApp.strings.email }
122+
value={ email }
123+
onChange={ setEmail }
124+
className="optml-connect__input"
125+
/>
126+
127+
{ Object.keys( errors ).length > 0 && Object.keys( errors ).map( key => {
128+
return (
129+
<p
130+
key={ key }
131+
className="text__help color__danger"
132+
dangerouslySetInnerHTML={ { __html: errors[ key ] } }
133+
/>
134+
);
135+
} ) || <br/> }
136+
137+
<Button
138+
variant="primary"
139+
className="optml-connect__button"
140+
onClick={ onConnect }
141+
isBusy={ isConnecting }
142+
>
143+
{ optimoleDashboardApp.strings.register_btn }
144+
</Button>
145+
146+
<br/><br/>
147+
148+
<div className="components-base-control__label">
149+
{ optimoleDashboardApp.strings.existing_user }
150+
</div>
151+
152+
<Button
153+
variant="primary"
154+
className="optml-connect__button__secondary"
155+
onClick={ () => setMethod( 'key' ) }
156+
>
157+
{ optimoleDashboardApp.strings.api_exists }
158+
</Button>
159+
</div>
160+
</div>
161+
162+
<div className="optml-connect__footer">
163+
<p
164+
dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.account_needed_footer } }
165+
/>
166+
</div>
167+
</div>
168+
);
169+
};
170+
171+
export default ConnectLayout;

0 commit comments

Comments
 (0)