Merge pull request #1325 from digma-ai/feature/email-confirmation-screen

Add email confirmation step

Author: kshmidt-digma

public/assets/images/mailWithCheckmark_dark.svg

@@ -16,15 +16,20 @@ export const EmailConfirmation = () => {
   const themeKind = getThemeKind(theme);
   const [emailConfirmationResult, setEmailConfirmationResult] =
     useState<EmailConfirmationResult>();
+  const params = getUrlQueryParams(window.location.search);
+  const userId = params.userId;
+  const token = params.token;
 
   useEffect(() => {
-    const params = getUrlQueryParams(window.location.search);
+    if (!userId || !token) {
+      return;
+    }
 
     axios
       .get("/api/Authentication/confirm-email", {
         params: {
-          userId: params.userId,
-          token: params.token
+          userId,
+          token
         }
       })
       .then(() => {
@@ -39,7 +44,7 @@ export const EmailConfirmation = () => {
           result: "failure"
         });
       });
-  }, []);
+  }, [token, userId]);
 
   useEffect(() => {
     if (emailConfirmationResult) {
@@ -49,9 +54,18 @@ export const EmailConfirmation = () => {
     }
   }, [emailConfirmationResult]);
 
-  return (
-    <GenericPageLayout title={"Digma email confirmation"}>
-      {emailConfirmationResult?.result === "success" && (
+  const renderContent = () => {
+    if (!userId || !token) {
+      return (
+        <s.TextContainer>
+          <Title>Invalid link</Title>
+          <Subtitle>Link is partial or invalid</Subtitle>
+        </s.TextContainer>
+      );
+    }
+
+    if (emailConfirmationResult?.result === "success") {
+      return (
         <s.Container>
           <s.Illustration
             src={`/assets/images/greenCheckmarkWithFlares_${themeKind}.svg`}
@@ -61,10 +75,17 @@ export const EmailConfirmation = () => {
             <Subtitle>You may now log in with your user and password</Subtitle>
           </s.TextContainer>
         </s.Container>
-      )}
-      {emailConfirmationResult?.result === "failure" && (
-        <Title>Failed to confirm email</Title>
-      )}
+      );
+    }
+
+    if (emailConfirmationResult?.result === "failure") {
+      return <Title>Failed to confirm email</Title>;
+    }
+  };
+
+  return (
+    <GenericPageLayout title={"Digma email confirmation"}>
+      {renderContent()}
     </GenericPageLayout>
   );
 };

public/assets/images/mailWithCheckmark_light.svg

@@ -11,11 +11,11 @@ export const Illustration = styled.img`
   top: -60px;
   position: absolute;
   width: 1100px;
-  height: 220px;
+  height: 265px;
 `;
 
 export const TextContainer = styled.div`
-  padding-top: 116px;
+  padding-top: 160px;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/EmailConfirmation/index.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AccountActivation } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof AccountActivation> = {
+  title: "Main/Authentication/AccountActivation",
+  component: AccountActivation,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {};

src/components/EmailConfirmation/styles.ts

@@ -0,0 +1,53 @@
+import { useTheme } from "styled-components";
+import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
+import { getThemeKind } from "../../../common/App/styles";
+import * as s from "./styles";
+import type { AccountActivationProps } from "./types";
+
+export const AccountActivation = ({
+  onClose,
+  emailToConfirm,
+  onConfirmationEmailResend
+}: AccountActivationProps) => {
+  const theme = useTheme();
+  const themeKind = getThemeKind(theme);
+
+  const handleResendButtonClick = () => {
+    if (!emailToConfirm) {
+      return;
+    }
+
+    sendUserActionTrackingEvent("resend button clicked");
+    onConfirmationEmailResend(emailToConfirm);
+  };
+
+  const handleLinkClick = () => {
+    sendUserActionTrackingEvent("I activated my account link clicked");
+    onClose();
+  };
+
+  return (
+    <s.Container>
+      <s.Illustration
+        src={`/assets/images/mailWithCheckmark_${themeKind}.svg`}
+      />
+      <s.TextContainer>
+        <s.Title>Check your mail</s.Title>
+        <span>
+          Click the link in the email to confirm your address. If you
+          haven&apos;t received the email, click &quot;Resend.&quot;
+        </span>
+      </s.TextContainer>
+      {emailToConfirm && (
+        <s.ResendButton
+          buttonType={"secondary"}
+          label={"Resend"}
+          onClick={handleResendButtonClick}
+        />
+      )}
+      <s.IActivatedMyAccountLink onClick={handleLinkClick}>
+        I activated my account
+      </s.IActivatedMyAccountLink>
+    </s.Container>
+  );
+};

src/components/Main/Authentication/AccountActivation/AccountActivation.stories.tsx

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import {
+  subheading1BoldTypography,
+  subscriptRegularTypography
+} from "../../../common/App/typographies";
+import { Link } from "../../../common/v3/Link";
+import { NewButton } from "../../../common/v3/NewButton";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 64px;
+  gap: 24px;
+`;
+
+export const Illustration = styled.img`
+  height: 220px;
+`;
+
+export const TextContainer = styled.div`
+  ${subscriptRegularTypography}
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+  max-width: 324px;
+`;
+
+export const Title = styled.span`
+  ${subheading1BoldTypography}
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;
+
+export const ResendButton = styled(NewButton)`
+  max-width: 250px;
+`;
+
+export const IActivatedMyAccountLink = styled(Link)`
+  margin-top: 14px;
+`;

src/components/Main/Authentication/AccountActivation/index.tsx

@@ -0,0 +1,5 @@
+export interface AccountActivationProps {
+  emailToConfirm?: string;
+  onConfirmationEmailResend: (email: string) => void;
+  onClose: () => void;
+}

src/components/Main/Authentication/AccountActivation/styles.ts

@@ -0,0 +1,28 @@
+import {
+  DIGMA_PRIVACY_POLICY_URL,
+  DIGMA_TERMS_OF_USE_URL
+} from "../../../../constants";
+import { openURLInDefaultBrowser } from "../../../../utils/actions/openURLInDefaultBrowser";
+import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
+import * as s from "./styles";
+
+export const Agreement = () => {
+  const handleTermsOfUseLinkClick = () => {
+    sendUserActionTrackingEvent("terms of use link clicked");
+    openURLInDefaultBrowser(DIGMA_TERMS_OF_USE_URL);
+  };
+
+  const handlePrivacyPolicyLinkClick = () => {
+    sendUserActionTrackingEvent("privacy policy link clicked");
+    openURLInDefaultBrowser(DIGMA_PRIVACY_POLICY_URL);
+  };
+  return (
+    <s.Container>
+      <span>By signing up, you agree with</span>
+      <span>
+        <s.Link onClick={handleTermsOfUseLinkClick}>Terms of Use</s.Link> and{" "}
+        <s.Link onClick={handlePrivacyPolicyLinkClick}>Privacy Policy</s.Link>
+      </span>
+    </s.Container>
+  );
+};

src/components/Main/Authentication/AccountActivation/types.ts

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import { subscriptRegularTypography } from "../../../common/App/typographies";
+import { Link as CommonLink } from "../../../common/v3/Link";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
+  ${subscriptRegularTypography}
+`;
+
+export const Link = styled(CommonLink)`
+  ${subscriptRegularTypography}
+  text-decoration: underline;
+  display: inline;
+`;