Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 1e4c336

Browse files
justjannejustjanne
authored
New User Onboarding Task List (#9083)
* Improve type of AccessibleButton to accurately represent available props * Update analytics events
1 parent 45f6c32 commit 1e4c336

32 files changed

+1261
-22
lines changed

‎cypress/e2e/user-onboarding/user-onboarding-new.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
/// <reference types="cypress" />
18+
19+
import { MatrixClient } from "../../global";
20+
import { SynapseInstance } from "../../plugins/synapsedocker";
21+
22+
describe("User Onboarding (new user)", () => {
23+
let synapse: SynapseInstance;
24+
25+
const bot1Name = "BotBob";
26+
let bot1: MatrixClient;
27+
28+
beforeEach(() => {
29+
cy.startSynapse("default").then(data => {
30+
synapse = data;
31+
cy.initTestUser(synapse, "Jane Doe");
32+
cy.window({ log: false }).then(win => {
33+
win.localStorage.setItem("mx_registration_time", "1656633601");
34+
});
35+
cy.reload().then(() => {
36+
// wait for the app to load
37+
return cy.get(".mx_MatrixChat", { timeout: 15000 });
38+
});
39+
cy.getBot(synapse, { displayName: bot1Name }).then(_bot1 => {
40+
bot1 = _bot1;
41+
});
42+
cy.get('.mx_UserOnboardingPage').should('exist');
43+
});
44+
});
45+
46+
afterEach(() => {
47+
cy.stopSynapse(synapse);
48+
});
49+
50+
it("page is shown", () => {
51+
cy.get('.mx_UserOnboardingPage').should('exist');
52+
cy.percySnapshot("User onboarding page");
53+
});
54+
55+
it("using find friends action should increase progress", () => {
56+
cy.get(".mx_ProgressBar").invoke("val").then((oldProgress) => {
57+
const findPeopleAction = cy.contains(".mx_UserOnboardingTask_action", "Find friends");
58+
expect(findPeopleAction).to.exist;
59+
findPeopleAction.click();
60+
cy.get(".mx_InviteDialog_editor input").type(bot1.getUserId());
61+
cy.get(".mx_InviteDialog_buttonAndSpinner").click();
62+
cy.get(".mx_InviteDialog_buttonAndSpinner").should("not.exist");
63+
cy.visit("/#/home");
64+
65+
cy.get(".mx_ProgressBar").invoke("val").should("be.greaterThan", oldProgress);
66+
});
67+
});
68+
});

‎cypress/e2e/user-onboarding/user-onboarding-old.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
/// <reference types="cypress" />
18+
19+
import { SynapseInstance } from "../../plugins/synapsedocker";
20+
21+
describe("User Onboarding (old user)", () => {
22+
let synapse: SynapseInstance;
23+
24+
beforeEach(() => {
25+
cy.startSynapse("default").then(data => {
26+
synapse = data;
27+
cy.initTestUser(synapse, "Jane Doe");
28+
cy.window({ log: false }).then(win => {
29+
win.localStorage.setItem("mx_registration_time", "2");
30+
});
31+
cy.reload().then(() => {
32+
// wait for the app to load
33+
return cy.get(".mx_MatrixChat", { timeout: 15000 });
34+
});
35+
});
36+
});
37+
38+
afterEach(() => {
39+
cy.visit("/#/home");
40+
cy.stopSynapse(synapse);
41+
});
42+
43+
it("page is hidden", () => {
44+
cy.get('.mx_UserOnboardingPage').should('not.exist');
45+
});
46+
});

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
},
5858
"dependencies": {
5959
"@babel/runtime": "^7.12.5",
60-
"@matrix-org/analytics-events": "^0.1.2",
60+
"@matrix-org/analytics-events": "^0.2.0",
6161
"@matrix-org/react-sdk-module-api": "^0.0.3",
6262
"@sentry/browser": "^6.11.0",
6363
"@sentry/tracing": "^6.11.0",

‎res/css/_components.pcss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,10 @@
324324
@import "./views/toasts/_IncomingCallToast.pcss";
325325
@import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
326326
@import "./views/typography/_Heading.pcss";
327+
@import "./views/user-onboarding/_UserOnboardingHeader.pcss";
328+
@import "./views/user-onboarding/_UserOnboardingList.pcss";
329+
@import "./views/user-onboarding/_UserOnboardingPage.pcss";
330+
@import "./views/user-onboarding/_UserOnboardingTask.pcss";
327331
@import "./views/verification/_VerificationShowSas.pcss";
328332
@import "./views/voip/CallView/_CallViewButtons.pcss";
329333
@import "./views/voip/_CallPreview.pcss";

‎res/css/_spacing.pcss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,5 @@ $spacing-24: 24px;
2525
$spacing-28: 28px;
2626
$spacing-32: 32px;
2727
$spacing-40: 40px;
28+
$spacing-48: 48px;
29+
$spacing-64: 64px;

‎res/css/views/user-onboarding/_UserOnboardingHeader.pcss‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_UserOnboardingHeader {
18+
display: flex;
19+
flex-direction: row;
20+
padding: $spacing-32;
21+
border-radius: 16px;
22+
background: $system;
23+
gap: $spacing-64;
24+
25+
animation-delay: 1500ms;
26+
animation-duration: 300ms;
27+
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
28+
animation-name: mx_UserOnboardingHeader_slideIn;
29+
animation-fill-mode: backwards;
30+
will-change: opacity, transform;
31+
32+
@media (max-width: 1280px) {
33+
margin: $spacing-32;
34+
}
35+
36+
.mx_UserOnboardingHeader_dot {
37+
color: $accent;
38+
}
39+
40+
.mx_UserOnboardingHeader_content {
41+
display: flex;
42+
flex-direction: column;
43+
flex-basis: 50%;
44+
flex-shrink: 1;
45+
flex-grow: 1;
46+
min-width: 0;
47+
gap: $spacing-24;
48+
margin-right: auto;
49+
50+
p {
51+
margin: 0;
52+
}
53+
54+
.mx_AccessibleButton {
55+
margin-top: auto;
56+
align-self: flex-start;
57+
padding: $spacing-12 $spacing-24;
58+
}
59+
}
60+
61+
.mx_UserOnboardingHeader_image {
62+
flex-basis: 30%;
63+
flex-shrink: 1;
64+
flex-grow: 1;
65+
align-self: center;
66+
height: calc(100% + $spacing-64 + $spacing-64);
67+
aspect-ratio: 4 / 3;
68+
object-fit: contain;
69+
min-width: 0;
70+
min-height: 0;
71+
margin-top: -$spacing-64;
72+
margin-bottom: -$spacing-64;
73+
74+
animation-delay: 1500ms;
75+
animation-duration: 300ms;
76+
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
77+
animation-name: mx_UserOnboardingHeader_slideInLong;
78+
animation-fill-mode: backwards;
79+
will-change: opacity, transform;
80+
}
81+
}
82+
83+
@keyframes mx_UserOnboardingHeader_slideIn {
84+
0% {
85+
transform: translate(0, 8px);
86+
opacity: 0;
87+
}
88+
100% {
89+
transform: translate(0, 0);
90+
opacity: 1;
91+
}
92+
}
93+
94+
@keyframes mx_UserOnboardingHeader_slideInLong {
95+
0% {
96+
transform: translate(0, 32px);
97+
}
98+
100% {
99+
transform: translate(0, 0);
100+
}
101+
}

‎res/css/views/user-onboarding/_UserOnboardingList.pcss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_UserOnboardingList {
18+
display: flex;
19+
flex-direction: column;
20+
margin: 0 $spacing-32;
21+
22+
animation-duration: 300ms;
23+
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
24+
animation-name: mx_UserOnboardingList_slideIn;
25+
animation-fill-mode: backwards;
26+
will-change: opacity;
27+
28+
.mx_UserOnboardingList_header {
29+
display: flex;
30+
flex-direction: row;
31+
gap: 12px;
32+
align-items: center;
33+
34+
.mx_UserOnboardingList_hint {
35+
color: $secondary-content;
36+
}
37+
}
38+
39+
.mx_UserOnboardingList_progress {
40+
display: flex;
41+
flex-direction: column;
42+
counter-reset: user-onboarding;
43+
44+
.mx_ProgressBar {
45+
width: auto;
46+
margin-top: $spacing-16;
47+
height: 16px;
48+
49+
@mixin ProgressBarBorderRadius 16px;
50+
}
51+
52+
.mx_UserOnboardingFeedback {
53+
margin-top: $spacing-16;
54+
}
55+
}
56+
57+
.mx_UserOnboardingList_list {
58+
display: grid;
59+
grid-template-columns: max-content 1fr max-content;
60+
61+
appearance: none;
62+
list-style: none;
63+
margin: $spacing-32 0 0;
64+
padding: 0;
65+
66+
grid-gap: $spacing-24;
67+
}
68+
}
69+
70+
@keyframes mx_UserOnboardingList_slideIn {
71+
0% {
72+
transform: translate(0, 8px);
73+
opacity: 0;
74+
}
75+
100% {
76+
transform: translate(0, 0);
77+
opacity: 1;
78+
}
79+
}

‎res/css/views/user-onboarding/_UserOnboardingPage.pcss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_UserOnboardingPage {
18+
width: 100%;
19+
height: 100%;
20+
21+
align-self: stretch;
22+
max-width: 1200px;
23+
margin: 0 auto auto;
24+
25+
display: flex;
26+
flex-direction: column;
27+
box-sizing: border-box;
28+
29+
gap: $spacing-64;
30+
padding: $spacing-64 100px;
31+
32+
@media (max-width: 1280px) {
33+
padding: $spacing-48 $spacing-32;
34+
}
35+
}

0 commit comments

Comments
 (0)