Registration design changes #1517

travjenkins · 2025-03-18T20:34:20Z

Issues

#1512

Changes

1512

Update language on registration page
Update the "where did you hear..." choices
Update choices to be chips
Remove the other input
Update cta language
Add a cancel button
Add logo to entire process
Add a progress bar to each step showing how many there are

Tests

Manually tested

scenarios you manually tested

Automated tests

unit testing covered

Playwright tests ran locally

Screenshots

Login Page

Register Page

SSO Page

legal stuff

Initial State

Client Error State

Loading State

Outdated state (this ONLY happens on the first load - otherwise we view this as an in progress directive and display this page like normal)

tenant

Initial state

Client Error State

Loading State

Server Error State

Server AND Client Error State

Selected Option State

Moving main cta and updating content

Adding a `back` button to log user out during register Sharing the getting started header

Starting to wire that back up

adding back in images as reference

Switching to the original customer quote image

Better event tracking Not showing progress if the directive is `outdated` Updating typing

sorting props

Updating typing to make it more strict

travjenkins · 2025-03-20T14:14:37Z

src/directives/BetaOnboard.tsx

+
+                        // Handle tracking right away
+                        fireGtmEvent('RegisterFailed', {
+                            tenantAlreadyTaken,
+                            tenant: requestedTenant,
+                        });


New event for gtm

travjenkins · 2025-03-20T14:15:10Z

src/directives/BetaOnboard.tsx

-    const nameAlreadyUsed = useMemo(
-        () => serverError?.includes(nameTaken),
-        [serverError]
-    );


Since we now pass this boolean to gtm I decided to just use state and figure it out inside the callback up above.

travjenkins · 2025-03-20T14:15:44Z

src/directives/BetaOnboard.tsx

+                    status={status}
+                />
+
+                <HeaderMessage isRegister />


The designs had the logo always stay so now just sharing that logo and message component

travjenkins · 2025-03-20T14:16:23Z

src/directives/BetaOnboard.tsx

+                {nameMissing ? (
+                    <Box>
+                        <AlertBox
+                            short
+                            severity="error"
+                            title={<FormattedMessage id="error.title" />}
+                        >
+                            <Typography>
+                                {intl.formatMessage({
+                                    id: 'tenant.errorMessage.empty',
+                                })}
+                            </Typography>
+                        </AlertBox>
+                    </Box>
+                ) : null}


I flipped the order of the errors around. It was kinda weird to have the error that is 100% directly related to the input further away. So moved server error to the top.

travjenkins · 2025-03-20T14:18:26Z

