@manta-eu/react 0.3.0 → 0.5.0

package/src/routes/integrations/components/connect-forms/MicrosoftAdsConnectForm.tsx

@@ -0,0 +1,140 @@
+import {
+  GQLInferalLocation,
+  GQLIntegration,
+  useMicrosoftAdsSetupConnectMutation,
+  useMicrosoftAdsSetupProgressQuery,
+  type GQLMicrosoftAdsAccount,
+} from "@manta-eu/client";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { inferalLocationLabels } from "./inferal-locations";
+import { OAuthSetupConnectForm, type OAuthSetup, type SetupCopy } from "./OAuthSetupConnectForm";
+import type { ConnectFormProps } from "./types";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import type { TreeSelectItem } from "#components/tree-multi-select/index";
+import { useMantaClient } from "#providers/index";
+
+const copy: SetupCopy = {
+  providerName: "Microsoft Ads",
+  identityProviderName: "Microsoft",
+  entitySingular: "account",
+  entityPlural: "accounts",
+  signInDescription:
+    "Sign in the way you sign in to Microsoft Advertising: with a Microsoft account, or with Google if your Advertising login is a Google account.",
+  pickTitle: "Pick the Microsoft Ads accounts to connect",
+  pickDescription:
+    "Manta loads each account's Search campaigns, ad groups, ads and keywords, plus daily campaign, keyword and search-query reports.",
+  noEntitiesLabel:
+    "We couldn't find any Microsoft Advertising accounts for this Microsoft sign-in. Sign in with a different user or check your account access.",
+  noneConnectableLabel:
+    "Every Microsoft Advertising account on this sign-in is already connected. Sign in as a different user to connect another one.",
+};
+
+export const defaultMicrosoftAdsLocation = GQLInferalLocation.Enam;
+
+// Microsoft Advertising refuses a Microsoft token for a login that is a Google account (GoogleAccountIsRequired).
+const googleSignIn = [{ label: "Continue with Google", href: "/oauth/microsoft-ads-google/start" }] as const;
+
+const inferalLocations: ReadonlySet<string> = new Set(Object.values(GQLInferalLocation));
+
+function isInferalLocation(value: string): value is GQLInferalLocation {
+  return inferalLocations.has(value);
+}
+
+function accountHint(
+  account: GQLMicrosoftAdsAccount,
+  alreadyConnected: boolean,
+  reconnectable: boolean,
+): string | undefined {
+  if (!account.connectable) return "Unavailable";
+  if (reconnectable) return "Reconnect";
+  if (alreadyConnected) return "Already connected";
+  return undefined;
+}
+
+export function microsoftAdsTreeItems(
+  accounts: GQLMicrosoftAdsAccount[],
+  alreadyConnectedExternalIds: ReadonlySet<string>,
+  reconnectableExternalIds: ReadonlySet<string> = new Set(),
+): TreeSelectItem[] {
+  return accounts.map((account) => {
+    const reconnectable = reconnectableExternalIds.has(account.id);
+    const alreadyConnected = !reconnectable && alreadyConnectedExternalIds.has(account.id);
+    return {
+      id: account.id,
+      label: account.name ?? account.number ?? account.id,
+      caption: account.number ?? account.id,
+      hint: accountHint(account, alreadyConnected, reconnectable),
+      selectable: account.connectable,
+      disabled: alreadyConnected,
+      depth: 0,
+    };
+  });
+}
+
+function useMicrosoftAdsSetup(location: GQLInferalLocation): OAuthSetup<GQLMicrosoftAdsAccount> {
+  const { mantaClient } = useMantaClient();
+  const queryClient = useQueryClient();
+  const progressQuery = useMicrosoftAdsSetupProgressQuery(mantaClient, undefined, { staleTime: 0 });
+  const connectMutation = useMicrosoftAdsSetupConnectMutation(mantaClient);
+  const progress = progressQuery.data?.microsoftAdsSetupProgress;
+
+  return {
+    progress: progress && { state: progress.state, rows: progress.accounts, lastError: progress.lastError },
+    refetchProgress: progressQuery.refetch,
+    resetProgress: () =>
+      queryClient.setQueryData(useMicrosoftAdsSetupProgressQuery.getKey(), {
+        microsoftAdsSetupProgress: { state: [], accounts: null, lastError: null },
+      }),
+    connect: async (accountIds) =>
+      (await connectMutation.mutateAsync({ accountIds, location })).microsoftAdsSetupConnect,
+    isConnecting: connectMutation.isPending,
+  };
+}
+
+type LocationPickerProps = {
+  value: GQLInferalLocation;
+  onChange: (location: GQLInferalLocation) => void;
+};
+
+function LocationPicker(props: LocationPickerProps) {
+  const { value, onChange } = props;
+
+  return (
+    <div className="grid gap-1">
+      <Select value={value} onValueChange={(next) => isInferalLocation(next) && onChange(next)}>
+        <SelectTrigger label="Stream location" id="microsoft-ads-location" className="w-full h-10">
+          <SelectValue placeholder="Select a region" />
+        </SelectTrigger>
+        <SelectContent>
+          {Object.entries(inferalLocationLabels).map(([location, label]) => (
+            <SelectItem key={location} value={location}>
+              {label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <p className="typography-caption text-muted-foreground">
+        Where the account's data stream runs. Pick the region closest to your account.
+      </p>
+    </div>
+  );
+}
+
+export function MicrosoftAdsConnectForm(props: ConnectFormProps) {
+  const [location, setLocation] = useState<GQLInferalLocation>(defaultMicrosoftAdsLocation);
+  const setup = useMicrosoftAdsSetup(location);
+
+  return (
+    <OAuthSetupConnectForm
+      {...props}
+      integration={GQLIntegration.MicrosoftAds}
+      oauthStartPath="/oauth/microsoft-ads/start"
+      copy={copy}
+      setup={setup}
+      treeItems={microsoftAdsTreeItems}
+      pickExtras={<LocationPicker value={location} onChange={setLocation} />}
+      alternateSignIns={googleSignIn}
+    />
+  );
+}

package/src/routes/integrations/components/connect-forms/OAuthSetupConnectForm.tsx

@@ -2,7 +2,7 @@ import { GQLGoogleSetupStateEnum, type GQLIntegration } from "@manta-eu/client";
 import { parseError } from "@manta-eu/client/shared/error-utils";
 import { isPresent } from "@manta-eu/lib/present";
 import { ArrowLeft } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { toast } from "sonner";
 import { match } from "ts-pattern";
 import { ConnectFormHeader } from "./ConnectFormHeader";
@@ -66,11 +66,19 @@ export type OAuthSetupConnectFormProps<Row extends SetupRow> = ConnectFormProps
   ) => TreeSelectItem[];
   treeOptions?: SetupTreeOptions;
   resumesUnfinishedSetup?: boolean;
+  // Rendered under the list while picking, for a choice the connect needs besides the ids.
+  pickExtras?: ReactNode;
+  // Other identity providers that lead into the same setup, offered beside the main sign-in.
+  alternateSignIns?: readonly AlternateSignIn[];
 };
 
+export type AlternateSignIn = { label: string; href: string };
+
 export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupConnectFormProps<Row>) {
   const { onBack, onChanged, onDismiss, provider, resumedFromOAuth = false, importNotice } = props;
-  const { integration, oauthStartPath, copy, setup, treeItems, treeOptions, resumesUnfinishedSetup } = props;
+  const { integration, oauthStartPath, copy, setup, treeItems, treeOptions, resumesUnfinishedSetup, pickExtras } =
+    props;
+  const { alternateSignIns } = props;
   const { providerName } = copy;
   const [hasStartedOAuth, setHasStartedOAuth] = useState(resumedFromOAuth);
   const [hasSeenActiveState, setHasSeenActiveState] = useState(resumedFromOAuth);
@@ -151,7 +159,14 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
 
       <div className="min-h-40">
         {match(phase)
-          .with("idle", () => <IdleView copy={copy} oauthStartPath={oauthStartPath} onOpened={handleOpened} />)
+          .with("idle", () => (
+            <IdleView
+              copy={copy}
+              oauthStartPath={oauthStartPath}
+              alternateSignIns={alternateSignIns}
+              onOpened={handleOpened}
+            />
+          ))
           .with("awaitingOAuth", () => <AwaitingOAuthView copy={copy} />)
           .with("loadingAccounts", () => <LoadingEntitiesView copy={copy} />)
           .with("pickingAccount", () => (
@@ -161,6 +176,7 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
               selectedIds={selectedIds}
               onToggle={toggleId}
               treeOptions={treeOptions}
+              extras={pickExtras}
             />
           ))
           .with("submitting", () => <SubmittingView copy={copy} />)
@@ -221,11 +237,12 @@ type CopyProps = {
 
 type IdleViewProps = CopyProps & {
   oauthStartPath: string;
+  alternateSignIns?: readonly AlternateSignIn[];
   onOpened: () => void;
 };
 
 function IdleView(props: IdleViewProps) {
-  const { copy, oauthStartPath, onOpened } = props;
+  const { copy, oauthStartPath, alternateSignIns, onOpened } = props;
 
   return (
     <div className="grid gap-4">
@@ -240,6 +257,9 @@ function IdleView(props: IdleViewProps) {
         label={`Continue with ${copy.identityProviderName}`}
         onOpened={onOpened}
       />
+      {alternateSignIns?.map(({ label, href }) => (
+        <OAuthConnectLink key={href} href={href} label={label} variant="secondary" onOpened={onOpened} />
+      ))}
     </div>
   );
 }
@@ -283,10 +303,11 @@ type PickingEntityViewProps = CopyProps & {
   selectedIds: ReadonlySet<string>;
   onToggle: (id: string, checked: boolean) => void;
   treeOptions?: SetupTreeOptions;
+  extras?: ReactNode;
 };
 
 function PickingEntityView(props: PickingEntityViewProps) {
-  const { copy, items, selectedIds, onToggle, treeOptions } = props;
+  const { copy, items, selectedIds, onToggle, treeOptions, extras } = props;
 
   if (!isPresent(items)) {
     return <Banner type="warning" label={copy.noEntitiesLabel} />;
@@ -310,6 +331,7 @@ function PickingEntityView(props: PickingEntityViewProps) {
         searchPlaceholder={`Search ${copy.entityPlural}...`}
         {...treeOptions}
       />
+      {extras}
     </div>
   );
 }

package/src/routes/integrations/components/connect-forms/inferal-locations.ts

@@ -0,0 +1,13 @@
+import { GQLInferalLocation } from "@manta-eu/client";
+
+export const inferalLocationLabels: Readonly<Record<GQLInferalLocation, string>> = {
+  [GQLInferalLocation.Wnam]: "Western North America",
+  [GQLInferalLocation.Enam]: "Eastern North America",
+  [GQLInferalLocation.Sam]: "South America",
+  [GQLInferalLocation.Weur]: "Western Europe",
+  [GQLInferalLocation.Eeur]: "Eastern Europe",
+  [GQLInferalLocation.Apac]: "Asia Pacific",
+  [GQLInferalLocation.Oc]: "Oceania",
+  [GQLInferalLocation.Afr]: "Africa",
+  [GQLInferalLocation.Me]: "Middle East",
+};

package/src/routes/integrations/connect-forms.ts

@@ -14,6 +14,7 @@ export { GoogleAnalyticsConnectForm } from "./components/connect-forms/GoogleAna
 export { KlaviyoConnectForm } from "./components/connect-forms/KlaviyoConnectForm";
 export { LinkedinConnectForm } from "./components/connect-forms/LinkedinConnectForm";
 export { MetaAdsConnectForm } from "./components/connect-forms/MetaAdsConnectForm";
+export { MicrosoftAdsConnectForm } from "./components/connect-forms/MicrosoftAdsConnectForm";
 export { ShopifyConnectForm } from "./components/connect-forms/ShopifyConnectForm";
 export { SlackConnectForm } from "./components/connect-forms/SlackConnectForm";
 export { TriplewhaleConnectForm } from "./components/connect-forms/TriplewhaleConnectForm";
@@ -25,3 +26,4 @@ export {
   type MantaSyncPluginLinkProps,
   type MantaSyncPluginStepProps,
 } from "./components/MantaSyncPluginDownload";
+export { inferalLocationLabels } from "./components/connect-forms/inferal-locations";

package/src/routes/integrations/connection-view.ts

@@ -44,6 +44,7 @@ const oauthAccountNoun = {
   [GQLIntegration.GoogleAnalytics]: "Property",
   [GQLIntegration.Meta]: "Ad account",
   [GQLIntegration.Linkedin]: "Ad account",
+  [GQLIntegration.MicrosoftAds]: "Account",
   [GQLIntegration.Snapchat]: "Ad account",
   [GQLIntegration.Shopify]: "Shop",
   [GQLIntegration.Woocommerce]: "Store",

package/src/routes/plans/components/ActionPlansTableColumns.tsx

@@ -16,6 +16,7 @@ import {
   IntegrationIcon,
   integrationToChannel,
   isTerminalActionPlanState,
+  needsApproval,
   planStateVariant,
   statusLabel,
 } from "#components/planning/plan-detail-utils";
@@ -38,9 +39,9 @@ function planStateLabel(plan: ActionPlan, pendingApprovalCount: number): string
   return match({
     state: plan.state,
     hasCurrentFacts: plan.hasCurrentFacts,
-    hasPendingApproval: pendingApprovalCount > 0,
+    needsApproval: needsApproval(plan.state, pendingApprovalCount),
   })
-    .with({ state: GQLActionPlanState.Running, hasPendingApproval: true }, () => "Needs approval")
+    .with({ needsApproval: true }, () => "Needs approval")
     .with({ state: GQLActionPlanState.Draft, hasCurrentFacts: false }, () => "Not currently executable")
     .with({ state: GQLActionPlanState.Draft }, () => "Ready to launch")
     .otherwise(({ state: matchedState }) => statusLabel(matchedState));