Merge pull request #2880 from glific/feature/terms-and-conditions

Feature: Terms and conditions UI

src/components/UI/Form/Input/Input.module.css

@@ -9,9 +9,13 @@
 }
 
 .Label {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
-  color: #93a29b;
+  color: #111;
+  line-height: 22px;
+  margin: 6px 0;
+  display: flex;
+  column-gap: 4px;
 }
 
 .HelperText {
@@ -87,4 +91,4 @@
   .Input {
     width: 100%;
   }
-}
+}

src/components/UI/Form/Input/Input.test.tsx

@@ -6,9 +6,8 @@ describe('<Input />', () => {
   const getProps: any = () => ({
     form: { touched: false, errors: {} },
     field: { name: 'input', value: 'default', onBlur: vi.fn() },
-    label: 'Title',
+    inputLabel: 'Title',
     placeholder: 'Title',
-    inputLabel: true,
   });
   const input = <Input {...getProps()} />;
   it('renders <Input /> component', () => {

src/components/UI/Form/Input/Input.tsx

@@ -2,9 +2,9 @@ import {
   FormControl,
   OutlinedInput,
   FormHelperText,
-  InputLabel,
   InputAdornment,
   IconButton,
+  Typography,
 } from '@mui/material';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
@@ -31,14 +31,15 @@ export interface InputProps {
   inputProp?: any;
   translation?: string;
   onChange?: any;
-  inputLabel?: boolean;
+  inputLabel?: string | null;
   darkMode?: boolean;
+  inputLabelSubtext?: any;
 }
 
 export const Input = ({
   textArea = false,
   disabled = false,
-  inputLabel = false,
+  inputLabel = null,
   ...props
 }: InputProps) => {
   const {
@@ -57,6 +58,7 @@ export const Input = ({
     translation,
     onChange,
     darkMode,
+    inputLabelSubtext,
   } = props;
 
   let fieldType = type;
@@ -114,9 +116,10 @@ export const Input = ({
       <div className={styles.Input} data-testid="input">
         <FormControl fullWidth error={showError}>
           {inputLabel && (
-            <InputLabel variant="standard" className={styles.Label} data-testid="inputLabel">
-              {placeholder}
-            </InputLabel>
+            <Typography variant="caption" className={styles.Label} data-testid="inputLabel">
+              {inputLabel}
+              {inputLabelSubtext}
+            </Typography>
           )}
           <OutlinedInput
             placeholder={placeholder}
@@ -130,7 +133,7 @@ export const Input = ({
             multiline={textArea}
             rows={rows}
             className={styles.OutlineInput}
-            label={inputLabel ? placeholder : ''}
+            label={placeholder}
             fullWidth
             {...field}
             onChange={(e) => {
@@ -142,6 +145,7 @@ export const Input = ({
               }
             }}
             endAdornment={endAdornment || fieldEndAdorment}
+            notched={false}
           />
           {form && form.errors[field.name] && form.touched[field.name] ? (
             <FormHelperText className={styles.DangerText}>{form.errors[field.name]}</FormHelperText>

src/components/UI/Form/PhoneInput/PhoneInput.module.css

@@ -1,5 +1,5 @@
 .PhoneNumber {
-  width: 334px !important;
+  width: 100% !important;
   padding-top: 13px !important;
   padding-bottom: 13px !important;
   padding-left: 48px !important;
@@ -10,14 +10,31 @@
   border-color: #93a29b !important;
 }
 
+.Input {
+  width: 100%;
+}
+
 .PhoneNumber:focus {
   border-color: #119656 !important;
   box-shadow: none !important;
 }
 
 .FormHelperText {
-  color: #f44336 !important;
+  color: #999999;
   margin-top: 3px !important;
   line-height: 1.2 !important;
   margin-left: 16px !important;
 }
+
+.ErrorText {
+  composes: FormHelperText;
+  color: #f44336 !important;
+}
+
+.Label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #111;
+  line-height: 22px;
+  margin: 6px 0;
+}

src/components/UI/Form/PhoneInput/PhoneInput.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormHelperText } from '@mui/material';
+import { FormControl, FormHelperText, Typography } from '@mui/material';
 import 'react-phone-input-2/lib/bootstrap.css';
 import { getIn } from 'formik';
 import ReactPhoneInput from 'react-phone-input-2';
@@ -16,6 +16,8 @@ export interface InputProps {
   field: any;
   placeholder: string;
   form: { touched: any; errors: any; setFieldValue: any };
+  inputLabel?: string | null;
+  disabled?: boolean;
 }
 
 export const PhoneInput = ({
@@ -28,15 +30,24 @@ export const PhoneInput = ({
     autoFocus: false,
   },
   placeholder,
+  inputLabel = null,
+  disabled = false,
+  helperText,
 }: InputProps) => {
   const errorText = getIn(errors, field.name);
   const touchedVal = getIn(touched, field.name);
   const hasError = touchedVal && errorText !== undefined;
 
   return (
     <div className={styles.Input} data-testid="phoneInput">
-      <FormControl>
+      <FormControl className={styles.Input}>
+        {inputLabel && (
+          <Typography variant="caption" className={styles.Label} data-testid="inputLabel">
+            {inputLabel}
+          </Typography>
+        )}
         <ReactPhoneInput
+          disabled={disabled}
           containerClass={styles.Container}
           inputClass={styles.PhoneNumber}
           data-testid="phoneNumber"
@@ -51,8 +62,11 @@ export const PhoneInput = ({
             setFieldValue(field.name, event);
           }}
         />
+        {helperText && (
+          <FormHelperText classes={{ root: styles.FormHelperText }}>{helperText}</FormHelperText>
+        )}
         {hasError ? (
-          <FormHelperText classes={{ root: styles.FormHelperText }}>{errorText}</FormHelperText>
+          <FormHelperText classes={{ root: styles.ErrorText }}>{errorText}</FormHelperText>
         ) : null}
       </FormControl>
     </div>

src/config/index.ts

@@ -50,6 +50,9 @@ export const ANALYTICS_URL = `${GLIFIC_BACKEND_URL}/stats`;
 export const CORS_PROXY_URL = 'https://cors-anywhere.tides.coloredcow.com';
 export const FLOWS_HELP_LINK = 'https://app.rapidpro.io/video/';
 export const STRIPE_PUBLISH_KEY = envVariables.VITE_STRIPE_PUBLISH_KEY;
+export const ONBOARD_URL_SETUP = `${GLIFIC_API_URL}/v1/onboard/setup`;
+export const ONBOARD_URL_UPDATE = `${GLIFIC_API_URL}/v1/onboard/update-registration-details`;
+export const ONBOARD_URL_REACT_OUT = `${GLIFIC_API_URL}/v1/onboard/reachout`;
 export const ONBOARD_URL = `${GLIFIC_API_URL}/v1/onboard/setup`;
 export const RECAPTCHA_CLIENT_KEY = envVariables.VITE_RECAPTCHA_CLIENT_KEY;
 export const UPLOAD_CONTACTS_SAMPLE = 'https://storage.googleapis.com/cc-tides/sample_import.csv';

src/containers/Organization/Onboarding/Form.module.css

@@ -0,0 +1,104 @@
+.Container {
+  width: 100vw;
+  height: 100vh;
+  background-color: #e9f4ee;
+  display: flex;
+  padding: 48px 56px;
+  position: relative;
+}
+
+.LeftContainer {
+  width: 25%;
+  height: 100%;
+  padding: 0 2rem 0 1rem;
+}
+
+.Content {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+}
+
+.Stepper p {
+  margin: 0 !important;
+}
+
+.GlificLogo {
+  width: 64px;
+  margin-bottom: 1rem;
+}
+
+.BackButton {
+  margin-bottom: 2rem;
+}
+
+.Step {
+  font-size: 1rem;
+  color: #878787;
+}
+
+.Active {
+  color: #073f24;
+  font-weight: bold;
+}
+
+.LeftFooter {
+  font-size: 14px;
+  color: #000;
+  padding-top: 1rem;
+  border-top: solid 1px #e0e0e0;
+}
+
+.ReachOut {
+  color: #119656;
+  text-decoration: underline;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.RightContainer {
+  width: 75%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 20px;
+  box-shadow: #959da533 0px 8px 24px;
+  z-index: 999;
+}
+
+.Hide {
+  display: none;
+}
+
+.FullWidth {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.SmallReachOutToUs {
+  display: none;
+}
+
+@media only screen and (max-width: 768px) {
+  .Container {
+    flex-direction: column;
+    height: 100%;
+    padding: 1rem 3rem;
+  }
+
+  .LeftContainer {
+    display: none;
+  }
+
+  .RightContainer {
+    width: 100%;
+  }
+
+  .SmallReachOutToUs {
+    display: flex;
+    justify-content: center;
+    column-gap: 10px;
+  }
+}