New gurb validation pages #105

JoanaFigueira · 2024-10-21T14:39:21Z

Description

Validation pages for non-members

Changes

Add feature flag for gurb
Add all validation pages for non-members following a new design
Add address validation via API

Checklist

Justify any unchecked point:

Changed code is covered by tests.
Relevant changes are explained in the "Unreleased" section of the CHANGES.md file.
That section includes "Upgrade notes" with any config, dependency or deploy tweek needed on development and server setups.
Changes on the setup process (development, testing, production) have been updated in the proper documentation

Observations

Address validation will be addressed in a different PR

Please, review

the design is correct
CUPS validation works
When you start webforms-ui Gurb's related data is updated accordingly.
The address is properly filled

How to check the new features

npm start
make sure you have the backend running (webforms api)

Deploy notes

For now, the feature flag isGurbEnabled should be set to false until the gurb form is ready for deploy

vercel · 2024-10-21T14:39:27Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
webforms-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 10:50am

dukenuken09 · 2024-10-23T07:57:22Z

index.html

+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
+


Hi, the font's files (googleapis, gstatic) are imported 3 times, and I don't know it's necessary

Nope, not anymore. At the first, there were 3 different fonts, but now there is only one, and we completely forgot to remove the unused ones. Thanks!!

dukenuken09 · 2024-10-23T08:09:12Z

src/context/GurbLoadingContext.jsx

+  )
+}
+
+export default GurbLoadingContext


I think Gurb management is simple enough to put everything in one context file. (it's just my opinion, this way works fine for me too)

dukenuken09 · 2024-10-23T08:17:47Z

src/services/apiGurb.js

@@ -0,0 +1,48 @@
+import axios from 'axios'
+
+const WEBFORMS_API_URL = document.getElementById('root')?.dataset?.webformsApiUrl


Great!! To have an api file for each section is the best way to work!

dukenuken09 · 2024-10-23T08:22:32Z

src/containers/Gurb/components/TextRecomendation.jsx

+    </Box>
+  )
+}
+export default TextRecomendation


The structure looks fine to me, but I think there are some components that could be reused from the generic components that are there now. For example the Next and Previous buttons.

The new buttons (Next and Previous) are a bit different from what we have now... color, behavior, even icons. This is why we put it separately. In addition, these buttons might change in a near future, and we didn't want to spend time adapting everything before having the final version.

dukenuken09 · 2024-10-23T09:32:35Z

src/containers/Gurb/SupplyPoint.jsx

