feat: add discard changes modal to profile edit

2024-08-26 12:39:13 +02:00
parent 23f7be912e
commit d46a7ecbf7
12 changed files with 268 additions and 168 deletions
--- a/components/Profile/DeleteCreditCardConfirmation/deleteCreditCardConfirmation.module.css
+++ b/components/Profile/DeleteCreditCardConfirmation/deleteCreditCardConfirmation.module.css
@@ -1,13 +1,23 @@
+@keyframes modal-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: var(--visual-viewport-height);
+  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
-  align-items: center;
+  height: var(--visual-viewport-height);
  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
  z-index: 100;

  &[data-entering] {
@@ -19,52 +29,37 @@
  }
 }

-.modal section {
-  background: var(--Main-Grey-White);
+.modal {
+  background-color: var(--Base-Surface-Primary-light-Normal);
  border-radius: var(--Corner-radius-Medium);
-  padding: var(--Spacing-x4);
-  padding-bottom: var(--Spacing-x6);
-}
-
-.container {
+  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x3);
-  font-family: var(--typography-Body-Regular-fontFamily);
+  max-width: 560px;
+  padding: var(--Spacing-x5) var(--Spacing-x4);
 }

-.title {
-  font-family: var(--typography-Subtitle-1-fontFamily);
-  text-align: center;
-  margin: 0;
-  padding-bottom: var(--Spacing-x1);
-}
-
-.bodyText {
-  text-align: center;
-  max-width: 425px;
-  margin: 0;
-  padding: 0;
-}
-
-.buttonContainer {
+.header {
  display: flex;
-  justify-content: space-between;
+  flex-direction: column;
  gap: var(--Spacing-x2);
-  flex-wrap: wrap;
 }

-.buttonContainer button {
-  flex-grow: 1;
-  justify-content: center;
+.footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--Spacing-x1);
 }

