From 67cb53526be6952d3959ac66697d5747081e79da Mon Sep 17 00:00:00 2001 From: veeepi Date: Thu, 13 May 2021 18:41:23 -0700 Subject: [PATCH 01/17] update Calendly link; fix OhersType selection;#202 --- src/components/AppBar.js | 4 +- .../TrademarkType/DetailSelectCard.js | 6 +- .../TrademarkType/index.js | 88 +++++++++++-------- src/utils/FormValidation.js | 6 +- 4 files changed, 58 insertions(+), 46 deletions(-) diff --git a/src/components/AppBar.js b/src/components/AppBar.js index 1b36a94..e3b2d7f 100644 --- a/src/components/AppBar.js +++ b/src/components/AppBar.js @@ -292,10 +292,10 @@ export default function MenuAppBar({ className={classes.menuItem} target="blank" component="a" - href="https://calendly.com/golbey_justin/15mins?month=2021-05" + href="https://calendly.com/golbey_justin/checkmarks" > - Book 15 Minutes Through Calendly + Book Appointment { // when user go back to the page , if type is already in the OtherTypes // check box will be checked useEffect(() => { - const infoOfOtherType = info.OtherTypes; + const infoOfOtherType = info.otherTypes; infoOfOtherType.forEach((userOtherType) => { if (userOtherType === otherType) { @@ -24,7 +24,7 @@ const DetailSelectCard = ({ otherType, info, setInfo, index }) => { //handle when checkbox is clicked const selectOtherType = () => { - const infoOfOtherType = info.OtherTypes; + const infoOfOtherType = info.otherTypes; if (isSelected) { // check if type already exist , remove from the OtherTypes array @@ -41,7 +41,7 @@ const DetailSelectCard = ({ otherType, info, setInfo, index }) => { setInfo({ ...info, - OtherTypes: infoOfOtherType, + otherTypes: infoOfOtherType, }); setIsSelected((prev) => !prev); }; diff --git a/src/components/TrademarkApplicationPage/TrademarkType/index.js b/src/components/TrademarkApplicationPage/TrademarkType/index.js index 1e2a290..c738d3e 100644 --- a/src/components/TrademarkApplicationPage/TrademarkType/index.js +++ b/src/components/TrademarkApplicationPage/TrademarkType/index.js @@ -100,11 +100,10 @@ const TrademarkForm = ({ setInfo({ ...info, isOther: !info.isOther, - OtherTypes: [], + otherTypes: [], }) } /> - {info.isOther && (

Select all that apply

