@vtex/faststore-plugin-buyer-portal 1.3.45 → 1.3.47

package/src/features/users/components/CreateUserDrawerWithUsername/CreateUserDrawerWithUsername.tsx

@@ -0,0 +1,696 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { Button, IconButton, useUI } from "@faststore/ui";
+
+// TODO: Uncomment when 2FA settings are ready
+// import { useGetOrgUnitSettings } from "../../../org-units/hooks";
+import {
+  type BasicDrawerProps,
+  BasicDrawer,
+  ErrorMessage,
+  Icon,
+  InputText,
+} from "../../../shared/components";
+import { useAnalytics, useBuyerPortal } from "../../../shared/hooks";
+import { ANALYTICS_EVENTS } from "../../../shared/services/logger/analytics/constants";
+import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
+import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
+import {
+  useAddUserToOrgUnit,
+  useResetPassword,
+  useValidateUsername,
+} from "../../hooks";
+
+import type { RoleData } from "../../../roles/types";
+
+type DrawerState =
+  | "CREATE_USER"
+  | "CONFIRM_SHARED_EMAIL"
+  | "ACCESS_TOKEN_DISPLAY";
+
+export type CreateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  onCreate?: () => void;
+  orgUnit: { id: string; name: string };
+  rolesOptions: RoleData[] | null;
+};
+
+const generateUsernameSuggestion = (email: string): string => {
+  if (!email || !email.includes("@")) return "";
+  return email.split("@")[0];
+};
+
+export const CreateUserDrawerWithUsername = ({
+  close,
+  onCreate,
+  orgUnit: { id: orgUnitId },
+  rolesOptions,
+  ...props
+}: CreateUserDrawerProps) => {
+  const { pushToast } = useUI();
+  const router = useRouter();
+  const { featureFlags } = useBuyerPortal();
+  const { trackEntityCreated, trackEntityCreateError } = useAnalytics({
+    entityType: "user",
+    defaultTimerName: "user_creation",
+    shouldTrackDefaultTimer: true,
+  });
+
+  // TODO[2FA]: Uncomment when 2FA settings are ready
+  // const { settings } = useGetOrgUnitSettings(orgUnitId);
+
+  const [drawerState, setDrawerState] = useState<DrawerState>("CREATE_USER");
+  const [accessToken, setAccessToken] = useState<string>("");
+  const [hasTokenBeenCopied, setHasTokenBeenCopied] = useState(false);
+
+  const [sharedEmailData, setSharedEmailData] = useState<{
+    email: string;
+    existingUserName: string;
+  }>({
+    email: "",
+    existingUserName: "",
+  });
+
+  const [form, setForm] = useState<{
+    name: string;
+    userName: string;
+    email: string;
+    phone: string;
+    roles: number[];
+  }>({
+    name: "",
+    userName: "",
+    email: "",
+    phone: "",
+    roles: [],
+  });
+
+  const [userNameSuggestions, setUsernameSuggestions] = useState<string[]>([]);
+  const [showUsernameSuggestions, setShowUsernameSuggestions] = useState(false);
+  const [isUsernameValid, setIsUsernameValid] = useState<boolean | null>(null);
+
+  const [isTouched, setIsTouched] = useState(false);
+  const [isUsernameTouched, setIsUsernameTouched] = useState(false);
+
+  const { name, userName, email, roles, phone } = form;
+
+  const updateField = (
+    field: keyof typeof form,
+    value: string | string[] | number[]
+  ) => {
+    setForm((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+
+    if (field === "userName") {
+      setIsUsernameValid(null);
+    }
+  };
+
+  const handleValidateUsernameSuccess = useCallback(
+    (data: { valid: boolean; userNameSuggestions?: string[] }) => {
+      if (data.valid) {
+        setIsUsernameValid(true);
+        setShowUsernameSuggestions(false);
+      } else {
+        setIsUsernameValid(false);
+        if (data.userNameSuggestions && data.userNameSuggestions.length > 0) {
+          setUsernameSuggestions(data.userNameSuggestions);
+          setShowUsernameSuggestions(true);
+        }
+      }
+    },
+    []
+  );
+
+  const handleValidateUsernameError = useCallback(() => {
+    setIsUsernameValid(false);
+  }, []);
+
+  const { validateUsername, isValidateUsernameLoading } = useValidateUsername({
+    onSuccess: handleValidateUsernameSuccess,
+    onError: handleValidateUsernameError,
+  });
+
+  const handleResetPasswordSuccess = useCallback(
+    (data: { accessCode: string }) => {
+      setAccessToken(data.accessCode);
+      setDrawerState("ACCESS_TOKEN_DISPLAY");
+    },
+    []
+  );
+
+  const handleResetPasswordError = useCallback(() => {
+    pushToast({
+      message:
+        "Failed to generate access code. Please try resetting the password later.",
+      status: "ERROR",
+    });
+    onCreate?.();
+    close();
+  }, [pushToast, onCreate, close]);
+
+  const { resetPassword, isResetPasswordLoading } = useResetPassword({
+    onSuccess: handleResetPasswordSuccess,
+    onError: handleResetPasswordError,
+  });
+
+  useEffect(() => {
+    if (email && email.includes("@") && !userName) {
+      const suggestion = generateUsernameSuggestion(email);
+      if (suggestion) {
+        updateField("userName", suggestion);
+      }
+    }
+  }, [email]);
+
+  const handleUsernameBlur = useCallback(() => {
+    setIsUsernameTouched(true);
+    if (userName?.trim()) {
+      validateUsername({
+        orgUnitId,
+        userName: userName.trim(),
+      });
+    }
+  }, [userName, orgUnitId, validateUsername]);
+
+  const handleRefreshUsernameSuggestions = useCallback(() => {
+    if (userName?.trim()) {
+      validateUsername({
+        orgUnitId,
+        userName: userName.trim(),
+      });
+    }
+  }, [userName, orgUnitId, validateUsername]);
+
+  const handleSelectUsernameSuggestion = (suggestion: string) => {
+    updateField("userName", suggestion);
+    setShowUsernameSuggestions(false);
+    setIsUsernameValid(null);
+    validateUsername({
+      orgUnitId,
+      userName: suggestion,
+    });
+  };
+
+  const handleAddUserSuccess = ({ user }: { user: { id: string } }) => {
+    trackEntityCreated(ANALYTICS_EVENTS.USER_CREATED, "user", {
+      user_name: name,
+      user_userName: userName,
+      user_email: email,
+      user_phone: phone,
+      roles_count: roles.length,
+      role_ids: roles,
+      org_unit_id: orgUnitId,
+    });
+
+    const shouldResetPassword =
+      !email?.trim() || drawerState === "CONFIRM_SHARED_EMAIL";
+
+    if (shouldResetPassword) {
+      resetPassword({
+        orgUnitId,
+        userId: user.id,
+      });
+      return;
+    }
+
+    pushToast({
+      title: "User added successfully",
+      message: `An access code has been sent to [${email}](mailto:${email}) for first-time login.`,
+      status: "INFO",
+      icon: (
+        <button
+          data-fs-bp-toast-view-button
+          type="button"
+          onClick={() => {
+            window.location.href = buyerPortalRoutes.userDetails({
+              userId: user.id,
+              orgUnitId: orgUnitId,
+            });
+          }}
+        >
+          View
+        </button>
+      ),
+    });
+    onCreate?.();
+    close();
+  };
+
+  const { addUserToOrgUnit, isAddUserToOrgUnitLoading } = useAddUserToOrgUnit({
+    enableUsernameCreation: featureFlags?.enableUsernameCreation,
+    onSuccess: handleAddUserSuccess,
+    onError: (err) => {
+      let error: {
+        message: string;
+        orgUnit?: string;
+        code?: string;
+        user?: {
+          id: string;
+          email: string;
+          name: string;
+        };
+        existingUserName?: string;
+      };
+
+      try {
+        error = JSON.parse(err.message);
+      } catch {
+        error = { message: err.message };
+      }
+
+      trackEntityCreateError(ANALYTICS_EVENTS.USER_CREATE_ERROR, err, {
+        org_unit_id: orgUnitId,
+        error_type: error.code || "unknown",
+      });
+
+      if (error.code === "EMAIL_ALREADY_EXISTS") {
+        setSharedEmailData({
+          email: email,
+          existingUserName: error.existingUserName || "another user",
+        });
+        setDrawerState("CONFIRM_SHARED_EMAIL");
+        return;
+      }
+
+      if (error.code === "USERNAME_ALREADY_EXISTS") {
+        setIsUsernameValid(false);
+        handleRefreshUsernameSuggestions();
+        pushToast({
+          message: "Username is already taken. Please choose another one.",
+          status: "ERROR",
+        });
+        return;
+      }
+
+      pushToast({
+        message: error.message || "An error occurred while creating the user",
+        status: "ERROR",
+      });
+    },
+  });
+
+  // TODO[2FA]: Uncomment when 2FA settings are ready
+  // const is2FAEnabled = settings?.["2FA"]?.verificationCode ?? false;
+
+  const isFormValid = () => {
+    if (!userName?.trim()) return false;
+
+    if (roles.length === 0) return false;
+
+    if (isUsernameValid === false) return false;
+
+    // TODO[2FA]: Uncomment when 2FA settings are ready
+    // if (is2FAEnabled && !email?.trim() && !phone?.trim()) return false;
+
+    return true;
+  };
+
+  const handleConfirmClick = () => {
+    setIsTouched(true);
+    setIsUsernameTouched(true);
+
+    if (!isFormValid()) {
+      return;
+    }
+
+    if (isUsernameValid === null && userName?.trim()) {
+      validateUsername({
+        orgUnitId,
+        userName: userName.trim(),
+      });
+      return;
+    }
+
+    addUserToOrgUnit({
+      name,
+      userName: userName,
+      email: email || undefined,
+      phone: phone || undefined,
+      roles,
+      orgUnitId,
+    });
+  };
+
+  const handleConfirmSharedEmail = () => {
+    addUserToOrgUnit({
+      name,
+      userName: userName,
+      email,
+      phone: phone || undefined,
+      roles,
+      orgUnitId,
+    });
+  };
+
+  const handleCopyAccessToken = async () => {
+    try {
+      await navigator.clipboard.writeText(accessToken);
+      setHasTokenBeenCopied(true);
+      pushToast({
+        message: "Access code copied to clipboard",
+        status: "INFO",
+      });
+    } catch {
+      pushToast({
+        message: "Failed to copy access code",
+        status: "ERROR",
+      });
+    }
+  };
+
+  const handleCloseAccessTokenModal = () => {
+    if (!hasTokenBeenCopied) {
+      return;
+    }
+    onCreate?.();
+    close();
+  };
+
+  const isConfirmButtonEnabled =
+    isFormValid() && !isAddUserToOrgUnitLoading && isUsernameValid !== false;
+
+  const backToCreateUser = () => {
+    setDrawerState("CREATE_USER");
+    setIsTouched(false);
+    setIsUsernameTouched(false);
+    setForm({
+      name: "",
+      userName: "",
+      email: "",
+      phone: "",
+      roles: [],
+    });
+    setIsUsernameValid(null);
+    setUsernameSuggestions([]);
+    setShowUsernameSuggestions(false);
+  };
+
+  const hasRolesError = !rolesOptions || rolesOptions.length === 0;
+
+  const handleRetryRoles = () => {
+    router.reload();
+  };
+
+  const getDrawerTitle = () => {
+    switch (drawerState) {
+      case "CONFIRM_SHARED_EMAIL":
+        return (
+          <>
+            <button type="button" onClick={backToCreateUser}>
+              <Icon
+                name="Back"
+                height={20}
+                width={20}
+                data-fs-bp-create-user-drawer-back-icon
+              />
+            </button>
+            Confirm shared email
+          </>
+        );
+      case "ACCESS_TOKEN_DISPLAY":
+        return "";
+      default:
+        return "Add User";
+    }
+  };
+
+  return (
+    <BasicDrawer data-fs-bp-create-user-drawer close={close} {...props}>
+      <BasicDrawer.Heading title={getDrawerTitle()} onClose={close} />
+
+      {drawerState === "CREATE_USER" && (
+        <>
+          <BasicDrawer.Body>
+            {hasRolesError ? (
+              <div data-fs-bp-create-user-error-state>
+                <Icon name="Warning" height={48} width={48} />
+                <h3>Something went wrong</h3>
+                <p>The add user form could not be loaded.</p>
+                <Button variant="secondary" onClick={handleRetryRoles}>
+                  Try again
+                </Button>
+              </div>
+            ) : (
+              <>
+                {/* TODO: Uncomment when 2FA settings are ready
+                {settings?.["2FA"]?.verificationCode && (
+                  <div data-fs-bp-create-user-2fa-disclaimer>
+                    <Icon name="2FAEnabled" height={13} width={16} />
+                    <p>
+                      Two-factor authentication is enabled. All users must have
+                      an email or phone number registered to authenticate.
+                    </p>
+                  </div>
+                )}
+                */}
+
+                <InputText
+                  label="Full Name (optional)"
+                  value={name}
+                  onChange={(event) => updateField("name", event.target.value)}
+                />
+
+                <InputText
+                  // TODO[2FA]: Uncomment when 2FA settings are ready
+                  // label={is2FAEnabled ? "Email" : "Email (optional)"}
+                  // hasError={is2FAEnabled && isTouched && !email?.trim() && !phone?.trim()}
+                  label="Email (optional)"
+                  value={email}
+                  wrapperProps={{ style: { marginTop: 16 } }}
+                  onChange={(event) => updateField("email", event.target.value)}
+                />
+
+                <InputText
+                  // TODO[2FA]: Uncomment when 2FA settings are ready
+                  // label={is2FAEnabled ? "Phone number" : "Phone number (optional)"}
+                  // hasError={is2FAEnabled && isTouched && !email?.trim() && !phone?.trim()}
+                  label="Phone number (optional)"
+                  value={phone}
+                  wrapperProps={{ style: { marginTop: 16 } }}
+                  onChange={(event) =>
+                    // TODO: Update this when implementing i18n
+                    updateField(
+                      "phone",
+                      maskPhoneNumber(event.target.value, "USA")
+                    )
+                  }
+                />
+
+                {/* TODO: Uncomment when 2FA settings are ready
+                <ErrorMessage
+                  show={
+                    is2FAEnabled &&
+                    isTouched &&
+                    !email?.trim() &&
+                    !phone?.trim()
+                  }
+                  message="Email or phone number is required for two-factor authentication"
+                />
+                */}
+
+                <div data-fs-bp-create-user-userName-wrapper>
+                  <div data-fs-bp-create-user-userName-suggestions-wrapper>
+                    <InputText
+                      label="Username"
+                      value={userName}
+                      hasError={
+                        (isUsernameTouched && !userName?.trim()) ||
+                        isUsernameValid === false
+                      }
+                      onChange={(event) =>
+                        updateField("userName", event.target.value)
+                      }
+                      onBlur={handleUsernameBlur}
+                    />
+
+                    {showUsernameSuggestions &&
+                      userNameSuggestions.length > 0 && (
+                        <IconButton
+                          data-fs-bp-create-user-userName-suggestions-icon
+                          icon={<Icon name="Refresh" width={20} height={20} />}
+                          size="small"
+                          aria-label={"refresh userName suggestions"}
+                          onClick={() => {
+                            handleRefreshUsernameSuggestions();
+                          }}
+                        />
+                      )}
+                  </div>
+
+                  {showUsernameSuggestions &&
+                    userNameSuggestions.length > 0 && (
+                      <div data-fs-bp-create-user-userName-suggestions>
+                        <ul>
+                          {userNameSuggestions.map((suggestion) => (
+                            <li key={suggestion}>
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  handleSelectUsernameSuggestion(suggestion)
+                                }
+                              >
+                                {suggestion}
+                              </button>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                </div>
+
+                <ErrorMessage
+                  show={isUsernameTouched && !userName?.trim()}
+                  message="Username is required"
+                />
+
+                <div data-fs-bp-create-user-roles>
+                  <span data-fs-bp-create-user-roles-label>Roles</span>
+
+                  {rolesOptions &&
+                    rolesOptions.map((role) => {
+                      const id = `role-${role.roleName
+                        .toLowerCase()
+                        .replace(" ", "-")}`;
+                      return (
+                        <span
+                          data-fs-bp-create-user-role-wrapper
+                          key={role.roleName}
+                        >
+                          <input
+                            type="checkbox"
+                            key={role.roleName}
+                            value={role.roleName}
+                            id={id}
+                            checked={roles?.includes(role.roleId)}
+                            onChange={(event) => {
+                              const newRoles = event.target.checked
+                                ? [...(roles ?? []), role.roleId]
+                                : roles?.filter((r) => r !== role.roleId) ?? [];
+                              updateField("roles", newRoles);
+                            }}
+                          />
+                          <label htmlFor={id}>{role.roleName}</label>
+                        </span>
+                      );
+                    })}
+
+                  <ErrorMessage
+                    show={isTouched && roles.length === 0}
+                    message="At least one role is required"
+                  />
+                </div>
+              </>
+            )}
+          </BasicDrawer.Body>
+          <BasicDrawer.Footer>
+            <BasicDrawer.Button variant="ghost" onClick={close}>
+              Cancel
+            </BasicDrawer.Button>
+            <BasicDrawer.Button
+              variant="confirm"
+              disabled={!isConfirmButtonEnabled || hasRolesError}
+              onClick={handleConfirmClick}
+              isLoading={
+                isAddUserToOrgUnitLoading ||
+                isValidateUsernameLoading ||
+                isResetPasswordLoading
+              }
+            >
+              Add
+            </BasicDrawer.Button>
+          </BasicDrawer.Footer>
+        </>
+      )}
+
+      {drawerState === "CONFIRM_SHARED_EMAIL" && (
+        <>
+          <BasicDrawer.Body data-fs-bp-create-user-shared-email-body>
+            <div data-fs-bp-create-user-shared-email-warning>
+              <Icon name="Warning" height={48} width={48} />
+              <h3>This email is already registered</h3>
+            </div>
+            <p>
+              The email <strong>{sharedEmailData.email}</strong> is already
+              registered for another user (
+              <strong>{sharedEmailData.existingUserName}</strong>).
+            </p>
+            <p>
+              Are you sure you want to continue? If you proceed, a temporary
+              access code will be generated for the new user.
+            </p>
+          </BasicDrawer.Body>
+          <BasicDrawer.Footer>
+            <BasicDrawer.Button variant="ghost" onClick={backToCreateUser}>
+              Cancel
+            </BasicDrawer.Button>
+            <BasicDrawer.Button
+              variant="confirm"
+              onClick={handleConfirmSharedEmail}
+              isLoading={isAddUserToOrgUnitLoading}
+            >
+              Continue
+            </BasicDrawer.Button>
+          </BasicDrawer.Footer>
+        </>
+      )}
+
+      {drawerState === "ACCESS_TOKEN_DISPLAY" && (
+        <>
+          <BasicDrawer.Body data-fs-bp-create-user-access-token-body>
+            <div data-fs-bp-create-user-access-token-success>
+              <Icon name="CheckSuccess" height={60} width={60} />
+
+              <h3>Password reset successfully</h3>
+            </div>
+
+            <div data-fs-bp-create-user-access-token-description>
+              <p>
+                A temporary access code has been generated. <br />
+                Share it with the user, as they have no individual email
+                registered.
+                <br />
+                <br />
+                The code expires in 12 hours. Copy it before closing this
+                window. Once closed, access will be lost and a password reset
+                will be required.
+              </p>
+            </div>
+
+            <div data-fs-bp-create-user-access-token-display>
+              <div data-fs-bp-create-user-access-token-value>
+                <span>{accessToken}</span>
+
+                <IconButton
+                  icon={
+                    <Icon
+                      name={hasTokenBeenCopied ? "Check" : "Copy"}
+                      height={20}
+                      width={20}
+                    />
+                  }
+                  size="small"
+                  aria-label={hasTokenBeenCopied ? "Copied" : "Copy"}
+                  onClick={handleCopyAccessToken}
+                  data-fs-bp-create-user-copy-button
+                  data-copied={hasTokenBeenCopied}
+                />
+              </div>
+            </div>
+          </BasicDrawer.Body>
+          <BasicDrawer.Footer>
+            <BasicDrawer.Button
+              variant="confirm"
+              onClick={handleCloseAccessTokenModal}
+            >
+              Done
+            </BasicDrawer.Button>
+          </BasicDrawer.Footer>
+        </>
+      )}
+    </BasicDrawer>
+  );
+};