feat: add activatable status indicator to toolbar v2

packages/client/src/clients/guide/client.ts

@@ -217,6 +217,13 @@ const predicate = (
     return false;
   }
 
+  return checkActivatable(guide, location);
+};
+
+export const checkActivatable = (
+  guide: KnockGuide,
+  location: string | undefined,
+) => {
   const url = location ? newUrl(location) : undefined;
 
   const urlRules = guide.activation_url_rules || [];

packages/client/src/clients/guide/index.ts

@@ -1,4 +1,8 @@
-export { KnockGuideClient, DEBUG_QUERY_PARAMS } from "./client";
+export {
+  KnockGuideClient,
+  DEBUG_QUERY_PARAMS,
+  checkActivatable,
+} from "./client";
 export type {
   KnockGuide,
   KnockGuideStep,

packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx

@@ -1,9 +1,15 @@
 import { Button } from "@telegraph/button";
-import { Stack } from "@telegraph/layout";
+import { Box, Stack } from "@telegraph/layout";
 import { Tag } from "@telegraph/tag";
 import { Tooltip } from "@telegraph/tooltip";
 import { Text } from "@telegraph/typography";
-import { CheckCircle2, CircleDashed, Eye, UserCircle2 } from "lucide-react";
+import {
+  CheckCircle2,
+  CircleDashed,
+  Eye,
+  LocateFixed,
+  UserCircle2,
+} from "lucide-react";
 import * as React from "react";
 
 import { GuideHoverCard } from "./GuideHoverCard";
@@ -39,6 +45,27 @@ export const GuideRow = ({ guide, orderIndex }: Props) => {
       </Stack>
 
       <Stack justify="flex-end">
+        {guide.__typename === "Guide" && (
+          <Stack gap="1">
+            <Tooltip
+              label="Current location does not match the activation conditions"
+              enabled={!guide.inspection.activatable.status}
+            >
+              <Button
+                px="1"
+                size="1"
+                variant="soft"
+                color={guide.inspection.activatable.status ? "green" : "red"}
+                leadingIcon={{ icon: LocateFixed, alt: "Target" }}
+              />
+            </Tooltip>
+          </Stack>
+        )}
+        {guide.__typename === "Guide" && (
+          <Stack px="1" align="center">
+            <Box h="3" borderLeft="px" borderColor="gray-6" />
+          </Stack>
+        )}
         <Stack gap="1">
           {guide.__typename === "Guide" && (
             <>
@@ -49,6 +76,7 @@ export const GuideRow = ({ guide, orderIndex }: Props) => {
                     : guide.inspection.targetable.message
                 }
                 // enabled={!guide.inspection.targetable.status}
+                enabled={!guide.inspection.targetable.status}
               >
                 <Button
                   px="1"

packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx

@@ -22,11 +22,9 @@ export const GuidesListDisplaySelect = ({ value, onChange }: Props) => {
         style: { zIndex: MAX_Z_INDEX },
       }}
     >
-      {/*
-        <Select.Option size="1" value="current-page">
-          Displayable on current page
-        </Select.Option>
-      */}
+      <Select.Option size="1" value="current-page">
+        Displayable on current page
+      </Select.Option>
       <Select.Option size="1" value="all-eligible">
         All eligible guides for user
       </Select.Option>

packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx

@@ -16,14 +16,15 @@ import {
 import { detectToolbarParam } from "./helpers";
 import {
   checkEligible,
+  checkUsable,
   useInspectGuideClientStore,
 } from "./useInspectGuideClientStore";
 
 export const V2 = () => {
   const { client } = useGuideContext();
 
   const [guidesListDisplayed, setGuidesListDisplayed] =
-    React.useState<DisplayOption>("all-eligible");
+    React.useState<DisplayOption>("current-page");
 
   const [isVisible, setIsVisible] = React.useState(detectToolbarParam());
   const [isCollapsed, setIsCollapsed] = React.useState(true);
@@ -104,6 +105,13 @@ export const V2 = () => {
           <Box w="full">
             {data.error && <Box>{data.error}</Box>}
             {data.guides.map((guide, idx) => {
+              if (
+                guidesListDisplayed === "current-page" &&
+                !checkUsable(guide)
+              ) {
+                return null;
+              }
+
               if (
                 guidesListDisplayed === "all-eligible" &&
                 !checkEligible(guide)

packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts

@@ -2,6 +2,7 @@ import {
   KnockGuide,
   KnockGuideClientStoreState,
   KnockGuideIneligibilityMarker,
+  checkActivatable,
 } from "@knocklabs/client";
 import { useGuideContext, useStore } from "@knocklabs/react-core";
 
@@ -19,6 +20,10 @@ type TargetableStatusFalse = {
 };
 type TargetableStatus = TargetableStatusTrue | TargetableStatusFalse;
 
+type ActivatableStatus = {
+  status: boolean;
+};
+
 type ArchivedStatus = {
   status: boolean;
 };
@@ -28,6 +33,7 @@ export type InspectedGuide = KnockGuide & {
     // true status = good
     active: ActiveStatus;
     targetable: TargetableStatus;
+    activatable: ActivatableStatus;
 
     // false status = good
     archived: ArchivedStatus;
@@ -43,6 +49,14 @@ export const checkEligible = (guide: InspectedGuide | MissingGuide) => {
   return true;
 };
 
+export const checkUsable = (guide: InspectedGuide | MissingGuide) => {
+  if (guide.__typename === "MissingGuide") return false;
+  if (!checkEligible(guide)) return false;
+  if (!guide.inspection.activatable.status) return false;
+
+  return true;
+};
+
 // Exists and ordered in control but absent in switchboard (therefore not
 // included in the api response), which implies a newly created guide that has
 // never been published to switchboard.
@@ -87,13 +101,15 @@ const toArchivedStatus = (
 
 const inspectGuide = (
   guide: KnockGuide,
-  ineligibleGuides: KnockGuideClientStoreState["ineligibleGuides"],
+  { ineligibleGuides, location }: StoreStateSnapshot,
+  // ineligibleGuides: KnockGuideClientStoreState["ineligibleGuides"],
 ): InspectedGuide => {
   const marker = ineligibleGuides[guide.key];
 
   const inspection: InspectedGuide["inspection"] = {
     active: { status: guide.active },
     targetable: marker ? toTargetableStatus(marker) : { status: true },
+    activatable: { status: checkActivatable(guide, location) },
     archived: marker ? toArchivedStatus(marker) : { status: false },
   };
 
@@ -111,12 +127,18 @@ const newMissingGuide = (key: KnockGuide["key"]) =>
     bypass_global_group_limit: false,
   }) as MissingGuide;
 
+type StoreStateSnapshot = Pick<
+  KnockGuideClientStoreState,
+  "location" | "guides" | "guideGroups" | "ineligibleGuides" | "debug"
+>;
+
 export const useInspectGuideClientStore = (): InspectionResult | undefined => {
   const { client } = useGuideContext();
 
   // Extract a snapshot of the client store state for debugging.
-  const snapshot = useStore(client.store, (state) => {
+  const snapshot: StoreStateSnapshot = useStore(client.store, (state) => {
     return {
+      location: state.location,
       guides: state.guides,
       guideGroups: state.guideGroups,
       ineligibleGuides: state.ineligibleGuides,
@@ -146,7 +168,7 @@ export const useInspectGuideClientStore = (): InspectionResult | undefined => {
       return newMissingGuide(guideKey);
     }
 
-    return inspectGuide(guide, snapshot.ineligibleGuides);
+    return inspectGuide(guide, snapshot);
   });
 
   return {