@@ -115,44 +114,48 @@ const TrademarkForm = ({

)} - {/*
*/} {/* map other Types Selection */} {info.isOther && ( - - - {otherTypesSelection.map((otherType, index) => ( - - ))} - - + + {otherTypesSelection.map((otherType, index) => ( + + ))} + + )} + {info.otherTypes.length > 0 && ( + // + + + Book Appointment + + } + > + Looks like you're applying for a Trademark with a less common characteristic. This is perfectly fine, however discussion with a lawyer is required before submission. - - - + + + // )} - {/*
*/} - {/* {info.otherType && ( - - - )} */} ({ marginBottom: '3%', fontSize: 17, }, + alertContainer: { + backgroundColor: checkmarksTheme.transparentCard, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }, alert: { backgroundColor: checkmarksTheme.transparentCard, - color: checkmarksTheme.textActive, + display: 'flex', + flexDirection: 'column', + color: checkmarksTheme.textPrimaryDark, margin: '2% 0 5% 0', - fontSize: '12px', + fontSize: '16px', [theme.breakpoints.up('sm')]: { margin: '0', }, }, bookApppintmentButton: { + flex: 1, color: '#FFF', backgroundColor: '#df3a48', fontWeight: 'bold', - marginTop: '10%', + margin: 'auto', // marginLeft: '3%', width: '100%', - height: '60px', + height: '40px', fontSize: '10px', borderRadius: '10px', [theme.breakpoints.up('md')]: { - margin: '5% 3% 5% 0', + // margin: '5% 3% 5% 0', }, [theme.breakpoints.between('sm', 'md')]: { - margin: '6% 2% 1% 0', + // margin: '6% 2% 1% 0', }, }, })); diff --git a/src/utils/FormValidation.js b/src/utils/FormValidation.js index 6012423..1f37da6 100644 --- a/src/utils/FormValidation.js +++ b/src/utils/FormValidation.js @@ -184,10 +184,10 @@ export const validateForm = (info, setValidationProgress) => { } // Trademark Types Completed if ( - (info.isText || info.isLogo || info.isOther) && + !info.isOther && + (info.isText || info.isLogo) && (info.isText ? info.characterText : true) && - (info.isLogo ? info.fileName : true) && - (info.isOther ? info.OtherTypes.length > 0 : true) + (info.isLogo ? info.fileName : true) ) { newInputValidationValue.trademarkTypeFormCompleted = 500; } else { From 78603c3ff6273a04ed62164e81543ab44c724181 Mon Sep 17 00:00:00 2001 From: veeepi Date: Thu, 13 May 2021 19:29:56 -0700 Subject: [PATCH 02/17] G&S Term Search, repeat 5 times if no result; #203 --- .../GoodsAndServices.js | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/TrademarkApplicationPage/GoodsAndServices.js b/src/components/TrademarkApplicationPage/GoodsAndServices.js index aff6d80..718aa86 100644 --- a/src/components/TrademarkApplicationPage/GoodsAndServices.js +++ b/src/components/TrademarkApplicationPage/GoodsAndServices.js @@ -63,22 +63,28 @@ export default function GoodsAndServices({ // GET TERMS AFTER TEXT INPUT (with Delay) const [termSearchResults, setTermSearchResults] = useState([]); const { current: searchInstance } = useRef({}); + const [numberOfRepeatSearches, setNumberOfRepeatSearches] = useState(0); useEffect(() => { setTermTableData([]); if (searchInstance.delayTimer) { clearTimeout(searchInstance.delayTimer); } - if (searchTerm.length > 2) { - if (searchTerm !== '') { - searchInstance.delayTimer = setTimeout(() => { - (async () => { - const result = await searchTerms(searchTerm); + if (searchTerm !== '' && numberOfRepeatSearches < 5) { + searchInstance.delayTimer = setTimeout(() => { + (async () => { + const result = await searchTerms(searchTerm); + if (result.terms.length > 0) { setTermSearchResults(result.terms); - })(); - }, 750); - } + setNumberOfRepeatSearches(0); + } else { + setNumberOfRepeatSearches(numberOfRepeatSearches + 1); + } + })(); + }, 1000); + } else if (searchTerm === '') { + setNumberOfRepeatSearches(0); } - }, [searchTerm]); + }, [searchTerm, numberOfRepeatSearches]); // RESULTS FROM PREVIOUS GET, POPULATED TO TERM TABLE ARRAY, which is Rendered Rendered const [termTableData, setTermTableData] = useState([]); // DATA Rendering on Table (Displayed) From 068f26fbf96f896846f3a6b35a927ae41251683b Mon Sep 17 00:00:00 2001 From: veeepi Date: Thu, 13 May 2021 19:32:16 -0700 Subject: [PATCH 03/17] TM Search, repeat 3 times if no result (was2);#203 --- src/components/LandingPage/TrademarkSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LandingPage/TrademarkSearch.js b/src/components/LandingPage/TrademarkSearch.js index 223ddb4..4cbf555 100644 --- a/src/components/LandingPage/TrademarkSearch.js +++ b/src/components/LandingPage/TrademarkSearch.js @@ -50,7 +50,7 @@ export default function TrademarkSearch({ searching, setSearching }) { if ( searchTerm !== '' && searchResults?.length === 0 && - numberOfRepeatSearches < 2 + numberOfRepeatSearches < 3 ) { setLoading(true); instance.delayTimer = setTimeout(() => { From adaed6c67dd2b53ee0190e91bf8851aebe5c7749 Mon Sep 17 00:00:00 2001 From: veeepi Date: Thu, 13 May 2021 19:33:21 -0700 Subject: [PATCH 04/17] fix progress bar styling (width); #106 --- src/components/TrademarkApplicationPage/Progress.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/components/TrademarkApplicationPage/Progress.js b/src/components/TrademarkApplicationPage/Progress.js index f0eeefd..0440871 100644 --- a/src/components/TrademarkApplicationPage/Progress.js +++ b/src/components/TrademarkApplicationPage/Progress.js @@ -9,22 +9,17 @@ const progressStyles = makeStyles((theme) => ({ display: 'flex', flexDirection: 'row', justifyContent: 'center', - // padding: '12px', height: '34px', width: '100%', }, container: { backgroundColor: checkmarksTheme.bgDrawer, - // borderRadius: '25px', - border: `1px solid ${checkmarksTheme.textLabel}`, height: '32px', position: 'relative', opacity: 0.85, - width: '100%', }, progress: { backgroundColor: checkmarksTheme.buttonPrimary, - // borderRadius: '25px 0 0 25px', height: '100%', }, value: { @@ -51,8 +46,6 @@ export default function Progress({ progressValue, drawerOpen }) { className={classes.root} style={{ justifyContent: drawerOpen ? 'flex-end' : 'center', - // padding: drawerOpen ? '0' : '12px', - // width: drawerOpen ? '35%' : '100%', transition: 'width 0.25s ease-in 0.3s ease-out', }} position="fixed" @@ -61,18 +54,14 @@ export default function Progress({ progressValue, drawerOpen }) { 96 ? '25px' : '25px 0 0 25px', transition: 'width 1s ease-in-out', width: `${progressPercentage}%`, }} From d6ed61a92f71cbdf33694e726189dd7743dfca0f Mon Sep 17 00:00:00 2001 From: veeepi Date: Thu, 13 May 2021 19:33:42 -0700 Subject: [PATCH 05/17] fix image change on darkMode (TM Appl); #106 --- src/layouts/TrademarkApplication.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/TrademarkApplication.js b/src/layouts/TrademarkApplication.js index ec67b21..5ccd38d 100644 --- a/src/layouts/TrademarkApplication.js +++ b/src/layouts/TrademarkApplication.js @@ -174,7 +174,7 @@ const TrademarkApplication = ({ darkMode, drawerOpen }) => { className={classes.root} style={{ backgroundImage: `url(${ - darkMode.darkMode ? bannerImageDark : bannerImage + darkMode ? bannerImageDark : bannerImage })`, backgroundSize: 'auto 2900px', }} From 753f1a8f0de8fa55c9d433472b92c2b93ce3cf13 Mon Sep 17 00:00:00 2001 From: veeepi Date: Thu, 13 May 2021 19:42:06 -0700 Subject: [PATCH 06/17] sort classesSelected by class id; #204 --- src/components/TrademarkApplicationPage/GoodsAndServices.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/TrademarkApplicationPage/GoodsAndServices.js b/src/components/TrademarkApplicationPage/GoodsAndServices.js index 718aa86..abf69ee 100644 --- a/src/components/TrademarkApplicationPage/GoodsAndServices.js +++ b/src/components/TrademarkApplicationPage/GoodsAndServices.js @@ -136,6 +136,7 @@ export default function GoodsAndServices({ (item) => item.id !== term.id ); setTermTableData([]); + newSelectedTerms.sort((a, b) => a.id - b.id); setSelectedTerms(newSelectedTerms); }; // const handleRemoveTerm = (term) => { // customized function when removing from Selected Terms section; above is called at checkmark remove @@ -256,6 +257,7 @@ export default function GoodsAndServices({ } termClassExists = false; }); + classesSelected.sort((a, b) => a.id - b.id); setSelectedClasses(classesSelected); if (classesSelected.length > 0) { setTotalAmount( From f2018d94c2b5fd69b8808f28576e64cd0a0ec7e5 Mon Sep 17 00:00:00 2001 From: veeepi Date: Thu, 13 May 2021 20:22:36 -0700 Subject: [PATCH 07/17] increase Checkmark size; #106 --- src/components/Checkmark.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Checkmark.js b/src/components/Checkmark.js index 7085ac2..d103f6d 100644 --- a/src/components/Checkmark.js +++ b/src/components/Checkmark.js @@ -1,6 +1,7 @@ import React from 'react'; import { Box } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; +import { checkmarksTheme } from '../styles/Themes'; import CheckCircleOutlinedIcon from '@material-ui/icons/CheckCircleOutlined'; import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline'; import PriorityHighIcon from '@material-ui/icons/PriorityHigh'; @@ -23,14 +24,14 @@ export default function Checkmark({ value }) { const useStyles = makeStyles((theme) => ({ container: { - // backgroundColor: 'blue', + backgroundColor: checkmarksTheme.bgPrimary, alignItems: 'center', borderRadius: '50px', display: 'flex', justifyContent: 'center', - height: '30px', - marginLeft: '12px', - width: '30px', + height: '40px', + margin: '0 12px', + width: '40px', }, checkmarkBad: { color: 'red', From f74d83471138dcb44f27f050f8e00e04addbf682 Mon Sep 17 00:00:00 2001 From: veeepi Date: Thu, 13 May 2021 20:23:17 -0700 Subject: [PATCH 08/17] Appicant step styling; #106 --- .../ApplicationInfo/ApplicationForm.js | 71 +++++++++++++------ src/styles/Themes.js | 5 ++ 2 files changed, 53 insertions(+), 23 deletions(-) diff --git a/src/components/TrademarkApplicationPage/ApplicationInfo/ApplicationForm.js b/src/components/TrademarkApplicationPage/ApplicationInfo/ApplicationForm.js index abf4f2f..f3a64d9 100644 --- a/src/components/TrademarkApplicationPage/ApplicationInfo/ApplicationForm.js +++ b/src/components/TrademarkApplicationPage/ApplicationInfo/ApplicationForm.js @@ -12,6 +12,7 @@ import { Select, TextField, Radio, + Typography, } from '@material-ui/core'; import Alert from '@material-ui/lab/Alert'; import { checkmarksTheme } from '../../../styles/Themes'; @@ -76,6 +77,11 @@ export default function IndividualForm({ label="Organization" /> + {info.individualOrOrganization === 'Individual' && ( + + )} {/* ///////////////////////personal info///////////////////////*/} {info.individualOrOrganization == 'Organization' && ( @@ -170,20 +176,20 @@ export default function IndividualForm({
- {/* /// Phone /// */} - + {/* /// Fax /// */} + setInfo({ ...info, - phone: e.target.value, + fax: e.target.value, }) } multiline @@ -191,23 +197,22 @@ export default function IndividualForm({ className: classes.multilineColor, }} /> - - {/* /// Fax /// */} - + {/* /// Phone /// */} + setInfo({ ...info, - fax: e.target.value, + phone: e.target.value, }) } multiline @@ -215,11 +220,14 @@ export default function IndividualForm({ className: classes.multilineColor, }} /> +
- Please upload your photo ID, file should be less than 2Mb. + {'Please upload your photo ID.'} + {'File should be less than 2Mb.'} + {/* {'Please upload your photo ID. \nFile should be less than 2Mb.'} */} {/* ============================ */} @@ -380,10 +388,6 @@ export default function IndividualForm({ - - Helper section with brief legal information, assisting the - client through the process. - Using Checkmarks does not guarantee that your Trademark will @@ -464,7 +468,7 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', flexDirection: 'column', alignItems: 'center', - justifyContent: 'center', + justifyContent: 'space-between', [theme.breakpoints.up('sm')]: { flexDirection: 'row', width: '100%', @@ -472,13 +476,30 @@ const useStyles = makeStyles((theme) => ({ }, selectionContainer: { display: 'flex', - justifyContent: 'center', + justifyContent: 'space-between', }, field: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', + margin: '10px 0', + }, + fieldPhone: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + margin: '10px 0', + width: '58%', + }, + fieldFax: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + margin: '10px 0', + width: '38%', }, fieldDropDown: { display: 'flex', @@ -557,9 +578,10 @@ const useStyles = makeStyles((theme) => ({ }, }, alert: { - color: '#2a9df4', - margin: '5% auto 5% auto', - fontSize: '12px', + backgroundColor: checkmarksTheme.transparentCard, + color: checkmarksTheme.textPrimaryDark, + margin: '2% auto 2% auto', + fontSize: '16px', [theme.breakpoints.between('sm', 'md')]: { margin: '5% auto 2% auto', }, @@ -568,9 +590,10 @@ const useStyles = makeStyles((theme) => ({ }, }, idAlert: { - color: '#2a9df4', + backgroundColor: checkmarksTheme.transparentCard, + color: checkmarksTheme.textPrimaryDark, margin: '3% auto 5% auto', - fontSize: '12px', + fontSize: '16px', [theme.breakpoints.between('sm', 'md')]: { margin: '5% auto 3% auto', }, @@ -584,7 +607,9 @@ const useStyles = makeStyles((theme) => ({ alignItems: 'center', }, alertRed: { + backgroundColor: checkmarksTheme.transparentCard, color: checkmarksTheme.buttonTextSecondary, + fontSize: '16px', }, terms: { color: checkmarksTheme.textValue1, diff --git a/src/styles/Themes.js b/src/styles/Themes.js index 749a8ae..bcabb8e 100644 --- a/src/styles/Themes.js +++ b/src/styles/Themes.js @@ -20,6 +20,8 @@ const colors = { appBarDarkOpq70: '#171518B3', white: '#FFFFFF', + whiteOpq30: '#FFFFFF4D', + blackOpq30: '#0000004D', whiteOpq90: '#FFFFFFE6', whiteOpq0: '#FFFFFF00', whiteOpq: '#FFFFFF40', @@ -49,6 +51,9 @@ export const checkmarksTheme = { bgOpaque90Dark: colors.blackOpq90, bgOpaque70: colors.whiteOpq70, bgOpaque70Dark: colors.blackOpq70, + bgOpaque30: colors.whiteOpq30, + bgOpaque30Dark: colors.blackOpq30, + bgAppBar: colors.appBar, bgAppBarDark: colors.appBarDark, bgAppBarOpq70: colors.appBarOpq70, From 2508361438a77c8d88aa7b06253437962308fb48 Mon Sep 17 00:00:00 2001 From: veeepi Date: Thu, 13 May 2021 20:24:20 -0700 Subject: [PATCH 09/17] overlay btwn image and form (lighten/darken); #106 --- src/layouts/TrademarkApplication.js | 235 +++++++++++++++------------- 1 file changed, 124 insertions(+), 111 deletions(-) diff --git a/src/layouts/TrademarkApplication.js b/src/layouts/TrademarkApplication.js index 5ccd38d..325f763 100644 --- a/src/layouts/TrademarkApplication.js +++ b/src/layouts/TrademarkApplication.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { Box, Paper, Typography } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; +import { checkmarksTheme } from '../styles/Themes'; import bannerImage from '../assets/images/bg-application-yann-allegre.jpg'; // import bannerImageDark from '../assets/images/bg-dark-application-ricardo-gomez-angel.jpg'; import bannerImageDark from '../assets/images/bg-dark-application2-asoggetti.jpg'; @@ -173,122 +174,134 @@ const TrademarkApplication = ({ darkMode, drawerOpen }) => { -
- - - {/* {console.log( + +
+ + + {/* {console.log( document.getElementById('parentContainer').offsetHeight )} */} - {step.id} - - {(() => { - switch (step.id) { - case 'Trademark': - return ( - - ); - case 'Goods-and-Services': - return ( - - ); - case 'International': - return ( - - ); - case 'Applicant': - return ( - - ); - case 'Confirmation': - return ( - - ); - case 'Payment': - return ( - - ); - case 'Success': - return ( - - ); - } - })()} -
- {Prompt} -
+ + {step.id} + + + {(() => { + switch (step.id) { + case 'Trademark': + return ( + + ); + case 'Goods-and-Services': + return ( + + ); + case 'International': + return ( + + ); + case 'Applicant': + return ( + + ); + case 'Confirmation': + return ( + + ); + case 'Payment': + return ( + + ); + case 'Success': + return ( + + ); + } + })()} +
+ {Prompt} +