Create friend request confirmation dialog

Author: nabramow

app/web/features/connections/friends/AddFriendButton.tsx

@@ -1,15 +1,23 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import Button from "components/Button";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "components/Dialog";
 import { PersonAddIcon } from "components/Icons";
 import ProfileIncompleteDialog from "components/ProfileIncompleteDialog/ProfileIncompleteDialog";
 import { doAntibot } from "features/antibot/antibot";
 import useAccountInfo from "features/auth/useAccountInfo";
 import { userKey } from "features/queryKeys";
 import { Empty } from "google-protobuf/google/protobuf/empty_pb";
-import { PROFILE } from "i18n/namespaces";
-import { useTranslation } from "next-i18next";
+import { Link } from "@mui/material";
+import { Trans, useTranslation } from "i18n";
+import { CONNECTIONS, GLOBAL, PROFILE } from "i18n/namespaces";
 import { User } from "proto/api_pb";
 import React, { useState } from "react";
+import { helpCenterFriendRequestsURL } from "routes";
 import { service } from "service";
 
 import { SetMutationError } from ".";
@@ -24,9 +32,10 @@ export default function AddFriendButton({
   userId,
 }: AddFriendButtonProps) {
   const queryClient = useQueryClient();
-  const { t } = useTranslation([PROFILE]);
+  const { t } = useTranslation([PROFILE, CONNECTIONS, GLOBAL]);
   const [showCantFriendDialog, setShowCantFriendDialog] =
     useState<boolean>(false);
+  const [showConfirmDialog, setShowConfirmDialog] = useState<boolean>(false);
 
   const { data: accountInfo, isLoading: isAccountInfoLoading } =
     useAccountInfo();
@@ -76,17 +85,53 @@ export default function AddFriendButton({
     if (!accountInfo?.profileComplete) {
       setShowCantFriendDialog(true);
     } else {
-      sendFriendRequest({ setMutationError, userId });
+      setShowConfirmDialog(true);
     }
   };
 
+  const onConfirm = () => {
+    setShowConfirmDialog(false);
+    sendFriendRequest({ setMutationError, userId });
+  };
+
   return (
     <>
       <ProfileIncompleteDialog
         open={showCantFriendDialog}
         onClose={() => setShowCantFriendDialog(false)}
         attempted_action="send_friend_request"
       />
+      <Dialog
+        aria-labelledby="add-friend-confirm-dialog"
+        open={showConfirmDialog}
+        onClose={() => setShowConfirmDialog(false)}
+      >
+        <DialogTitle id="add-friend-confirm-dialog">
+          {t("connections:add_friend_confirmation_dialog.title")}
+        </DialogTitle>
+        <DialogContent>
+          <Trans
+            i18nKey="connections:add_friend_confirmation_dialog.message"
+            components={{
+              helpCenterLink: (
+                <Link
+                  href={helpCenterFriendRequestsURL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                />
+              ),
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button variant="outlined" onClick={() => setShowConfirmDialog(false)}>
+            {t("global:cancel")}
+          </Button>
+          <Button variant="contained" loading={isPending} onClick={onConfirm}>
+            {t("connections:add_friend_confirmation_dialog.confirm")}
+          </Button>
+        </DialogActions>
+      </Dialog>
       <Button
         startIcon={<PersonAddIcon />}
         onClick={onClick}

app/web/features/connections/locales/en.json

@@ -1,5 +1,10 @@
 {
   "add_friend": "Add friend",
+  "add_friend_confirmation_dialog": {
+    "title": "Do you know this person?",
+    "message": "Please only send friend requests to people you already know or have met during your travels — most people prefer to connect after meeting in person. <helpCenterLink>Read about friend requests in our Help Center.</helpCenterLink>",
+    "confirm": "Yes, I know them. Send request!"
+  },
   "accept": "Accept",
   "decline": "Decline",
   "blocked_list_title": "Blocked users",

app/web/routes.ts

@@ -223,6 +223,8 @@ export const helpCenterHowToLeaveGoodReferenceUrl =
   "https://help.couchers.org/hc/couchersorg-help-center/articles/1717360836-how-to";
 export const helpCenterCommunityBuilderURL =
   "https://help.couchers.org/hc/couchersorg-help-center/articles/1743977410-what-is-a-community-builder";
+export const helpCenterFriendRequestsURL =
+  "https://help.couchers.org/hc/couchersorg-help-center/articles/1715125657-can-i-add-anyone-as-a-friend";
 export const communityGuidelinesURL =
   "https://help.couchers.org/hc/couchersorg-help-center/articles/1715121703-couchers-org-community-guidelines";
 // Note: Url must end with financials year digits