-@keyframes modal-fade {
-  from {
-    opacity: 0;
-  }
+@media screen and (min-width: 768px) {
+  .footer {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--Spacing-x2);

-  to {
-    opacity: 1;
+    & > button {
+      flex: 1;
+    }
  }
 }
--- a/components/Dialog/index.tsx
+++ b/components/Dialog/index.tsx
@@ -0,0 +1,87 @@
+"use client"
+import {
+  Dialog as AriaDialog,
+  DialogTrigger,
+  Modal,
+  ModalOverlay,
+} from "react-aria-components"
+
+import LoadingSpinner from "@/components/LoadingSpinner"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./dialog.module.css"
+
+import type { DialogProps } from "@/types/components/dialog"
+
+export default function Dialog({
+  bodyText,
+  cancelButtonText,
+  proceedHref,
+  proceedIsPending = false,
+  proceedOnClick = () => {},
+  proceedText,
+  titleText,
+  triggerButtonText,
+}: DialogProps) {
+  return (
+    <DialogTrigger>
+      <Button intent="secondary" size="small" theme="base">
+        {triggerButtonText}
+      </Button>
+      <ModalOverlay className={styles.overlay} isDismissable>
+        <Modal>
+          <AriaDialog role="alertdialog">
+            {({ close }) => (
+              <section className={styles.modal}>
+                <header className={styles.header}>
+                  <Subtitle textAlign="center">{titleText}</Subtitle>
+                  <Body textAlign="center">{bodyText}</Body>
+                </header>
+                {proceedIsPending ? (
+                  <LoadingSpinner />
+                ) : (
+                  <footer className={styles.footer}>
+                    <Button
+                      intent="secondary"
+                      onPress={close}
+                      size="medium"
+                      theme="base"
+                    >
+                      {cancelButtonText}
+                    </Button>
+                    {proceedHref ? (
+                      <Button
+                        asChild
+                        intent="primary"
+                        size="medium"
+                        theme="base"
+                      >
+                        <Link color="none" href={proceedHref}>
+                          {proceedText}
+                        </Link>
+                      </Button>
+                    ) : (
+                      <Button
+                        intent="primary"
+                        onPress={() => {
+                          proceedOnClick(close)
+                        }}
+                        size="medium"
+                        theme="base"
+                      >
+                        {proceedText}
+                      </Button>
+                    )}
+                  </footer>
+                )}
+              </section>
+            )}
+          </AriaDialog>
+        </Modal>
+      </ModalOverlay>
+    </DialogTrigger>
+  )
+}
--- a/components/Forms/Edit/Profile/index.tsx
+++ b/components/Forms/Edit/Profile/index.tsx
@@ -13,8 +13,8 @@ import { profile } from "@/constants/routes/myPages"
 import { trpc } from "@/lib/trpc/client"

 import { editProfile } from "@/actions/editProfile"
+import Dialog from "@/components/Dialog"
 import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"

@@ -118,11 +118,16 @@ export default function Form({ user }: EditFormProps) {
        </Title>
      </hgroup>
      <div className={styles.btnContainer}>
-        <Button asChild intent="secondary" size="small" theme="base">
-          <Link href={profile[lang]}>
-            {intl.formatMessage({ id: "Discard changes" })}
-          </Link>
-        </Button>
+        <Dialog
+          bodyText={intl.formatMessage({
+            id: "Any changes you've made will be lost.",
+          })}
+          cancelButtonText={intl.formatMessage({ id: "Go back to edit" })}
+          proceedHref={profile[lang]}
+          proceedText={intl.formatMessage({ id: "Yes, discard changes" })}
+          titleText={intl.formatMessage({ id: "Discard unsaved changes?" })}
+          triggerButtonText={intl.formatMessage({ id: "Discard changes" })}
+        />
        <Button
          disabled={!isValid || methods.formState.isSubmitting}
          form={formId}
--- a/components/Profile/DeleteCreditCardConfirmation.tsx
+++ b/components/Profile/DeleteCreditCardConfirmation.tsx
@@ -0,0 +1,58 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { trpc } from "@/lib/trpc/client"
+
+import Dialog from "@/components/Dialog"
+import { Delete } from "@/components/Icons"
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+import type { DeleteCreditCardConfirmationProps } from "@/types/components/myPages/myProfile/creditCards"
+
+export default function DeleteCreditCardConfirmation({
+  card,
+}: DeleteCreditCardConfirmationProps) {
+  const intl = useIntl()
+  const trpcUtils = trpc.useUtils()
+
+  const deleteCard = trpc.user.creditCard.delete.useMutation({
+    onSuccess() {
+      trpcUtils.user.creditCards.invalidate()
+
+      toast.success(
+        intl.formatMessage({ id: "Your card was successfully removed!" })
+      )
+    },
+    onError() {
+      toast.error(
+        intl.formatMessage({
+          id: "Something went wrong and we couldn't remove your card. Please try again later.",
+        })
+      )
+    },
+  })
+
+  function handleProceedDeleteCard(close: () => void) {
+    deleteCard.mutate({ creditCardId: card.id }, { onSettled: close })
+  }
+
+  const lastFourDigits = card.truncatedNumber.slice(-4)
+
+  const bodyText = intl.formatMessage(
+    {
+      id: "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?",
+    },
+    { lastFourDigits }
+  )
+
+  return (
+    <Dialog
+      bodyText={bodyText}
+      cancelButtonText={intl.formatMessage({ id: "No, keep card" })}
+      proceedOnClick={handleProceedDeleteCard}
+      proceedText={intl.formatMessage({ id: "Yes, remove my card" })}
+      titleText={intl.formatMessage({ id: "Remove card from member profile" })}
+      triggerButtonText={<Delete color="burgundy" />}
+    />
+  )
+}
--- a/components/Profile/DeleteCreditCardConfirmation/index.tsx
+++ b/components/Profile/DeleteCreditCardConfirmation/index.tsx
@@ -1,99 +0,0 @@
-"use client"
-
-import {
-  Dialog,
-  DialogTrigger,
-  Heading,
-  Modal,
-  ModalOverlay,
-} from "react-aria-components"
-import { useIntl } from "react-intl"
-
-import { trpc } from "@/lib/trpc/client"
-
-import { Delete } from "@/components/Icons"
-import LoadingSpinner from "@/components/LoadingSpinner"
-import Button from "@/components/TempDesignSystem/Button"
-import { toast } from "@/components/TempDesignSystem/Toasts"
-
-import styles from "./deleteCreditCardConfirmation.module.css"
-
-import type { DeleteCreditCardConfirmationProps } from "@/types/components/myPages/myProfile/creditCards"
-
-export default function DeleteCreditCardConfirmation({
-  card,
-}: DeleteCreditCardConfirmationProps) {
-  const intl = useIntl()
-  const trpcUtils = trpc.useUtils()
-
-  const deleteCard = trpc.user.creditCard.delete.useMutation({
-    onSuccess() {
-      trpcUtils.user.creditCards.invalidate()
-
-      toast.success(
-        intl.formatMessage({ id: "Your card was successfully removed!" })
-      )
-    },
-    onError() {
-      toast.error(
-        intl.formatMessage({
-          id: "Something went wrong and we couldn't remove your card. Please try again later.",
-        })
-      )
-    },
-  })
-
-  const lastFourDigits = card.truncatedNumber.slice(-4)
-
-  return (
-    <div>
-      <DialogTrigger>
-        <Button variant="icon" theme="base" intent="text">
-          <Delete color="burgundy" />
-        </Button>
-        <ModalOverlay className={styles.overlay} isDismissable>
-          <Modal className={styles.modal}>
-            <Dialog role="alertdialog">
-              {({ close }) => (
-                <div className={styles.container}>
-                  <Heading slot="title" className={styles.title}>
-                    {intl.formatMessage({
-                      id: "Remove card from member profile",
-                    })}
-                  </Heading>
-                  <p className={styles.bodyText}>
-                    {`${intl.formatMessage({
-                      id: "Are you sure you want to remove the card ending with",
-                    })} ${lastFourDigits} ${intl.formatMessage({ id: "from your member profile?" })}`}
-                  </p>
-
-                  {deleteCard.isPending ? (
-                    <LoadingSpinner />
-                  ) : (
-                    <div className={styles.buttonContainer}>
-                      <Button intent="secondary" theme="base" onClick={close}>
-                        {intl.formatMessage({ id: "No, keep card" })}
-                      </Button>
-                      <Button
-                        intent="primary"
-                        theme="base"
-                        onClick={() => {
-                          deleteCard.mutate(
-                            { creditCardId: card.id },
-                            { onSettled: close }
-                          )
-                        }}
-                      >
-                        {intl.formatMessage({ id: "Yes, remove my card" })}
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              )}
-            </Dialog>
-          </Modal>
-        </ModalOverlay>
-      </DialogTrigger>
-    </div>
-  )
-}