Trial plan front-end changes

desktop-app/.env

@@ -0,0 +1 @@
+REST_BASE_URL=https://mtvsskkdp9.execute-api.us-east-1.amazonaws.com/dev/

desktop-app/app/app.global.css

@@ -84,6 +84,10 @@ a:hover {
   display: flex;
 }
 
+.spin::before {
+  animation: fa-spin 1s linear infinite;
+}
+
 /*
 {
 	"$schema": "vscode://schemas/color-theme",

desktop-app/app/components/LicenseManager/index.js

@@ -5,7 +5,7 @@ import WelcomeScreen from '../WelcomeScreen';
 import styles from './style.css';
 
 export default function LicenseManager(props) {
-  const [status, setStatus] = useState(true);
+  const [status, setStatus] = useState(false);
 
   if (status) {
     return props.children;

desktop-app/app/components/WelcomeScreen/index.js

@@ -1,15 +1,63 @@
 // @flow
 import React, {useState} from 'react';
+import url from 'url';
+import {validateEmail} from '../../utils/generalUtils';
 import {shell} from 'electron';
 import cx from 'classnames';
 import styles from './style.css';
 
-export default function LicenseManager(props) {
+export default function WelcomeScreen(props) {
   const [activeSection, setActiveSection] = useState('license');
   const [licenseKey, setLicenseKey] = useState('');
   const [trialEmail, setTrialEmail] = useState('');
+  const [trialActivationStatus, setTrialActivationStatus] = useState('');
+  const [
+    trialActivationErrorMessage,
+    setTrialActivationErrorMessage,
+  ] = useState('');
+
   const isLicenseActive = activeSection === 'license';
   const isTrialActive = activeSection === 'trial';
+
+  const trialEmailChange = e => {
+    setTrialEmail(e.target.value);
+    setTrialActivationStatus('');
+    setTrialActivationErrorMessage('');
+  };
+
+  const activateTrial = async () => {
+    if (!validateEmail(trialEmail)) {
+      setTrialActivationStatus('false');
+      setTrialActivationErrorMessage(
+        'Invalid email address, please enter a valid one to proceed'
+      );
+      return;
+    }
+    setTrialActivationStatus('loading');
+    try {
+      const response = await fetch(
+        `${url.resolve(
+          process.env.REST_BASE_URL,
+          '/activate-trial'
+        )}?email=${trialEmail}`
+      );
+      console.log('activating trial', response);
+      if (response.state) {
+        setTrialActivationStatus('true');
+      } else {
+        setTrialActivationStatus('false');
+        setTrialActivationErrorMessage('Trial activation failed');
+      }
+    } catch (err) {
+      setTrialActivationStatus('false');
+      setTrialActivationErrorMessage('Trial activation failed');
+    }
+  };
+
+  const activateLicense = () => {
+    console.log('activating license');
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.title}>Welcome, lets activate the app</div>
@@ -39,12 +87,13 @@ export default function LicenseManager(props) {
                 value={licenseKey}
                 onChange={e => setLicenseKey(e.target.value)}
               />
-              <i
+              <span
                 className={cx(
                   styles.inputIcon,
                   styles.iconButton,
                   'fa fa-arrow-right'
                 )}
+                onClick={activateLicense}
               />
             </div>
             <div
@@ -95,15 +144,31 @@ export default function LicenseManager(props) {
                 placeholder="Email address"
                 name="email"
                 value={trialEmail}
-                onChange={e => setTrialEmail(e.target.value)}
+                onChange={trialEmailChange}
               />
-              <i
-                className={cx(
-                  styles.inputIcon,
-                  styles.iconButton,
-                  'fa fa-arrow-right'
+
+              <span
+                className={cx(styles.inputIcon, styles.iconButton, {
+                  'fa fa-arrow-right': trialActivationStatus !== 'loading',
+                  'fa fa-circle-notch spin':
+                    trialActivationStatus === 'loading',
+                })}
+                onClick={activateTrial}
+              />
+            </div>
+            <div>
+              {trialActivationStatus === 'false' &&
+                trialActivationErrorMessage && (
+                  <div className={styles.errorMessage}>
+                    {trialActivationErrorMessage}
+                  </div>
                 )}
-              />
+              {trialActivationStatus === 'true' && (
+                <div className={styles.successMessage}>
+                  Trial Activated, please check your email for the trial license
+                  key
+                </div>
+              )}
             </div>
           </div>
         </div>

desktop-app/app/components/WelcomeScreen/style.css

@@ -149,3 +149,11 @@
 .buyLicenseContainer.active .buyLicenseButton {
   background: var(--activeButtonBg);
 }
+
+.errorMessage {
+  color: red;
+}
+
+.successMessage {
+  color: green;
+}

desktop-app/app/index.js

@@ -1,3 +1,4 @@
+require('dotenv').config();
 import React from 'react';
 import {remote} from 'electron';
 import {render} from 'react-dom';

desktop-app/app/main.dev.js

@@ -10,6 +10,7 @@
  *
  * @flow
  */
+require('dotenv').config();
 import electron, {app, BrowserWindow, ipcMain} from 'electron';
 import {autoUpdater} from 'electron-updater';
 import settings from 'electron-settings';

desktop-app/app/utils/generalUtils.js

@@ -0,0 +1,5 @@
+const emailRE = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+export function validateEmail(email) {
+  return emailRE.test(String(email).toLowerCase());
+}

desktop-app/buildAndPublish.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+source ./setCreds.sh
+yarn run package-ci

desktop-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "Responsively-App",
   "productName": "ResponsivelyApp",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A developer-friendly browser for developing responsive web apps",
   "scripts": {
     "build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
@@ -236,6 +236,7 @@
     "bluebird": "^3.5.5",
     "classnames": "^2.2.6",
     "devtron": "^1.4.0",
+    "dotenv": "^8.1.0",
     "electron-cookies": "heap/electron-cookies",
     "electron-debug": "^3.0.1",
     "electron-log": "^3.0.7",

desktop-app/yarn.lock

@@ -4711,6 +4711,11 @@ dotenv@^8.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.0.0.tgz#ed310c165b4e8a97bb745b0a9d99c31bda566440"
   integrity sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg==
 
+dotenv@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.1.0.tgz#d811e178652bfb8a1e593c6dd704ec7e90d85ea2"
+  integrity sha512-GUE3gqcDCaMltj2++g6bRQ5rBJWtkWTmqmD0fo1RnnMuUqHNCt2oTPeDnS9n6fKYvlhn7AeBkb38lymBtWBQdA==
+
 duplexer2@~0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"