+        setGurbData({
+          name: data?.name,
+          state: data?.state,
+          completedPercentage: data?.assigned_betas_percentage


If data is empty or field doesn't exists in original model it can produce an unexpected error. See our other comment in ProgressWarning component.

We think that we should deal with the empty data and other errors at higher level, for instance, if there is no data a pop up will appear and show you the error (let's see what our UXer has to say on how to show the errors). Regarding the unexpected error: the idea of using data?.name_of_field is exactly that, it will return an undefined and will not through an error.

dukenuken09 · 2024-10-23T09:33:23Z

src/containers/Gurb/components/ProgressWarning.jsx

+          height={100}
+          value={completed}
+          text={`${completed}%`}
+          cornerRadius="50%"


If completed is undefined, text will show "undefined%"

see previous comment on SuppyPoint.jsx

* Add landing page components * Add translations * Add gurb theme * Add missing dependencies * Add missing fonts Co-authored-by: Marta <[email protected]>

Co-authored-by: Joana Figueira <[email protected]>

Co-authored-by: Marta <[email protected]>

- Use components - add translations -

- Add container to adjust pages - Generate options inside chooser depending on option props - Add off option in icons - Add checkbox in chooser when selected Co-authored-by: Marta <[email protected]>

Co-authored-by: Marta <[email protected]>

* added a generic component called ResultRequirement * added an specific component called SuccessRequirement * refactor of FailureRequirement using ResultRequirement

Co-authored-by: Joana Figueira <[email protected]>

Co-authored-by: Marta <[email protected]>

* update fontFamily Co-authored-by: Marta <[email protected]>

Co-authored-by: Joana Figueira <[email protected]>

* text errors * cups validations * input field translates the given errors

* added GurbLoadingContextProvider import in App

* ask backend 2km validation * ask google api address coordinates * use of location input component Co-authored-by: Joana Figueira <[email protected]>

- Adapt component to gurb's design - Remove component from contract form

dukenuken09 · 2024-11-20T14:19:44Z

src/components/SomenergiaTheme.js

@@ -82,7 +82,7 @@ export default function SomEnergiaTheme() {
      }
    },
    shape: {
-      borderRadius: '0'


Shape has border radius by default? otherwise is it necessary?

The borderRadius field was defined as a string, which is not correct, and this was giving errors. Because we are not using SomenergiaTheme we decided only to take care of the error and leave the logic as it is.

dukenuken09 · 2024-11-20T14:29:35Z

src/containers/Gurb.jsx

+        />
+      )
+    } else {
+      return <></>


Why there is else condition if you check max and minimum when clicks the button (next, prev)

Because this part is a working in progress... we were concerned only with the validation part of the form. This else will change in a near future, when we continue with the development of the next steps.

dukenuken09 · 2024-11-20T14:40:18Z

src/containers/Gurb/SupplyPoint.jsx

+  return (
+    <>
+      <Header title={`${t('GURB_SUPPLY_POINT_TITLE')} ${gurbData.name}`} />
+      &nbsp;


Maybe is better use css styles instead &nbsp (is it responsive?), for example using flex-css.

dukenuken09 · 2024-11-20T14:42:03Z

src/containers/Gurb.jsx

+            <>
+              {getStep(formikProps)}
+              {error ? (
+                <></>


Is not showing the error a design thing?

nope.. it's a work in progress thing 😄

dukenuken09 · 2024-11-20T14:57:54Z

src/containers/Gurb/components/FailureRequirement.jsx

@@ -0,0 +1,41 @@
+import { useContext } from 'react'


Have you considered to use only one component for FailureRequirements and AlertRequirements only changing the specific properties? (styles)

yes... but I thought this way it makes the code more readable... and I'm still not sure what will come ahead in the form design... I'll add a TO DO, to check in the future if this makes sense or not (and if not make only one component)

dukenuken09 · 2024-11-20T15:15:40Z

src/containers/Gurb/components/SuccessRequirement.jsx

@@ -0,0 +1,21 @@
+import ResultRequirement from './ResultRequirement'


🤨 this component is not used? YET

Not yet.. hehehhe!! we'll use it soon!

dukenuken09 · 2024-11-20T15:18:46Z

src/containers/Gurb/pages/Requirements/Address.jsx

+        title={t('GURB_ADDRESS_TITLE')}
+        text={t('GURB_ADDRESS_TITLE_HELPER')}
+      />
+      &nbsp;


Have you considered to use flex-css?

dukenuken09 · 2024-11-21T09:05:33Z

src/containers/Gurb/pages/Requirements/LightQuestion.jsx

+  const { setError, setErrorInfo } = useContext(GurbErrorContext)
+
+  const handleLightQuestion = (value) => {
+    setFieldValue('has_light', value)


[QUESTION] Why a selection is used instead of a message inform to the user that only can continue if has light?

It's a design decision. The user has to choose between the 2 options

dukenuken09 · 2024-11-21T09:07:39Z

src/containers/Gurb/pages/Requirements/SelfConsumption.jsx

+      })
+    }
+  }
+  const options = [


The same question, we comment in LightQuestion

It's a design decision. The user has to choose between the 2 options

dukenuken09 · 2024-11-21T09:12:23Z

src/containers/Gurb/requirementsValidations.js

+import * as Yup from 'yup'
+
+export const lightValidations = Yup.object().shape({
+  has_light: Yup.string()


It make sense to validate light-on/light-off and selfconsumption-on/selfconsumption-off, when the expected requirement values are light-on and selfconsumption-off?

Here we are validating that the user has to choose one of the allowed options (if has light or if has no light). If the user doesn't choose one of the options, it can not go any further and the next button stays un-clickable.

JoanaFigueira added the enhancement New feature or request label Oct 21, 2024

JoanaFigueira requested review from MariteSomEnergia and dukenuken09 October 21, 2024 14:39

JoanaFigueira assigned JoanaFigueira and marta197 Oct 21, 2024

dukenuken09 reviewed Oct 23, 2024

View reviewed changes

JoanaFigueira had a problem deploying to cypress October 23, 2024 09:03 — with GitHub Actions Failure

vercel bot deployed to Preview October 23, 2024 09:04 View deployment

dukenuken09 reviewed Oct 24, 2024

View reviewed changes

JoanaFigueira force-pushed the NEW_gurb_validation_pages branch from 0e5db94 to 3b4097b Compare October 24, 2024 11:33

JoanaFigueira had a problem deploying to cypress October 24, 2024 11:33 — with GitHub Actions Failure

vercel bot deployed to Preview October 24, 2024 11:33 View deployment

JoanaFigueira had a problem deploying to cypress October 24, 2024 11:35 — with GitHub Actions Failure

vercel bot deployed to Preview October 24, 2024 11:35 View deployment

marta197 had a problem deploying to cypress October 31, 2024 14:12 — with GitHub Actions Failure

vercel bot deployed to Preview October 31, 2024 14:13 View deployment

vercel bot deployed to Preview November 13, 2024 09:28 View deployment

JoanaFigueira force-pushed the NEW_gurb_validation_pages branch from 0762022 to af13fa4 Compare November 13, 2024 09:31

JoanaFigueira had a problem deploying to cypress November 13, 2024 09:31 — with GitHub Actions Failure

vercel bot deployed to Preview November 13, 2024 09:32 View deployment

JoanaFigueira and others added 9 commits November 13, 2024 16:19

✨ 🚧 Gurb's landing page

0f736a9

* Add landing page components * Add translations * Add gurb theme * Add missing dependencies * Add missing fonts Co-authored-by: Marta <[email protected]>

✨ added SomStepper and Requirements screens for GURB

4342d67

Co-authored-by: Joana Figueira <[email protected]>

🚧 chooser for grurg

5e41f6f

Co-authored-by: Joana Figueira <[email protected]>

✨ add icon to helperText in InputField

36a9b11

Co-authored-by: Marta <[email protected]>

✨ Use Input and Chooser components to selfconsumption and address pages

d0700bb

- Use components - add translations -

✨ Select chooser options

1edf77b

- Add container to adjust pages - Generate options inside chooser depending on option props - Add off option in icons - Add checkbox in chooser when selected Co-authored-by: Marta <[email protected]>

🚧 Component FailureRequirement and requirement pages

4380b99

Co-authored-by: Marta <[email protected]>

✨ added SuccessRequirement and ResultRequirement

74cc40b

* added a generic component called ResultRequirement * added an specific component called SuccessRequirement * refactor of FailureRequirement using ResultRequirement

🐛 borderRadius in theme must be an int

6079f28

Co-authored-by: Joana Figueira <[email protected]>

marta197 and others added 14 commits November 13, 2024 16:19

🚧 gurb form errors when user does not fulfill the requirements

d826375

✨ set gurb errors in context

beff49a

Co-authored-by: Marta <[email protected]>

✨ Add gurb error context

47bfe81

* update fontFamily Co-authored-by: Marta <[email protected]>

🧹 gurg -> gurb

54bde60

Co-authored-by: Joana Figueira <[email protected]>

✨ added error when has selfconsumption in gurb

4e76d6a

Co-authored-by: Joana Figueira <[email protected]>

🚧 ask gurb data to api

6a5f00a

Co-authored-by: Joana Figueira <[email protected]>

✨ validations for supply point page in gurb

98978e0

Co-authored-by: Joana Figueira <[email protected]>

✨ feature flag for gurb form

fbe99d6

🏜️ some improvements in grub form

efa5cee

* text errors * cups validations * input field translates the given errors

🐛 ups! added a missing import

aab7b43

* added GurbLoadingContextProvider import in App

🐛 remove unused fonts

2076cee

🐛 remove commented code

11d4353

🚧 check gurb's 2km limit

d75d8d7

* ask backend 2km validation * ask google api address coordinates * use of location input component Co-authored-by: Joana Figueira <[email protected]>

♻ Move AddressAutocompleteField as Gurb's component

7b79a6c

- Adapt component to gurb's design - Remove component from contract form

JoanaFigueira force-pushed the NEW_gurb_validation_pages branch from af13fa4 to 7b79a6c Compare November 14, 2024 08:34

JoanaFigueira had a problem deploying to cypress November 14, 2024 08:34 — with GitHub Actions Failure

vercel bot deployed to Preview November 14, 2024 08:34 View deployment

JoanaFigueira requested a review from dukenuken09 November 14, 2024 08:36

🧹 remove unused address yuo validations

1d3c9b0

JoanaFigueira had a problem deploying to cypress November 14, 2024 08:39 — with GitHub Actions Failure

vercel bot deployed to Preview November 14, 2024 08:40 View deployment

JoanaFigueira added 2 commits November 18, 2024 10:05

♻ Add alert as an option to requeriments errors

c56a0af

🌐 Add missing translations

7f01506

JoanaFigueira had a problem deploying to cypress November 18, 2024 09:22 — with GitHub Actions Failure

vercel bot deployed to Preview November 18, 2024 09:23 View deployment

dukenuken09 reviewed Nov 21, 2024

View reviewed changes

🐛 replace &nbsp by margins

7dd1424

JoanaFigueira had a problem deploying to cypress November 21, 2024 10:50 — with GitHub Actions Failure

vercel bot deployed to Preview November 21, 2024 10:50 View deployment

JoanaFigueira merged commit cce9c04 into master Nov 21, 2024
5 of 6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New gurb validation pages #105

New gurb validation pages #105

JoanaFigueira commented Oct 21, 2024 •

edited

Loading

vercel bot commented Oct 21, 2024 •

edited

Loading

dukenuken09 Oct 23, 2024

JoanaFigueira Oct 23, 2024

dukenuken09 Oct 23, 2024

dukenuken09 Oct 23, 2024

dukenuken09 Oct 23, 2024

JoanaFigueira Oct 23, 2024

dukenuken09 Oct 23, 2024

JoanaFigueira Oct 24, 2024

dukenuken09 Oct 23, 2024

JoanaFigueira Oct 24, 2024

dukenuken09 Nov 20, 2024

JoanaFigueira Nov 21, 2024

dukenuken09 Nov 20, 2024

JoanaFigueira Nov 21, 2024

dukenuken09 Nov 20, 2024

dukenuken09 Nov 20, 2024

JoanaFigueira Nov 21, 2024

dukenuken09 Nov 20, 2024

JoanaFigueira Nov 21, 2024

dukenuken09 Nov 20, 2024

JoanaFigueira Nov 21, 2024

dukenuken09 Nov 20, 2024

dukenuken09 Nov 21, 2024

JoanaFigueira Nov 21, 2024

dukenuken09 Nov 21, 2024

JoanaFigueira Nov 21, 2024

dukenuken09 Nov 21, 2024

JoanaFigueira Nov 21, 2024

		@@ -0,0 +1,48 @@
		import axios from 'axios'

		const WEBFORMS_API_URL = document.getElementById('root')?.dataset?.webformsApiUrl

		@@ -0,0 +1,21 @@
		import ResultRequirement from './ResultRequirement'

New gurb validation pages #105

New gurb validation pages #105

Conversation

JoanaFigueira commented Oct 21, 2024 • edited Loading

Description

Changes

Checklist

Observations

Please, review

How to check the new features

Deploy notes

vercel bot commented Oct 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JoanaFigueira commented Oct 21, 2024 •

edited

Loading

vercel bot commented Oct 21, 2024 •

edited

Loading