SCC-4236: Username for My Account 2.0

__test__/pages/account/account.test.tsx

@@ -231,22 +231,6 @@ describe("MyAccount page", () => {
     const result = await getServerSideProps({ req: req, res: mockRes })
     expect(result.props.tabsPath).toBe("overdues")
   })
-  it("can handle no username", () => {
-    render(
-      <MyAccount
-        isAuthenticated={true}
-        accountData={{
-          checkouts: processedCheckouts,
-          holds: processedHolds,
-          patron: { ...processedPatron, username: undefined },
-          fines: processedFines,
-          pickupLocations: filteredPickupLocations,
-        }}
-      />
-    )
-    const username = screen.queryByText("Username")
-    expect(username).toBeNull()
-  })
   it("renders notification banner if user has fines", () => {
     render(
       <MyAccount

pages/api/account/helpers.ts

@@ -1,5 +1,6 @@
 import sierraClient from "../../../src/server/sierraClient"
 import type { HTTPResponse } from "../../../src/types/appTypes"
+import nyplApiClient from "../../../src/server/nyplApiClient"
 
 /**
  * PUT request to Sierra to update patron PIN, first validating with previous PIN.
@@ -27,6 +28,52 @@ export async function updatePin(
   }
 }
 
+/**
+ * PUT request to Sierra to update patron username, first validating that it's available.
+ * Returns status and message about request.
+ */
+export async function updateUsername(
+  patronId: string,
+  newUsername: string
+): Promise<HTTPResponse> {
+  try {
+    // If the new username is an empty string, skips validation and directly updates in Sierra.
+    const client = await sierraClient()
+    if (newUsername === "") {
+      const client = await sierraClient()
+      await client.put(`patrons/${patronId}`, {
+        varFields: [{ fieldTag: "u", content: newUsername }],
+      })
+      return { status: 200, message: "Username removed successfully" }
+    } else {
+      const platformClient = await nyplApiClient({ version: "v0.3" })
+      const response = await platformClient.post("/validations/username", {
+        username: newUsername,
+      })
+
+      if (response?.type === "available-username") {
+        await client.put(`patrons/${patronId}`, {
+          varFields: [{ fieldTag: "u", content: newUsername }],
+        })
+        return { status: 200, message: `Username updated to ${newUsername}` }
+      } else if (response?.type === "unavailable-username") {
+        // Username taken but not an error, returns a message.
+        return { status: 200, message: "Username taken" }
+      } else {
+        throw new Error("Username update failed")
+      }
+    }
+  } catch (error) {
+    return {
+      status: error?.status || 500,
+      message:
+        error?.message ||
+        error.response?.data?.description ||
+        "An error occurred",
+    }
+  }
+}
+
 /**
  * PUT request to Sierra to update patron settings. Returns status and message about request.
  */

pages/api/account/username/[id].ts

@@ -0,0 +1,40 @@
+import type { NextApiResponse, NextApiRequest } from "next"
+import initializePatronTokenAuth from "../../../../src/server/auth"
+import { updateUsername } from "../helpers"
+
+/**
+ * API route handler for /api/account/username/{patronId}
+ */
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  let responseMessage = "Request error"
+  let responseStatus = 400
+  const patronTokenResponse = await initializePatronTokenAuth(req.cookies)
+  const cookiePatronId = patronTokenResponse.decodedPatron?.sub
+  if (!cookiePatronId) {
+    responseStatus = 403
+    responseMessage = "No authenticated patron"
+    return res.status(responseStatus).json(responseMessage)
+  }
+  if (req.method == "GET") {
+    responseMessage = "Please make a PUT request to this endpoint."
+  }
+  if (req.method == "PUT") {
+    /**  We get the patron id from the request: */
+    const patronId = req.query.id as string
+    const { username } = req.body
+    /**  We check that the patron cookie matches the patron id in the request,
+     * i.e.,the logged in user is updating their own username. */
+    if (patronId == cookiePatronId) {
+      const response = await updateUsername(patronId, username)
+      responseStatus = response.status
+      responseMessage = response.message
+    } else {
+      responseStatus = 403
+      responseMessage = "Authenticated patron does not match request"
+    }
+  }
+  res.status(responseStatus).json(responseMessage)
+}

src/components/MyAccount/IconListElement.tsx

@@ -11,7 +11,7 @@ export interface IconListElementPropType {
 
 // This component is designed to centralize common styling patterns for a
 // description type List with icons
-const IconListElement = ({
+export const IconListElement = ({
   icon,
   term,
   description,

src/components/MyAccount/NewSettings/AddButton.tsx

@@ -1,21 +1,21 @@
 import { Button } from "@nypl/design-system-react-components"
 
 type AddButtonProps = {
-  inputType: string
+  inputType?: string
   label: string
   onClick: () => void
 }
 
 const AddButton = ({ inputType, label, onClick }: AddButtonProps) => {
   return (
     <Button
-      id={`add-${inputType}-button`}
+      id={inputType ? `add-${inputType}-button` : "add-button"}
       buttonType="text"
       onClick={onClick}
       size="large"
       sx={{
         justifyContent: "flex-start",
-        width: { base: "87%", md: "300px" },
+        width: { base: "100%", md: "300px" },
         paddingLeft: { base: "m", md: "unset" },
         paddingTop: "xs",
         paddingBottom: "xs",

src/components/MyAccount/NewSettings/NewAccountSettingsTab.tsx

@@ -1,9 +1,10 @@
-import { Flex, Banner, Link, Text } from "@nypl/design-system-react-components"
+import { Flex } from "@nypl/design-system-react-components"
 import { useContext, useEffect, useRef, useState } from "react"
 import { PatronDataContext } from "../../../context/PatronDataContext"
 import SettingsInputForm from "./SettingsInputForm"
 import SettingsSelectForm from "./SettingsSelectForm"
 import PasswordForm from "./PasswordForm"
+import { StatusBanner } from "./StatusBanner"
 
 type StatusType = "" | "failure" | "success"
 
@@ -33,47 +34,11 @@ const NewAccountSettingsTab = () => {
     }
   }, [status])
 
-  const bannerContent = (
-    <div style={{ alignItems: "center" }}>
-      {status === "failure" ? (
-        statusMessage !== "" ? (
-          <Text marginBottom={0} color={"ui.black !important"}>
-            {statusMessage} Please try again or{" "}
-            <Link
-              sx={{
-                color: "ui.link.primary !important",
-                textDecorationColor: "ui.link.primary !important",
-                textDecoration: "underline",
-              }}
-              href="https://www.nypl.org/get-help/contact-us"
-            >
-              contact us
-            </Link>{" "}
-            for assistance.
-          </Text>
-        ) : (
-          <Text marginBottom={0} color={"ui.black !important"}>
-            Your changes were not saved.
-          </Text>
-        )
-      ) : (
-        <Text marginBottom={0} color={"ui.black !important"}>
-          Your changes were saved.
-        </Text>
-      )}
-    </div>
-  )
-
   return (
     <>
       {status !== "" && (
         <div ref={bannerRef} tabIndex={-1}>
-          <Banner
-            sx={{ marginTop: "m" }}
-            isDismissible
-            content={bannerContent}
-            type={status === "failure" ? "negative" : "positive"}
-          />
+          <StatusBanner status={status} statusMessage={statusMessage} />
         </div>
       )}
       <Flex flexDir="column" sx={{ marginTop: "xl", gap: "s" }}>

src/components/MyAccount/NewSettings/StatusBanner.tsx

@@ -0,0 +1,56 @@
+import { Banner, Text, Link } from "@nypl/design-system-react-components"
+
+export type StatusType = "" | "failure" | "usernameFailure" | "success"
+
+type StatusBannerProps = {
+  status: StatusType
+  statusMessage: string
+}
+
+const successContent = (
+  <Text marginBottom={0} color="ui.black !important">
+    Your changes were saved.
+  </Text>
+)
+
+const generalFailureContent = (
+  <Text marginBottom={0} color="ui.black !important">
+    Your changes were not saved.
+  </Text>
+)
+
+const specificFailureContent = (statusMessage: string) => {
+  return (
+    <Text marginBottom={0} color={"ui.black !important"}>
+      {statusMessage} Please try again or{" "}
+      <Link href="https://www.nypl.org/get-help/contact-us">contact us</Link>{" "}
+      for assistance.
+    </Text>
+  )
+}
+
+const statusContent = (status, statusMessage) => {
+  if (status === "success") {
+    return successContent
+  }
+  if (status === "failure" && statusMessage !== "") {
+    return specificFailureContent(statusMessage)
+  } else {
+    return generalFailureContent
+  }
+}
+
+export const StatusBanner = ({ status, statusMessage }: StatusBannerProps) => {
+  return (
+    <Banner
+      sx={{ marginTop: "m" }}
+      isDismissible
+      content={
+        <div style={{ alignItems: "center" }}>
+          {statusContent(status, statusMessage)}
+        </div>
+      }
+      type={status === "failure" ? "negative" : "positive"}
+    />
+  )
+}