fix: add back round robin data to insights/router-position (#21116)

* add back all data to router-position

* fix type error

---------

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/modules/insights/insights-virtual-queues-view.tsx

@@ -40,12 +40,7 @@ export default function InsightsVirtualQueuesPage() {
       />
       <div className="mt-10">
         {selectedForm ? (
-          <TestForm
-            form={selectedForm}
-            supportsTeamMembersMatchingLogic={true}
-            showAllData={false}
-            isDialog
-          />
+          <TestForm form={selectedForm} supportsTeamMembersMatchingLogic={true} showRRData={true} />
         ) : (
           <></>
         )}

apps/web/public/static/locales/en/common.json

@@ -3172,12 +3172,15 @@
   "skip_trial": "Skip trial period",
   "team_trials_skipped_successfully": "Team trials skipped successfully",
   "sms_workflow_consent": "By entering your phone number you consent to receive SMS messages for this event. SMS rates may apply.",
-  "routing_preview_more_info_found_insights": "More info can be found in Routing Insights",
+  "routing_preview_more_info_found_insights": "More info can be found in <0>Routing Insights</0>",
   "results": "Results",
   "view_form": "View Form",
   "sms_opt_out_message": "Text STOP to opt-out of SMS messages",
   "routing_form_next_in_queue": "{{count}} next in queue",
   "routing_form_select_members_to_email": "Send email responses to",
   "routing_incomplete_booking_tab": "Incomplete Bookings",
+  "matching": "Matching",
+  "event_redirect": "Event Redirect",
+  "reset_form": "Reset Form",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/app-store/routing-forms/components/_components/ResultSection.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { motion } from "framer-motion";
+import Link from "next/link";
 import type { ReactNode } from "react";
 
+import ServerTrans from "@calcom/lib/components/ServerTrans";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui/components/badge";
 import type { IconName } from "@calcom/ui/components/icon";
@@ -263,7 +265,19 @@ export const ResultsView = ({
                   <div className="flex items-center gap-2 px-2 py-1">
                     <Icon name="info" className="h-3 w-3" />
                     <span data-testid="matching-members" className="text-subtle text-sm">
-                      {t("routing_preview_more_info_found_insights")}
+                      <ServerTrans
+                        t={t}
+                        i18nKey="routing_preview_more_info_found_insights"
+                        components={[
+                          <Link
+                            key="routing_insights"
+                            className="underline underline-offset-2"
+                            target="_blank"
+                            href="/insights/router-position">
+                            Routing Insights
+                          </Link>,
+                        ]}
+                      />
                     </span>
                   </div>
                 }>

packages/app-store/routing-forms/components/_components/TeamMembersMatchResult.tsx

@@ -1,6 +1,4 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import classNames from "@calcom/ui/classNames";
-import { Alert } from "@calcom/ui/components/alert";
 
 export type MembersMatchResultType = {
   isUsingAttributeWeights: boolean;
@@ -20,53 +18,15 @@ export type MembersMatchResultType = {
 
 export const TeamMembersMatchResult = ({
   membersMatchResult,
-  chosenRouteName,
-  showAllData,
 }: {
   membersMatchResult: MembersMatchResultType;
-  chosenRouteName: string;
-  showAllData: boolean;
 }) => {
   const { t } = useLocale();
   if (!membersMatchResult) return null;
 
-  const hasMainWarnings = (membersMatchResult.mainWarnings?.length ?? 0) > 0;
-  const hasFallbackWarnings = (membersMatchResult.fallbackWarnings?.length ?? 0) > 0;
-
-  const renderFallbackLogicStatus = () => {
-    if (!membersMatchResult.checkedFallback) {
-      return t("fallback_not_needed");
-    } else if (
-      isNoLogicFound(membersMatchResult.teamMembersMatchingAttributeLogic) ||
-      membersMatchResult.teamMembersMatchingAttributeLogic.length > 0
-    ) {
-      return t("yes");
-    } else {
-      return t("no");
-    }
-  };
-
-  const renderMainLogicStatus = () => {
-    return !membersMatchResult.checkedFallback ? t("yes") : t("no");
-  };
-
   const renderQueue = () => {
     if (isNoLogicFound(membersMatchResult.teamMembersMatchingAttributeLogic)) {
-      if (!showAllData) return <div className="mt-4">{t("no_active_queues")}</div>;
-      if (membersMatchResult.checkedFallback) {
-        return (
-          <span className="font-semibold">
-            {t(
-              "all_assigned_members_of_the_team_event_type_consider_adding_some_attribute_rules_to_fallback"
-            )}
-          </span>
-        );
-      }
-      return (
-        <span className="font-semibold">
-          {t("all_assigned_members_of_the_team_event_type_consider_adding_some_attribute_rules")}
-        </span>
-      );
+      return <div className="mt-4">{t("no_active_queues")}</div>;
     }
 
     const matchingMembers = membersMatchResult.teamMembersMatchingAttributeLogic;
@@ -124,61 +84,16 @@ export const TeamMembersMatchResult = ({
 
   return (
     <div className="text-default mt-2 space-y-2">
-      {showAllData ? (
-        <>
-          <div data-testid="chosen-route">
-            {t("chosen_route")}: <span className="font-semibold">{chosenRouteName}</span>
-          </div>
-          <div data-testid="attribute-logic-matched" className={classNames(hasMainWarnings && "text-error")}>
-            {t("attribute_logic_matched")}: <span className="font-semibold">{renderMainLogicStatus()}</span>
-            {hasMainWarnings && (
-              <Alert
-                className="mt-2"
-                severity="warning"
-                title={membersMatchResult.mainWarnings?.join(", ")}
-              />
-            )}
-          </div>
-          <div
-            data-testid="attribute-logic-fallback-matched"
-            className={classNames(hasFallbackWarnings && "text-error")}>
-            {t("attribute_logic_fallback_matched")}:{" "}
-            <span className="font-semibold">{renderFallbackLogicStatus()}</span>
-            {hasFallbackWarnings && (
-              <Alert
-                className="mt-2"
-                severity="warning"
-                title={membersMatchResult.fallbackWarnings?.join(", ")}
-              />
-            )}
-          </div>
-        </>
-      ) : (
-        <></>
-      )}
       <div className="mt-4">
         {membersMatchResult.contactOwnerEmail ? (
           <div data-testid="contact-owner-email">
             {t("contact_owner")}:{" "}
             <span className="font-semibold">{membersMatchResult.contactOwnerEmail}</span>
           </div>
-        ) : showAllData ? (
-          <div data-testid="contact-owner-email">
-            {t("contact_owner")}: <span className="font-semibold">Not found</span>
-          </div>
         ) : (
           <></>
         )}
         <div className="mt-2" data-testid="matching-members">
-          {showAllData ? (
-            <>
-              {membersMatchResult.isUsingAttributeWeights
-                ? t("matching_members_queue_using_attribute_weights")
-                : t("matching_members_queue_using_event_assignee_weights")}
-            </>
-          ) : (
-            <></>
-          )}
           {renderQueue()}
         </div>
       </div>

packages/app-store/routing-forms/components/_components/TestForm.tsx

@@ -23,6 +23,7 @@ import type { RoutingForm, FormResponse, NonRouterRoute } from "../../types/type
 import FormInputFields from "../FormInputFields";
 import { ResultsView as Results } from "./ResultSection";
 import type { MembersMatchResultType } from "./TeamMembersMatchResult";
+import { TeamMembersMatchResult } from "./TeamMembersMatchResult";
 
 export type UptoDateForm = Brand<
   NonNullable<SingleFormComponentProps["enrichedWithUserProfileForm"]>,
@@ -76,17 +77,17 @@ const FormView = ({
 export const TestForm = ({
   form,
   supportsTeamMembersMatchingLogic,
-  showAllData = true,
   renderFooter,
   isDialog = false,
   onClose: onCloseProp,
+  showRRData = false,
 }: {
   form: UptoDateForm | RoutingForm;
   supportsTeamMembersMatchingLogic: boolean;
-  showAllData?: boolean;
   renderFooter?: (onClose: () => void, onSubmit: () => void, isValid: boolean) => React.ReactNode;
   isDialog?: boolean;
   onClose?: () => void;
+  showRRData?: boolean;
 }) => {
   const { t } = useLocale();
   const [response, setResponse] = useState<FormResponse>({});
@@ -201,7 +202,7 @@ export const TestForm = ({
           <>
             {isDialog ? (
               <DialogHeader title={t("test_routing_form")} subtitle={t("test_preview_description")} />
-            ) : (
+            ) : !showRRData ? (
               <div className="mb-6 flex items-center justify-between">
                 <h3 className="text-emphasis text-xl font-semibold">{t("preview")}</h3>
                 <div className="flex items-center gap-1">
@@ -228,6 +229,8 @@ export const TestForm = ({
                   </Button>
                 </div>
               </div>
+            ) : (
+              <></>
             )}
             <FormView
               key={formKey}
@@ -247,7 +250,7 @@ export const TestForm = ({
           <>
             {isDialog ? (
               <DialogHeader title={t("test_routing_form")} subtitle={t("test_preview_description")} />
-            ) : (
+            ) : !showRRData ? (
               <div className="mb-6 flex items-center justify-between">
                 <h3 className="text-emphasis text-xl font-semibold">{t("results")}</h3>
                 <div className="flex items-center gap-1">
@@ -279,13 +282,26 @@ export const TestForm = ({
                   </Button>
                 </div>
               </div>
+            ) : (
+              <></>
             )}
-            <Results
-              chosenRoute={chosenRoute}
-              supportsTeamMembersMatchingLogic={supportsTeamMembersMatchingLogic}
-              membersMatchResult={membersMatchResult}
-              isPending={findTeamMembersMatchingAttributeLogicMutation.isPending}
-            />
+
+            {showRRData ? (
+              <>
+                <Button color="secondary" onClick={resetForm} variant="icon" StartIcon="refresh-cw">
+                  {t("reset_form")}
+                </Button>
+                <TeamMembersMatchResult membersMatchResult={membersMatchResult} />
+              </>
+            ) : (
+              <Results
+                chosenRoute={chosenRoute}
+                supportsTeamMembersMatchingLogic={supportsTeamMembersMatchingLogic}
+                membersMatchResult={membersMatchResult}
+                isPending={findTeamMembersMatchingAttributeLogicMutation.isPending}
+              />
+            )}
+
             {isDialog && (
               <DialogFooter>
                 <Button onClick={onClose} color="secondary">