chore: Add create product link in survey editor (#2937)

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/HowToSendCard.tsx

@@ -17,10 +17,17 @@ interface HowToSendCardProps {
   localSurvey: TSurvey;
   setLocalSurvey: (survey: TSurvey | ((TSurvey: TSurvey) => TSurvey)) => void;
   environment: TEnvironment;
+  organizationId: string;
   product: TProduct;
 }
 
-export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment, product }: HowToSendCardProps) => {
+export const HowToSendCard = ({
+  localSurvey,
+  setLocalSurvey,
+  environment,
+  product,
+  organizationId,
+}: HowToSendCardProps) => {
   const [open, setOpen] = useState(false);
   const [appSetupCompleted, setAppSetupCompleted] = useState(false);
   const [websiteSetupCompleted, setWebsiteSetupCompleted] = useState(false);
@@ -215,12 +222,18 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment, produc
           </RadioGroup>
         </div>
         {promotedFeaturesString && (
-          <div className="mt-2 flex items-center space-x-3 rounded-b-lg border border-slate-200 bg-slate-50/50 px-4 py-2">
-            <AlertCircleIcon className="h-5 w-5 text-slate-500" />
-            <div className="text-slate-500">
+          <div className="mt-2 flex items-center space-x-3 rounded-b-lg border border-slate-200 bg-slate-100 px-4 py-2">
+            🤓
+            <div className="ml-2 text-slate-500">
               <p className="text-xs">
-                You can also use Formbricks to run {promotedFeaturesString} surveys. Create a new product for
-                your {promotedFeaturesString} to use this feature.
+                You can also use Formbricks to run {promotedFeaturesString} surveys.{" "}
+                <Link
+                  target="_blank"
+                  href={`/organizations/${organizationId}/products/new/channel`}
+                  className="font-medium underline decoration-slate-400 underline-offset-2">
+                  Create a new product
+                </Link>{" "}
+                for your {promotedFeaturesString} to use this feature.
               </p>
             </div>
           </div>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView.tsx

@@ -15,6 +15,7 @@ import { WhenToSendCard } from "./WhenToSendCard";
 
 interface SettingsViewProps {
   environment: TEnvironment;
+  organizationId: string;
   localSurvey: TSurvey;
   setLocalSurvey: (survey: TSurvey) => void;
   actionClasses: TActionClass[];
@@ -29,6 +30,7 @@ interface SettingsViewProps {
 
 export const SettingsView = ({
   environment,
+  organizationId,
   localSurvey,
   setLocalSurvey,
   actionClasses,
@@ -49,6 +51,7 @@ export const SettingsView = ({
         setLocalSurvey={setLocalSurvey}
         environment={environment}
         product={product}
+        organizationId={organizationId}
       />
 
       {localSurvey.type === "app" ? (

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx

@@ -24,6 +24,7 @@ interface SurveyEditorProps {
   survey: TSurvey;
   product: TProduct;
   environment: TEnvironment;
+  organizationId: string;
   actionClasses: TActionClass[];
   attributeClasses: TAttributeClass[];
   segments: TSegment[];
@@ -40,6 +41,7 @@ export const SurveyEditor = ({
   survey,
   product,
   environment,
+  organizationId,
   actionClasses,
   attributeClasses,
   segments,
@@ -185,6 +187,7 @@ export const SurveyEditor = ({
             {activeView === "settings" && (
               <SettingsView
                 environment={environment}
+                organizationId={organizationId}
                 localSurvey={localSurvey}
                 setLocalSurvey={setLocalSurvey}
                 actionClasses={actionClasses}

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/page.tsx

@@ -80,6 +80,7 @@ const Page = async ({ params }) => {
       attributeClasses={attributeClasses}
       responseCount={responseCount}
       membershipRole={currentUserMembership?.role}
+      organizationId={organization.id}
       colors={SURVEY_BG_COLORS}
       segments={segments}
       isUserTargetingAllowed={isUserTargetingAllowed}