feat(dashboard): template store webhook integrations cards MRK-615

apps/dashboard/src/components/icons/integrations/clerk-icon.tsx

@@ -0,0 +1,45 @@
+interface ClerkIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export function ClerkIcon({ className = '', width = 20, height = 20 }: ClerkIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 65 64"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M52.04 8.42874L44.2734 16.1102C44.0294 16.3513 43.7105 16.5044 43.3681 16.5449C43.0254 16.5854 42.6792 16.511 42.3845 16.3336C39.3295 14.5107 35.8061 13.6016 32.2399 13.716C28.6736 13.8304 25.2174 14.9635 22.2881 16.9783C20.4866 18.2186 18.9223 19.7658 17.6683 21.5476C15.6335 24.4465 14.489 27.8651 14.3725 31.3923C14.2559 34.9195 15.1722 38.4048 17.0112 41.4291C17.1893 41.72 17.2638 42.0613 17.2229 42.3992C17.182 42.7368 17.0279 43.0512 16.7854 43.2922L9.01888 50.9735C8.8625 51.1293 8.67393 51.2498 8.46608 51.3266C8.25826 51.4037 8.0361 51.4351 7.81477 51.4194C7.59344 51.4034 7.3782 51.3405 7.18381 51.2346C6.98939 51.1287 6.82042 50.9826 6.68844 50.8061C2.48628 45.0933 0.314614 38.1653 0.512408 31.1035C0.710202 24.0417 3.26633 17.2432 7.78179 11.7694C9.16032 10.0946 10.7083 8.56352 12.4017 7.20011C17.9357 2.73529 24.8084 0.207898 31.9473 0.0122754C39.0863 -0.183347 46.0898 1.96381 51.8653 6.11871C52.0452 6.24881 52.194 6.4159 52.3018 6.60844C52.4099 6.80097 52.4744 7.01435 52.4911 7.23393C52.5078 7.4535 52.476 7.67403 52.3981 7.88029C52.3202 8.08656 52.198 8.27368 52.04 8.42874Z"
+        fill="url(#clerk_icon_paint0_linear)"
+      />
+      <path
+        d="M52.0318 55.5435L44.2652 47.862C44.0212 47.6209 43.7022 47.4678 43.3598 47.4273C43.0174 47.3868 42.671 47.4612 42.3763 47.6385C39.4957 49.3571 36.1953 50.2657 32.8313 50.2657C29.467 50.2657 26.1667 49.3571 23.286 47.6385C22.9914 47.4612 22.645 47.3868 22.3025 47.4273C21.96 47.4678 21.6411 47.6209 21.3971 47.862L13.6306 55.5435C13.4677 55.6982 13.3413 55.8867 13.2603 56.0952C13.1793 56.3038 13.1457 56.5275 13.1618 56.7504C13.178 56.9734 13.2435 57.1899 13.3538 57.3848C13.4641 57.58 13.6164 57.7486 13.8 57.8787C19.3283 61.8571 25.9893 64 32.8262 64C39.6628 64 46.3237 61.8571 51.8522 57.8787C52.0364 57.7494 52.1895 57.5814 52.3009 57.3867C52.412 57.192 52.4786 56.9758 52.4958 56.7528C52.5128 56.5299 52.4802 56.3059 52.4001 56.0971C52.3198 55.888 52.1941 55.699 52.0318 55.5435Z"
+        fill="#1C0452"
+      />
+      <path
+        d="M32.8472 41.1257C37.9499 41.1257 42.087 37.0342 42.087 31.9871C42.087 26.9402 37.9499 22.8486 32.8472 22.8486C27.7441 22.8486 23.6074 26.9402 23.6074 31.9871C23.6074 37.0342 27.7441 41.1257 32.8472 41.1257Z"
+        fill="#1C0452"
+      />
+      <defs>
+        <linearGradient
+          id="clerk_icon_paint0_linear"
+          x1="52.4013"
+          y1="-2.81345e-06"
+          x2="-0.0607645"
+          y2="50.6185"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#18CCFC" />
+          <stop offset="0.59375" stop-color="#6344F5" />
+          <stop offset="1" stop-color="#AE48FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

apps/dashboard/src/components/icons/integrations/index.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ClerkIcon } from './clerk-icon';
+import { StripeIcon } from './stripe-icon';
+
+export enum IntegrationType {
+  STRIPE = 'stripe',
+  CLERK = 'clerk',
+}
+
+export interface IntegrationIconProps {
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+export interface IntegrationConfig {
+  type: IntegrationType;
+  icon: React.FC<IntegrationIconProps>;
+  displayName: string;
+}
+
+export const INTEGRATIONS: Record<IntegrationType, IntegrationConfig> = {
+  [IntegrationType.STRIPE]: {
+    type: IntegrationType.STRIPE,
+    icon: StripeIcon,
+    displayName: 'Stripe',
+  },
+  [IntegrationType.CLERK]: {
+    type: IntegrationType.CLERK,
+    icon: ClerkIcon,
+    displayName: 'Clerk',
+  },
+};
+
+export function getIntegrationIcon(integrationType: IntegrationType): React.FC<IntegrationIconProps> | null {
+  return INTEGRATIONS[integrationType]?.icon || null;
+}
+
+export function getIntegrationDisplayName(integrationType: IntegrationType): string {
+  return INTEGRATIONS[integrationType]?.displayName || integrationType;
+}
+
+export * from './clerk-icon';
+export * from './stripe-icon';

apps/dashboard/src/components/icons/integrations/stripe-icon.tsx

@@ -0,0 +1,102 @@
+interface StripeIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export function StripeIcon({ className = '', width = 20, height = 20 }: StripeIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M1.79497 3.98005C1.25 5.04961 1.25 6.44974 1.25 9.25V10.75C1.25 13.5503 1.25 14.9504 1.79497 16.02C2.27433 16.9608 3.03924 17.7257 3.98005 18.205C5.04961 18.75 6.44974 18.75 9.25 18.75H10.75C13.5503 18.75 14.9504 18.75 16.02 18.205C16.9608 17.7257 17.7257 16.9608 18.205 16.02C18.75 14.9504 18.75 13.5503 18.75 10.75V9.25C18.75 6.44974 18.75 5.04961 18.205 3.98005C17.7257 3.03924 16.9608 2.27433 16.02 1.79497C14.9504 1.25 13.5503 1.25 10.75 1.25H9.25C6.44974 1.25 5.04961 1.25 3.98005 1.79497C3.03924 2.27433 2.27433 3.03924 1.79497 3.98005Z"
+        fill="url(#stripe_paint0_linear)"
+      />
+      <path
+        d="M1.41576 5.1744C1.25 6.11645 1.25 7.36643 1.25 9.24967V10.7497C1.25 13.5499 1.25 14.9501 1.79497 16.0196C2.27433 16.9604 3.03924 17.7253 3.98005 18.2047C5.04961 18.7497 6.44974 18.7497 9.25 18.7497H10.75C13.5503 18.7497 14.9504 18.7497 16.02 18.2047C16.9608 17.7253 17.7257 16.9604 18.205 16.0196C18.75 14.9501 18.75 13.5499 18.75 10.7497V9.24967C18.75 6.4494 18.75 5.04927 18.205 3.97971C17.7423 3.07164 17.0136 2.32744 16.1175 1.8457L1.41576 5.1744Z"
+        fill="url(#stripe_paint1_linear)"
+      />
+      <path
+        d="M18.569 14.9092C18.4886 15.3315 18.3726 15.6916 18.205 16.0203C17.7257 16.9612 16.9608 17.7261 16.02 18.2054C14.9824 18.7341 13.6338 18.7499 10.9977 18.7504H10.0366V16.7734L18.569 14.9092Z"
+        fill="url(#stripe_paint2_linear)"
+      />
+      <path
+        d="M10.75 1.25H9.24999C8.7052 1.25 8.2134 1.25 7.76672 1.25401V3.73157L16.1159 1.84516C16.0841 1.8281 16.0521 1.81136 16.0199 1.79497C15.4262 1.49243 14.7305 1.35784 13.75 1.29797C12.9643 1.25 11.9957 1.25 10.75 1.25Z"
+        fill="url(#stripe_paint3_linear)"
+      />
+      <path
+        d="M18.75 10.858C18.7499 12.7365 18.7466 13.9747 18.5689 14.9084L15.6014 15.5568V11.1346L18.75 10.4023V10.858Z"
+        fill="url(#stripe_paint4_linear)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.33813 8.36143C9.33813 7.95976 9.66653 7.80527 10.2105 7.80527C10.9904 7.80527 11.9756 8.04215 12.7556 8.46442V6.04408C11.9038 5.7042 11.0622 5.57031 10.2105 5.57031C8.12715 5.57031 6.7417 6.66204 6.7417 8.48502C6.7417 11.3276 10.6415 10.8745 10.6415 12.1001C10.6415 12.5739 10.231 12.7283 9.65627 12.7283C8.80448 12.7283 7.71664 12.3782 6.85459 11.9044V14.3556C7.80901 14.7676 8.77369 14.9427 9.65627 14.9427C11.7909 14.9427 13.2584 13.8819 13.2584 12.0383C13.2482 8.96909 9.33813 9.51495 9.33813 8.36143Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="stripe_paint0_linear"
+          x1="1.25"
+          y1="1.25"
+          x2="6.99791"
+          y2="5.31381"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#392993" />
+          <stop offset="1" stopColor="#4B47B9" />
+        </linearGradient>
+        <linearGradient
+          id="stripe_paint1_linear"
+          x1="1.909"
+          y1="5.35871"
+          x2="14.5979"
+          y2="15.8253"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#594BB9" />
+          <stop offset="1" stopColor="#60A8F2" />
+        </linearGradient>
+        <linearGradient
+          id="stripe_paint2_linear"
+          x1="10.0366"
+          y1="16.8466"
+          x2="18.75"
+          y2="18.7504"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#61A2EF" />
+          <stop offset="1" stopColor="#58E6FD" />
+        </linearGradient>
+        <linearGradient
+          id="stripe_paint3_linear"
+          x1="7.76672"
+          y1="2.49477"
+          x2="18.75"
+          y2="1.25"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#534EBE" />
+          <stop offset="1" stopColor="#6875E2" />
+        </linearGradient>
+        <linearGradient
+          id="stripe_paint4_linear"
+          x1="15.6014"
+          y1="11.1712"
+          x2="18.75"
+          y2="14.9421"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#71A5F3" />
+          <stop offset="1" stopColor="#6CC3FA" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

apps/dashboard/src/components/template-store/components/templates-container.tsx

@@ -0,0 +1,17 @@
+import { WorkflowTemplate } from '../templates/types';
+
+function filterTemplates(templates: WorkflowTemplate[], category: string): WorkflowTemplate[] {
+  if (category === 'popular') {
+    return templates.filter((template) => template.isPopular);
+  }
+
+  if (category === 'stripe') {
+    return templates.filter((template) => template.workflowDefinition.tags?.includes('stripe'));
+  }
+
+  if (category === 'clerk') {
+    return templates.filter((template) => template.workflowDefinition.tags?.includes('clerk'));
+  }
+
+  return templates.filter((template) => template.category === category);
+}

apps/dashboard/src/components/template-store/components/workflow-results.tsx

@@ -25,6 +25,8 @@ export function WorkflowResults({ mode, suggestions, onClick }: WorkflowResultsP
             name={template.name}
             description={template.description || ''}
             steps={template.workflowDefinition.steps.map((step) => step.type)}
+            tags={template.workflowDefinition.tags || []}
+            integration={template.integration}
           />
         );
       })}