src/directives/Onboard/CustomerQuote.tsx

        return null;
    } else {
        return (
+            // TODO (customer quote) should switch this to HTML to load faster


Worked on converting the image into HTML and did not want to lose that work. It looks alright doing it with HTML. However, we'd need to add a new font/typography/something for the quote as having it render with the same fonts as other stuff was kind of weird.

travjenkins · 2025-03-20T14:18:42Z

src/directives/Onboard/CustomerQuote.tsx

@@ -30,7 +70,7 @@ function CustomerQuote({ hideQuote }: Props) {
                            : customerQuoteDark
                    }
                    width="85%"
-                    alt={intl.formatMessage({ id: 'company' })}
+                    alt={intl.formatMessage({ id: 'tenant.customer.quote' })}


This should not have had the alt of Estuary so just typed up the quote.

Previously, the image was solely the Estuary logo so the alternative text, I would argue, was appropriate.

What do you mean? This file looks to have always been pointing to the customer quote.

travjenkins · 2025-03-20T14:19:08Z

src/directives/Onboard/Survey/index.tsx

+    const originOptions: string[] = useConstant(() => [
+        intl.formatMessage({ id: 'tenant.origin.radio.browserSearch.label' }),
+        intl.formatMessage({ id: 'tenant.origin.radio.socialMedia.label' }),
+        intl.formatMessage({ id: 'tenant.origin.radio.paidAdvertising.label' }),
+        intl.formatMessage({ id: 'tenant.origin.radio.content.label' }),
+        intl.formatMessage({ id: 'tenant.origin.radio.referral.label' }),
+        intl.formatMessage({ id: 'tenant.origin.radio.webinar.label' }),
+        surveyOptionOther,
+    ]);


Kept as many messageIds as possible but switched some to the new values.

cleaning up images

travjenkins · 2025-03-20T17:52:54Z

src/app/guards/OnboardGuard.tsx

+                <Grid
+                    container
+                    sx={{
+                        p: 2,
+                    }}
+                >


Eventually we're going to have a grid on all the login pages so using it here to make sure it works.

travjenkins · 2025-03-20T17:53:45Z

src/context/Theme.tsx

+export const hiddenButAccessibleRadio: SxProps<Theme> = {
+    '& .MuiRadio-root, & .MuiRadio-root input': {
+        position: 'fixed',
+        opacity: 0,
+        pointerEvents: 'none',
+    },
+};


This is kinda here because of spreading sx related props into one another is a pain. But it also keeps us from having to repeat the same selectors over and over.

travjenkins · 2025-03-20T18:01:17Z

src/pages/login/Wrapper.tsx

+                <HeaderMessage
+                    headerMessageId={headerMessageId}
+                    isRegister={isRegister}
+                />


The HeaderMessage component is based off this.

travjenkins · 2025-03-20T18:02:15Z

src/lang/en-US/Authentication.ts

    'tenant.message.1': `The organization name will be used as a prefix for everything you create within Estuary. It will only be public if you share data with other organizations.`,

    'tenant.expectations': `You can use ${CommonMessages['catalogName.limitations']}`,
    'tenant.expectations.error': `Sorry, only letters(a-z), numbers(0-9), periods(.), underscores(_), and hyphens(-) allowed.`,

    'tenant.input.label': `Organization Name`,
    'tenant.input.placeholder': `acmeCo`,
-    'tenant.errorMessage.empty': `You must provide a name before continuing.`,
+    'tenant.errorMessage.empty': `You must provide an organization name before continuing.`,


Missed updating this back when we changed from Name to Organization Name

kiahna-tucker

Should the AcceptGrant component be updated in a similar fashion (i.e., displaying the company logo at the top of the card, showing a progress indicator)?

src/directives/BetaOnboard.tsx

kiahna-tucker · 2025-03-21T13:07:08Z

src/directives/BetaOnboard.tsx

The headers of the two sections are different sizes. Could you unify them?

Screenshot please

Organization Name and Where did you hear about Estuary? are two different sizes, 20pt and 16pt respectively.

This is on purpose

kiahna-tucker · 2025-03-21T13:12:50Z

src/directives/Onboard/CustomerQuote.tsx

@@ -30,7 +70,7 @@ function CustomerQuote({ hideQuote }: Props) {
                            : customerQuoteDark
                    }
                    width="85%"
-                    alt={intl.formatMessage({ id: 'company' })}
+                    alt={intl.formatMessage({ id: 'tenant.customer.quote' })}


Previously, the image was solely the Estuary logo so the alternative text, I would argue, was appropriate.

src/directives/ClickToAccept.tsx

…usion

Marking todos

kiahna-tucker

Approved with moderate testing.

travjenkins added 12 commits March 18, 2025 13:31

Adding the registration progress

62c29f1

Adding the chip style selection for where did you hear about us

7e00063

Moving main cta and updating content

Starting to work on getting the forms rendering properly

a1548dd

Adding a `back` button to log user out during register Sharing the getting started header

Cleaning up smallLogo as the head will always use a small logo now

19b8889

Using the proper LR react version

02a2589

Starting to wire that back up

Working on converting the customer quote to HTML

56de471

adding back in images as reference

Fixing invalid alt text

525155b

Switching to the original customer quote image

updating the origin selections

563d99f

Merge branch 'main' into travjenkins/feature/registration-redesign

c5bacc9

Some better styling for the modals to have more padding

6e9f26c

Better event tracking Not showing progress if the directive is `outdated` Updating typing

not needed and not doing anything

aae2b61

sorting props

Moving content into lang file

bea93b7

Updating typing to make it more strict

travjenkins commented Mar 20, 2025

View reviewed changes

travjenkins added 5 commits March 20, 2025 12:17

breaking stuff up

06c8cf4

cleaning up images

new files

8406324

Getting the radio buttons to be accessible

743bbec

marking todo

660e3de

marking todo

ce978f4

travjenkins commented Mar 20, 2025

View reviewed changes

travjenkins requested a review from kiahna-tucker March 20, 2025 18:00

travjenkins commented Mar 20, 2025

View reviewed changes

Changing from option to optionLabel to reduce chance of confusion

6cdf3fc

travjenkins marked this pull request as ready for review March 20, 2025 18:19

travjenkins requested a review from a team as a code owner March 20, 2025 18:19

Merge branch 'main' into travjenkins/feature/registration-redesign

dc4be5f

kiahna-tucker reviewed Mar 21, 2025

View reviewed changes

travjenkins added 3 commits March 21, 2025 09:28

PR: naming and updating const to look more const like to prevent conf…

4dddea9

…usion

PR: Adding progress on accept grant

e03b679

Marking todos

PR: making actions a component

b3ac43e

travjenkins added the change:planned This is a planned change label Mar 21, 2025

travjenkins requested a review from kiahna-tucker March 21, 2025 15:49

kiahna-tucker approved these changes Mar 21, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Registration design changes #1517

Registration design changes #1517

travjenkins commented Mar 18, 2025 •

edited

Loading

travjenkins Mar 20, 2025

travjenkins Mar 20, 2025

travjenkins Mar 20, 2025

travjenkins Mar 20, 2025

travjenkins Mar 20, 2025

travjenkins Mar 20, 2025

kiahna-tucker Mar 21, 2025

travjenkins Mar 21, 2025

travjenkins Mar 20, 2025

travjenkins Mar 20, 2025

travjenkins Mar 20, 2025

travjenkins Mar 20, 2025

travjenkins Mar 20, 2025

kiahna-tucker left a comment

kiahna-tucker Mar 21, 2025

travjenkins Mar 21, 2025

kiahna-tucker Mar 21, 2025

travjenkins Mar 21, 2025

kiahna-tucker Mar 21, 2025

kiahna-tucker left a comment

Registration design changes #1517

Are you sure you want to change the base?

Registration design changes #1517

Conversation

travjenkins commented Mar 18, 2025 • edited Loading

Issues

Changes

1512

Tests

Manually tested

Automated tests

Playwright tests ran locally

Screenshots

Login Page

Register Page

SSO Page

legal stuff

tenant

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

kiahna-tucker left a 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

kiahna-tucker left a comment

Choose a reason for hiding this comment

travjenkins commented Mar 18, 2025 •

edited

Loading