add activatable status indicator

Author: thomaswhyyou

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 },
       }}
     >
-      {/* NOTE: Commented out until we can show relevant indicators.
-        <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,6 +16,7 @@ import {
 import { detectToolbarParam } from "./helpers";
 import {
   InspectionResult,
+  checkUsable,
   useInspectGuideClientStore,
 } from "./useInspectGuideClientStore";
 
@@ -27,10 +28,12 @@ const GuidesList = ({
   displayOption: DisplayOption;
 }) => {
   return guides.map((guide, idx) => {
+    if (displayOption === "current-page" && !checkUsable(guide)) {
+      return null;
+    }
     if (displayOption === "all-eligible" && !guide.annotation.isEligible) {
       return null;
     }
-
     return <GuideRow key={guide.key} guide={guide} orderIndex={idx} />;
   });
 };
@@ -39,7 +42,7 @@ 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);

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";
 
@@ -21,6 +22,10 @@ type TargetableStatusFalse = {
 };
 type TargetableStatus = TargetableStatusTrue | TargetableStatusFalse;
 
+type ActivatableStatus = {
+  status: boolean;
+};
+
 // Archived: `false` status = good
 type ArchivedStatus = {
   status: boolean;
@@ -31,6 +36,7 @@ type AnnotatedStatuses = {
   active: ActiveStatus;
   targetable: TargetableStatus;
   archived: ArchivedStatus;
+  activatable: ActivatableStatus;
 };
 
 type GuideAnnotation = AnnotatedStatuses & {
@@ -43,6 +49,14 @@ export type AnnotatedGuide = KnockGuide & {
   annotation: GuideAnnotation;
 };
 
+export const checkUsable = (guide: AnnotatedGuide | MissingGuide) => {
+  if (guide.__typename === "MissingGuide") return false;
+  if (!checkEligible(guide)) return false;
+  if (!guide.annotation.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.
@@ -101,19 +115,20 @@ const resolveIsEligible = ({
 
 type StoreStateSnapshot = Pick<
   KnockGuideClientStoreState,
-  "guides" | "guideGroups" | "ineligibleGuides" | "debug"
+  "location" | "guides" | "guideGroups" | "ineligibleGuides" | "debug"
 >;
 
 const annotateGuide = (
   guide: KnockGuide,
   snapshot: StoreStateSnapshot,
 ): AnnotatedGuide => {
-  const { ineligibleGuides } = snapshot;
+  const { ineligibleGuides, location } = snapshot;
   const marker = ineligibleGuides[guide.key];
 
   const statuses: AnnotatedStatuses = {
     active: { status: guide.active },
     targetable: marker ? toTargetableStatus(marker) : { status: true },
+    activatable: { status: checkActivatable(guide, location) },
     archived: marker ? toArchivedStatus(marker) : { status: false },
   };
 
@@ -143,8 +158,9 @@ 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,