fix: calendly link on schedule a call click, jira and slack integration premium tag (#38331)

Author: Aman Agarwal

app/client/src/constants/PremiumDatasourcesConstants.ts

@@ -15,7 +15,18 @@ export const PREMIUM_INTEGRATIONS: PremiumIntegration[] = [
     name: "Salesforce",
     icon: getAssetUrl(`${ASSETS_CDN_URL}/salesforce-icon.png`),
   },
+  {
+    name: "Slack",
+    icon: getAssetUrl(`${ASSETS_CDN_URL}/slack.png`),
+  },
+  {
+    name: "Jira",
+    icon: getAssetUrl(`${ASSETS_CDN_URL}/jira.png`),
+  },
 ];
 
 export const PREMIUM_INTEGRATION_CONTACT_FORM =
   "PREMIUM_INTEGRATION_CONTACT_FORM";
+
+export const SCHEDULE_CALL_URL =
+  "https://calendly.com/carina-neves-fonseca/appsmith";

app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx

@@ -131,7 +131,6 @@ function CreateNewDatasource({
   active,
   isCreating,
   isOnboardingScreen,
-  isPremiumDatasourcesViewEnabled,
   pageId,
   showMostPopularPlugins,
   showUnsupportedPluginDialog, // TODO: Fix this the next time the file is edited
@@ -172,18 +171,15 @@ function CreateNewDatasource({
         parentEntityType={parentEntityType}
         showMostPopularPlugins={showMostPopularPlugins}
         showUnsupportedPluginDialog={showUnsupportedPluginDialog}
-      >
-        {showMostPopularPlugins && isPremiumDatasourcesViewEnabled && (
-          <PremiumDatasources />
-        )}
-      </NewQueryScreen>
+      />
     </div>
   );
 }
 
 function CreateNewSaasIntegration({
   active,
   isCreating,
+  isPremiumDatasourcesViewEnabled,
   pageId,
   showUnsupportedPluginDialog, // TODO: Fix this the next time the file is edited
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -217,7 +213,9 @@ function CreateNewSaasIntegration({
           pageId={pageId}
           showSaasAPIs
           showUnsupportedPluginDialog={showUnsupportedPluginDialog}
-        />
+        >
+          {isPremiumDatasourcesViewEnabled && <PremiumDatasources />}
+        </NewApiScreen>
       </div>
     </>
   ) : null;
@@ -321,7 +319,6 @@ class CreateNewDatasourceTab extends React.Component<
             active={false}
             isCreating={isCreating}
             isOnboardingScreen={!!isOnboardingScreen}
-            isPremiumDatasourcesViewEnabled={isPremiumDatasourcesViewEnabled}
             location={location}
             pageId={pageId}
             showMostPopularPlugins
@@ -347,6 +344,7 @@ class CreateNewDatasourceTab extends React.Component<
           <CreateNewSaasIntegration
             active={false}
             isCreating={isCreating}
+            isPremiumDatasourcesViewEnabled={isPremiumDatasourcesViewEnabled}
             location={location}
             pageId={pageId}
             showUnsupportedPluginDialog={this.showUnsupportedPluginDialog}

app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx

@@ -295,7 +295,6 @@ class DatasourceHomeScreen extends React.Component<Props> {
               </DatasourceCard>
             );
           })}
-          {this.props.children}
         </DatasourceCardsContainer>
       </DatasourceHomePage>
     );

app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, type ReactNode } from "react";
 import { connect, useSelector } from "react-redux";
 import styled from "styled-components";
 import {
@@ -142,6 +142,7 @@ interface ApiHomeScreenProps {
     apiType: string,
   ) => void;
   isOnboardingScreen?: boolean;
+  children?: ReactNode;
 }
 
 type Props = ApiHomeScreenProps;
@@ -328,6 +329,7 @@ function NewApiScreen(props: Props) {
             </CardContentWrapper>
           </ApiCard>
         ))}
+        {props.children}
       </ApiCardsContainer>
     </StyledContainer>
   );

app/client/src/pages/Editor/IntegrationEditor/NewQuery.tsx

@@ -56,9 +56,7 @@ class QueryHomeScreen extends React.Component<QueryHomeScreenProps> {
           parentEntityType={parentEntityType}
           showMostPopularPlugins={showMostPopularPlugins}
           showUnsupportedPluginDialog={showUnsupportedPluginDialog}
-        >
-          {this.props.children}
-        </DataSourceHome>
+        />
       </QueryHomePage>
     );
   }

app/client/src/pages/Editor/IntegrationEditor/PremiumDatasources/ContactForm.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, ModalHeader, Text, toast } from "@appsmith/ads";
+import { Button, ModalFooter, ModalHeader, Text, toast } from "@appsmith/ads";
 import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages";
 import type { AppState } from "ee/reducers";
 import React, { useCallback } from "react";
@@ -97,7 +97,7 @@ const PremiumDatasourceContactForm = (
           size="md"
           type="email"
         />
-        <Flex gap="spaces-7" justifyContent="flex-end" marginTop="spaces-3">
+        <ModalFooter>
           {shouldLearnMoreButtonBeVisible(!isFreePlanInstance) && (
             <Button
               aria-label="Learn more"
@@ -114,7 +114,7 @@ const PremiumDatasourceContactForm = (
               !isFreePlanInstance,
             )}
           </Button>
-        </Flex>
+        </ModalFooter>
       </FormWrapper>
     </>
   );

app/client/src/utils/PremiumDatasourcesHelpers.ts

@@ -1,3 +1,4 @@
+import { SCHEDULE_CALL_URL } from "constants/PremiumDatasourcesConstants";
 import { createMessage, PREMIUM_DATASOURCES } from "ee/constants/messages";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import { isRelevantEmail } from "utils/formhelpers";
@@ -58,6 +59,15 @@ export const handleSubmitEvent = (
       email,
     },
   );
+
+  const scheduleACallUrl =
+    !isBusinessOrEnterprise && validRelevantEmail
+      ? `${SCHEDULE_CALL_URL}?email=${email}`
+      : "";
+
+  if (scheduleACallUrl) {
+    window.open(scheduleACallUrl, "_blank");
+  }
 };
 
 export const getContactFormModalTitle = (