update: added empty screen component to empty call history page (#24721)

Co-authored-by: Pallav <90088723+Pallava-Joshi@users.noreply.github.com>

apps/web/modules/insights/insights-call-history-view.tsx

@@ -22,6 +22,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Badge } from "@calcom/ui/components/badge";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 type CallHistoryRow = {
   id: string;
@@ -79,7 +80,7 @@ function CallHistoryContent({ org: _org }: CallHistoryProps) {
   const [rowSelection, setRowSelection] = useState({});
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  const { limit, offset, searchTerm: _searchTerm } = useDataTable();
+  const { limit, offset, searchTerm } = useDataTable();
 
   const {
     data: callsData,
@@ -114,7 +115,7 @@ function CallHistoryContent({ org: _org }: CallHistoryProps) {
       callCreated: call.call_analysis?.call_successful ?? true,
       inVoicemail: call.call_analysis?.in_voicemail ?? false,
     }));
-  }, [callsData?.calls]);
+  }, [callsData?.calls, t]);
 
   const columns = useMemo<ColumnDef<CallHistoryRow>[]>(
     () => [
@@ -310,6 +311,16 @@ function CallHistoryContent({ org: _org }: CallHistoryProps) {
             <DataTableFilters.ClearFiltersButton />
           </>
         }
+        EmptyView={
+          <div className="px-6 py-8">
+            <EmptyScreen
+              Icon="phone"
+              headline={searchTerm ? t("no_result_found_for", { searchTerm }) : t("no_call_history")}
+              description={t("no_call_history_description")}
+              className="mb-16"
+            />
+          </div>
+        }
       />
 
       {state.callDetailsSheet.showModal && <CallDetailsSheet state={state} dispatch={dispatch} />}

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

@@ -943,6 +943,8 @@
   "new_event_type_heading": "Create your first event type",
   "new_event_type_description": "Event types enable you to share links that show available times on your calendar and allow people to make bookings with you.",
   "event_type_created_successfully": "{{eventTypeTitle}} event type created successfully",
+  "no_call_history": "No call history",
+  "no_call_history_description": "No matching call history found for the particular account/search query.",
   "event_type_updated_successfully": "{{eventTypeTitle}} event type updated successfully",
   "event_type_deleted_successfully": "Event type deleted successfully",
   "hours": "Hours",