Wd-16440 Restrict channel users from editing billing information

[minkyngkm]

Done

• Restrict channel users from editing billing information

QA steps

Pro shop & Credential users

1. Log in as Pro user (normal user)
2. Select products from the pro shop (/pro/subscribe)
3. Click the checkout button to land on the checkout page
4. On the check out page

• If new user who hasn't made any purchases before: the Tax section and User Information section inputs will be displayed and allow users to edit the fields.

• If the existing user who has made a purchase before, the Tax section and User Information section are in display mode. but they can still edit their fields by clicking the edit button. When in edit mode, all fields are available for editing.

7. Edit the information or save the information, and check the purchase is working properly.

Distributor users

1. Log in as a channel user (distributor user)
2. Go to /pro/distributor
3. Click the checkout button to land on the checkout page.
4. On the check out page

• New user: it works the same as for Pro Shop users
• For existing users: the Tax section is restricted for editing, and only the card number is editable in the User Information section.

7. Edit the information or save the information, and check the purchase is working properly.

Issue / Card

Fixes #https://warthogs.atlassian.net/browse/WD-16449

[webteam-app]

Demo

Jenkins

demos.haus

[fasih-mehmood]

Just a nit that doesn't need to be addressed 👇

[fasih-mehmood]

It is recommended to await the userEvent interactions and then waitFor should only be used to wait for a single UI change to happen if all of the changes happen simultaneously.

Suggested change

	userEvent.click(screen.getByRole("button", { name: "Edit" }));
	await waitFor(() => {
	expect(screen.getByTestId("select-country")).toBeInTheDocument();
	expect(screen.getByTestId("field-vat-number")).toBeInTheDocument();
	expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
	});
	await userEvent.click(screen.getByRole("button", { name: "Edit" }));
	await waitFor(() => {
	expect(screen.getByTestId("select-country")).toBeInTheDocument();
	});
	expect(screen.getByTestId("field-vat-number")).toBeInTheDocument();
	expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();

[fasih-mehmood]

Or even better if you simply use await screen.findBy because findBy uses expect wrapped in waitFor under the hood.

Suggested change

	userEvent.click(screen.getByRole("button", { name: "Edit" }));
	await waitFor(() => {
	expect(screen.getByTestId("select-country")).toBeInTheDocument();
	expect(screen.getByTestId("field-vat-number")).toBeInTheDocument();
	expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
	});
	await userEvent.click(screen.getByRole("button", { name: "Edit" }));
	const countryField = await screen.findByTestId("select-country");
	expect(countryField).toBeInTheDocument();
	expect(screen.getByTestId("field-vat-number")).toBeInTheDocument();
	expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();

[fasih-mehmood]

nit:

It is recommended to use userEvent as it is built on top of fireEvent, but it provides several methods that resemble the user interactions more closely. For example, fireEvent.change will simply trigger a single change event on the input. However userEvent.type will trigger keyDown, keyPress, and keyUp events for each character as well. It's much closer to the user's actual interactions.

[minkyngkm]

Thanks Fasih, updated!

[fasih-mehmood]

LGTM, thank you Min!