From b2de45ab5c49775b82d5668a32edc72838381497 Mon Sep 17 00:00:00 2001 From: Simon Emanuelsson Date: Mon, 26 Aug 2024 12:39:13 +0200 Subject: [PATCH] feat: add discard changes modal to profile edit --- .../dialog.module.css} | 75 +++++++------- components/Dialog/index.tsx | 87 ++++++++++++++++ components/Forms/Edit/Profile/index.tsx | 17 ++-- .../Profile/DeleteCreditCardConfirmation.tsx | 58 +++++++++++ .../DeleteCreditCardConfirmation/index.tsx | 99 ------------------- i18n/dictionaries/da.json | 11 ++- i18n/dictionaries/de.json | 10 +- i18n/dictionaries/en.json | 10 +- i18n/dictionaries/fi.json | 12 ++- i18n/dictionaries/no.json | 12 ++- i18n/dictionaries/sv.json | 10 +- types/components/dialog.ts | 10 ++ 12 files changed, 246 insertions(+), 165 deletions(-) rename components/{Profile/DeleteCreditCardConfirmation/deleteCreditCardConfirmation.module.css => Dialog/dialog.module.css} (52%) create mode 100644 components/Dialog/index.tsx create mode 100644 components/Profile/DeleteCreditCardConfirmation.tsx delete mode 100644 components/Profile/DeleteCreditCardConfirmation/index.tsx create mode 100644 types/components/dialog.ts diff --git a/components/Profile/DeleteCreditCardConfirmation/deleteCreditCardConfirmation.module.css b/components/Dialog/dialog.module.css similarity index 52% rename from components/Profile/DeleteCreditCardConfirmation/deleteCreditCardConfirmation.module.css rename to components/Dialog/dialog.module.css index ed6c3170d..ab3abd26e 100644 --- a/components/Profile/DeleteCreditCardConfirmation/deleteCreditCardConfirmation.module.css +++ b/components/Dialog/dialog.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; + } } } diff --git a/components/Dialog/index.tsx b/components/Dialog/index.tsx new file mode 100644 index 000000000..3e299e751 --- /dev/null +++ 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 ( + + + + + + {({ close }) => ( +
+
+ {titleText} + {bodyText} +
+ {proceedIsPending ? ( + + ) : ( +
+ + {proceedHref ? ( + + ) : ( + + )} +
+ )} +
+ )} + + + + + ) +} diff --git a/components/Forms/Edit/Profile/index.tsx b/components/Forms/Edit/Profile/index.tsx index 6a4593d74..33f93e0fd 100644 --- 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) {
- + - - - - {({ close }) => ( -
- - {intl.formatMessage({ - id: "Remove card from member profile", - })} - -

- {`${intl.formatMessage({ - id: "Are you sure you want to remove the card ending with", - })} ${lastFourDigits} ${intl.formatMessage({ id: "from your member profile?" })}`} -

- - {deleteCard.isPending ? ( - - ) : ( -
- - -
- )} -
- )} - - - - -
- ) -} diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index dcef5e33c..da318202a 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -10,7 +10,9 @@ "Amenities": "Faciliteter", "An error occurred when adding a credit card, please try again later.": "Der opstod en fejl under tilføjelse af et kreditkort. Prøv venligst igen senere.", "An error occurred when trying to update profile.": "Der opstod en fejl under forsøg på at opdatere profilen.", + "Any changes you've made will be lost.": "Alle ændringer, du har foretaget, går tabt.", "Are you sure you want to remove the card ending with": "Er du sikker på, at du vil fjerne kortet, der slutter med", + "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på, at du vil fjerne kortet, der slutter me {lastFourDigits} fra din medlemsprofil?", "Arrival date": "Ankomstdato", "as of today": "fra idag", "As our": "Som vores {level}", @@ -47,6 +49,7 @@ "Day": "Dag", "Description": "Beskrivelse", "Discard changes": "Kassér ændringer", + "Discard unsaved changes?": "Slette ændringer, der ikke er gemt?", "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte morgenbuffet?", "Download the Scandic app": "Download Scandic-appen", "Edit": "Redigere", @@ -60,8 +63,8 @@ "Flexibility": "Fleksibilitet", "Former Scandic Hotel": "Tidligere Scandic Hotel", "From": "Fra", - "from your member profile?": "fra din medlemsprofil?", "Get inspired": "Bliv inspireret", + "Go back to edit": "Gå tilbage til redigering", "Go back to overview": "Gå tilbage til oversigten", "Highest level": "Højeste niveau", "Hotel facilities": "Hotel faciliteter", @@ -69,6 +72,7 @@ "How do you want to sleep?": "Hvordan vil du sove?", "How it works": "Hvordan det virker", "Join Scandic Friends": "Tilmeld dig Scandic Friends", + "km to city center": "km til byens centrum", "Language": "Sprog", "Level": "Niveau", "Level 1": "Niveau 1", @@ -113,8 +117,8 @@ "Phone is required": "Telefonnummer er påkrævet", "Phone number": "Telefonnummer", "Please enter a valid phone number": "Indtast venligst et gyldigt telefonnummer", - "points": "Point", "Points": "Point", + "points": "Point", "Points being calculated": "Point udregnes", "Points earned prior to May 1, 2021": "Point optjent inden 1. maj 2021", "Points may take up to 10 days to be displayed.": "Det kan tage op til 10 dage at få vist point.", @@ -179,6 +183,7 @@ "Where to": "Hvor", "Which room class suits you the best?": "Hvilken rumklasse passer bedst til dig", "Year": "År", + "Yes, discard changes": "Ja, kasser ændringer", "Yes, remove my card": "Ja, fjern mit kort", "You canceled adding a new credit card.": "Du har annulleret tilføjelsen af et nyt kreditkort.", "You have no previous stays.": "Du har ingen tidligere ophold.", @@ -190,4 +195,4 @@ "Your level": "Dit niveau", "Your points to spend": "Dine brugbare point", "Zip code": "Postnummer" -} \ No newline at end of file +} diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index c5d3ef573..2f2333b73 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -9,7 +9,8 @@ "Amenities": "Annehmlichkeiten", "An error occurred when adding a credit card, please try again later.": "Beim Hinzufügen einer Kreditkarte ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.", "An error occurred when trying to update profile.": "Beim Versuch, das Profil zu aktualisieren, ist ein Fehler aufgetreten.", - "Are you sure you want to remove the card ending with": "Möchten Sie die Karte mit der Endung", + "Any changes you've made will be lost.": "Alle Änderungen, die Sie vorgenommen haben, gehen verloren.", + "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Möchten Sie die Karte mit der Endung {lastFourDigits} wirklich aus Ihrem Mitgliedsprofil entfernen?", "Arrival date": "Ankunftsdatum", "as of today": "Stand heute", "As our": "Als unser {level}", @@ -46,6 +47,7 @@ "Day": "Tag", "Description": "Beschreibung", "Discard changes": "Änderungen verwerfen", + "Discard unsaved changes?": "Nicht gespeicherte Änderungen verwerfen?", "Do you want to start the day with Scandics famous breakfast buffé?": "Möchten Sie den Tag mit Scandics berühmtem Frühstücksbuffet beginnen?", "Download the Scandic app": "Laden Sie die Scandic-App herunter", "Edit": "Bearbeiten", @@ -59,8 +61,8 @@ "Flexibility": "Flexibilität", "Former Scandic Hotel": "Ehemaliges Scandic Hotel", "From": "Fromm", - "from your member profile?": "wirklich aus Ihrem Mitgliedsprofil entfernen?", "Get inspired": "Lassen Sie sich inspieren", + "Go back to edit": "Zurück zum Bearbeiten", "Go back to overview": "Zurück zur Übersicht", "Highest level": "Höchstes Level", "Hotel facilities": "Hotel-Infos", @@ -68,6 +70,7 @@ "How do you want to sleep?": "Wie möchtest du schlafen?", "How it works": "Wie es funktioniert", "Join Scandic Friends": "Treten Sie Scandic Friends bei", + "km to city center": "km bis zum Stadtzentrum", "Language": "Sprache", "Level": "Level", "Level 1": "Level 1", @@ -173,6 +176,7 @@ "Where to": "Wohin", "Which room class suits you the best?": "Welche Zimmerklasse passt am besten zu Ihnen?", "Year": "Jahr", + "Yes, discard changes": "Ja, Änderungen verwerfen", "Yes, remove my card": "Ja, meine Karte entfernen", "You canceled adding a new credit card.": "Sie haben das Hinzufügen einer neuen Kreditkarte abgebrochen.", "You have no previous stays.": "Sie haben keine vorherigen Aufenthalte.", @@ -184,4 +188,4 @@ "Your level": "Dein level", "Your points to spend": "Meine Punkte", "Zip code": "PLZ" -} \ No newline at end of file +} diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index 9d10d7855..9a984eb45 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -10,7 +10,8 @@ "Amenities": "Amenities", "An error occurred when adding a credit card, please try again later.": "An error occurred when adding a credit card, please try again later.", "An error occurred when trying to update profile.": "An error occurred when trying to update profile.", - "Are you sure you want to remove the card ending with": "Are you sure you want to remove the card ending with", + "Any changes you've made will be lost.": "Any changes you've made will be lost.", + "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?", "Arrival date": "Arrival date", "as of today": "as of today", "As our": "As our {level}", @@ -47,6 +48,7 @@ "Day": "Day", "Description": "Description", "Discard changes": "Discard changes", + "Discard unsaved changes?": "Discard unsaved changes?", "Distance to city centre": "{number}km to city centre", "Do you want to start the day with Scandics famous breakfast buffé?": "Do you want to start the day with Scandics famous breakfast buffé?", "Download the Scandic app": "Download the Scandic app", @@ -62,8 +64,8 @@ "Flexibility": "Flexibility", "Former Scandic Hotel": "Former Scandic Hotel", "From": "From", - "from your member profile?": "from your member profile?", "Get inspired": "Get inspired", + "Go back to edit": "Go back to edit", "Go back to overview": "Go back to overview", "Highest level": "Highest level", "Hotel facilities": "Hotel facilities", @@ -74,6 +76,7 @@ "How do you want to sleep?": "How do you want to sleep?", "How it works": "How it works", "Join Scandic Friends": "Join Scandic Friends", + "km to city center": "km to city center", "Language": "Language", "Level": "Level", "Level 1": "Level 1", @@ -185,6 +188,7 @@ "Where to": "Where to", "Which room class suits you the best?": "Which room class suits you the best?", "Year": "Year", + "Yes, discard changes": "Yes, discard changes", "Yes, remove my card": "Yes, remove my card", "You canceled adding a new credit card.": "You canceled adding a new credit card.", "You have no previous stays.": "You have no previous stays.", @@ -196,4 +200,4 @@ "Your level": "Your level", "Your points to spend": "Your points to spend", "Zip code": "Zip code" -} \ No newline at end of file +} diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index d421d976a..e77480202 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -10,7 +10,8 @@ "Amenities": "Mukavuudet", "An error occurred when adding a credit card, please try again later.": "Luottokorttia lisättäessä tapahtui virhe. Yritä myöhemmin uudelleen.", "An error occurred when trying to update profile.": "Profiilia päivitettäessä tapahtui virhe.", - "Are you sure you want to remove the card ending with": "Haluatko varmasti poistaa kortin, joka päättyy numeroon", + "Any changes you've made will be lost.": "Kaikki tekemäsi muutokset menetetään.", + "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Haluatko varmasti poistaa kortin, joka päättyy numeroon {lastFourDigits} jäsenprofiilistasi?", "Arrival date": "Saapumispäivä", "as of today": "tänään", "As our": "{level}-etu", @@ -47,6 +48,7 @@ "Day": "Päivä", "Description": "Kuvaus", "Discard changes": "Hylkää muutokset", + "Discard unsaved changes?": "Hylkäätkö tallentamattomat muutokset?", "Do you want to start the day with Scandics famous breakfast buffé?": "Haluatko aloittaa päiväsi Scandicsin kuuluisalla aamiaisbuffella?", "Download the Scandic app": "Lataa Scandic-sovellus", "Edit": "Muokata", @@ -60,8 +62,8 @@ "Flexibility": "Joustavuus", "Former Scandic Hotel": "Entinen Scandic-hotelli", "From": "From", - "from your member profile?": "jäsenprofiilistasi?", "Get inspired": "Inspiroidu", + "Go back to edit": "Palaa muokkaamaan", "Go back to overview": "Palaa yleiskatsaukseen", "Highest level": "Korkein taso", "Hotel facilities": "Hotellin palvelut", @@ -69,6 +71,7 @@ "How do you want to sleep?": "Kuinka haluat nukkua?", "How it works": "Kuinka se toimii", "Join Scandic Friends": "Liity jäseneksi", + "km to city center": "km keskustaan", "Language": "Kieli", "Level": "Level", "Level 1": "Taso 1", @@ -78,7 +81,7 @@ "Level 5": "Taso 5", "Level 6": "Taso 6", "Level 7": "Taso 7", - "Level up to unlock": "Nouse seuraavalle tasolle ja avaat seuraavan edun", + "Level up to unlock": "Nosta taso avataksesi lukituksen", "Log in": "Kirjaudu sisään", "Log in here": "Kirjaudu sisään", "Log out": "Kirjaudu ulos", @@ -178,6 +181,7 @@ "Where to": "Minne", "Which room class suits you the best?": "Mikä huoneluokka sopii sinulle parhaiten?", "Year": "Vuosi", + "Yes, discard changes": "Kyllä, hylkää muutokset", "Yes, remove my card": "Kyllä, poista korttini", "You canceled adding a new credit card.": "Peruutit uuden luottokortin lisäämisen.", "You have no previous stays.": "Sinulla ei ole aiempia majoituksia.", @@ -189,4 +193,4 @@ "Your level": "Tasosi", "Your points to spend": "Käytettävissä olevat pisteesi", "Zip code": "Postinumero" -} \ No newline at end of file +} diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index 5fc40010e..cf1d1fc5a 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -10,7 +10,8 @@ "Amenities": "Fasiliteter", "An error occurred when adding a credit card, please try again later.": "Det oppstod en feil ved å legge til et kredittkort. Prøv igjen senere.", "An error occurred when trying to update profile.": "Det oppstod en feil under forsøk på å oppdatere profilen.", - "Are you sure you want to remove the card ending with": "Er du sikker på at du vil fjerne kortet som slutter på", + "Any changes you've made will be lost.": "Eventuelle endringer du har gjort, går tapt.", + "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på at du vil fjerne kortet som slutter på {lastFourDigits} fra medlemsprofilen din?", "Arrival date": "Ankomstdato", "as of today": "per idag", "As our": "Som vår {level}", @@ -47,6 +48,7 @@ "Day": "Dag", "Description": "Beskrivelse", "Discard changes": "Forkaste endringer", + "Discard unsaved changes?": "Forkaste endringer som ikke er lagret?", "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte frokostbuffé?", "Download the Scandic app": "Last ned Scandic-appen", "Edit": "Redigere", @@ -60,8 +62,8 @@ "Flexibility": "Fleksibilitet", "Former Scandic Hotel": "Tidligere Scandic-hotell", "From": "Fra", - "from your member profile?": "fra medlemsprofilen din?", "Get inspired": "Bli inspirert", + "Go back to edit": "Gå tilbake til redigering", "Go back to overview": "Gå tilbake til oversikten", "Highest level": "Høyeste nivå", "Hotel facilities": "Hotelfaciliteter", @@ -69,6 +71,7 @@ "How do you want to sleep?": "Hvordan vil du sove?", "How it works": "Hvordan det fungerer", "Join Scandic Friends": "Bli med i Scandic Friends", + "km to city center": "km til sentrum", "Language": "Språk", "Level": "Nivå", "Level 1": "Nivå 1", @@ -113,8 +116,8 @@ "Phone is required": "Telefon kreves", "Phone number": "Telefonnummer", "Please enter a valid phone number": "Vennligst oppgi et gyldig telefonnummer", + "points": "poeng", "Points": "Poeng", - "points": "Poeng", "Points being calculated": "Poeng beregnes", "Points earned prior to May 1, 2021": "Opptjente poeng før 1. mai 2021", "Points may take up to 10 days to be displayed.": "Det kan ta opptil 10 dager før poeng vises.", @@ -179,6 +182,7 @@ "Where to": "Hvor skal du", "Which room class suits you the best?": "Hvilken romklasse passer deg best?", "Year": "År", + "Yes, discard changes": "Ja, forkast endringer", "Yes, remove my card": "Ja, fjern kortet mitt", "You canceled adding a new credit card.": "Du kansellerte å legge til et nytt kredittkort.", "You have no previous stays.": "Du har ingen tidligere opphold.", @@ -190,4 +194,4 @@ "Your level": "Ditt nivå", "Your points to spend": "Dine brukbare poeng", "Zip code": "Post kode" -} \ No newline at end of file +} diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 9fdf157d8..c5fb1c54d 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -10,7 +10,8 @@ "Amenities": "Bekvämligheter", "An error occurred when adding a credit card, please try again later.": "Ett fel uppstod när ett kreditkort lades till, försök igen senare.", "An error occurred when trying to update profile.": "Ett fel uppstod när du försökte uppdatera profilen.", - "Are you sure you want to remove the card ending with": "Är du säker på att du vill ta bort kortet som slutar med", + "Any changes you've made will be lost.": "Alla ändringar du har gjort kommer att gå förlorade.", + "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Är du säker på att du vill ta bort kortet som slutar med {lastFourDigits} från din medlemsprofil?", "Arrival date": "Ankomstdatum", "as of today": "från och med idag", "As our": "Som vår {level}", @@ -47,6 +48,7 @@ "Day": "Dag", "Description": "Beskrivning", "Discard changes": "Ignorera ändringar", + "Discard unsaved changes?": "Vill du ignorera ändringar som inte har sparats?", "Do you want to start the day with Scandics famous breakfast buffé?": "Vill du starta dagen med Scandics berömda frukostbuffé?", "Download the Scandic app": "Ladda ner Scandic-appen", "Edit": "Redigera", @@ -60,8 +62,8 @@ "Flexibility": "Flexibilitet", "Former Scandic Hotel": "Tidigare Scandichotell", "From": "Från", - "from your member profile?": "från din medlemsprofil?", "Get inspired": "Bli inspirerad", + "Go back to edit": "Gå tillbaka till redigeringen", "Go back to overview": "Gå tillbaka till översikten", "Highest level": "Högsta nivå", "Hotel facilities": "Hotellfaciliteter", @@ -71,6 +73,7 @@ "How do you want to sleep?": "Hur vill du sova?", "How it works": "Hur det fungerar", "Join Scandic Friends": "Gå med i Scandic Friends", + "km to city center": "km till stadens centrum", "Language": "Språk", "Level": "Nivå", "Level 1": "Nivå 1", @@ -180,6 +183,7 @@ "Where to": "Vart", "Which room class suits you the best?": "Vilken rumsklass passar dig bäst?", "Year": "År", + "Yes, discard changes": "Ja, ignorera ändringar", "Yes, remove my card": "Ja, ta bort mitt kort", "You canceled adding a new credit card.": "Du avbröt att lägga till ett nytt kreditkort.", "You have no previous stays.": "Du har inga tidigare vistelser.", @@ -191,4 +195,4 @@ "Your level": "Din nivå", "Your points to spend": "Dina spenderbara poäng", "Zip code": "Postnummer" -} \ No newline at end of file +} diff --git a/types/components/dialog.ts b/types/components/dialog.ts new file mode 100644 index 000000000..31680229d --- /dev/null +++ b/types/components/dialog.ts @@ -0,0 +1,10 @@ +export interface DialogProps { + bodyText: string + cancelButtonText: string + proceedHref?: string + proceedIsPending?: boolean + proceedOnClick?: (close: () => void) => void + proceedText: string + titleText: string + triggerButtonText: React.ReactNode +}