From d0f69334c9be7ec2e7cae3c66dc1626b8ebdee09 Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Mon, 2 Dec 2024 16:37:25 +0000
Subject: [PATCH 01/11] generate link to action network api page settings from
 group slug and only show api key field once this link has been generated

---
 .../connect/[externalDataSourceType]/page.tsx | 66 ++++++++++---------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
index e4c183ac2..17a0d3206 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
@@ -982,8 +982,13 @@ export default function Page({
       </div>
     )
   }
-
   if (externalDataSourceType === 'actionnetwork') {
+    const groupSlug = form.watch('actionnetwork.groupSlug')
+    const actionNetworkApiUrl = groupSlug
+      ? `${groupSlug.replace(/\/manage$/, '')}/apis`
+      : ''
+    const showApiKeyField = !!groupSlug
+
     return (
       <div className="space-y-7">
         <header>
@@ -992,7 +997,7 @@ export default function Page({
           </h1>
           <p className="mt-6 text-meepGray-400 max-w-lg">
             In order to send data across to your Action Network instance, we
-            {"'"}ll need a few details that gives us permission to make updates
+            {"'"}ll need a few details that give us permission to make updates
             to your members.
           </p>
         </header>
@@ -1024,33 +1029,35 @@ export default function Page({
                 </FormItem>
               )}
             />
-            <FormField
-              control={form.control}
-              name="actionnetwork.apiKey"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Action Network API key</FormLabel>
-                  <FormControl>
-                    {/* @ts-ignore */}
-                    <Input placeholder="52b...bce" {...field} required />
-                  </FormControl>
-                  <FormDescription>
-                    Your API keys and sync features can be managed from the{' '}
-                    {'"'}API & Sync{'"'} link available in the {'"'}Start
-                    Organizing{'"'} menu.
-                    <a
-                      className="underline"
-                      target="_blank"
-                      href="https://actionnetwork.org/docs/"
-                    >
-                      Read more.
-                    </a>
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
+            {groupSlug && (
+              <p className="text-meepGray-400">
+                Use the following link to access your API key settings:
+                <a
+                  href={actionNetworkApiUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline ml-2"
+                >
+                  {actionNetworkApiUrl}
+                </a>
+              </p>
+            )}
+            {showApiKeyField && (
+              <FormField
+                control={form.control}
+                name="actionnetwork.apiKey"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Action Network API key</FormLabel>
+                    <FormControl>
+                      {/* @ts-ignore */}
+                      <Input placeholder="52b...bce" {...field} required />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
             <div className="flex flex-row gap-x-4">
               <Button
                 variant="outline"
@@ -1074,7 +1081,6 @@ export default function Page({
       </div>
     )
   }
-
   if (externalDataSourceType === 'editablegooglesheets') {
     const redirectSuccessUrl = form.watch(
       'editablegooglesheets.redirectSuccessUrl'

From 115f919e6459924505cede043194ed9ca4527001 Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Mon, 2 Dec 2024 17:48:36 +0000
Subject: [PATCH 02/11] add utility function to format CRM names before we
 render them

---
 nextjs/src/lib/utils.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/nextjs/src/lib/utils.ts b/nextjs/src/lib/utils.ts
index d32b0fe65..46c01e0ab 100644
--- a/nextjs/src/lib/utils.ts
+++ b/nextjs/src/lib/utils.ts
@@ -4,3 +4,10 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function capitalizeWords(input: string): string {
+  return input
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}

From 4fad4dac4e52a7c807b0ac2bf075e91c08349a11 Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Mon, 2 Dec 2024 17:51:23 +0000
Subject: [PATCH 03/11] update CRM to specific data source name when we have it

---
 .../create/configure/[externalDataSourceId]/page.tsx | 12 ++++++++----
 .../create/review/[externalDataSourceId]/page.tsx    |  8 +++++++-
 nextjs/src/components/UpdateMappingForm.tsx          |  5 +++--
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx
index 77910b74b..af9c295f7 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx
@@ -17,6 +17,7 @@ import { Button } from '@/components/ui/button'
 import { LoadingIcon } from '@/components/ui/loadingIcon'
 import { UPDATE_EXTERNAL_DATA_SOURCE } from '@/lib/graphql/mutations'
 import { triggerAnalyticsEvent } from '@/lib/posthogutils'
+import { capitalizeWords } from '@/lib/utils'
 
 import { CreateAutoUpdateFormContext } from '../../NewExternalDataSourceWrapper'
 
@@ -135,10 +136,13 @@ export default function Page({
           Now configure how you{"'"}d like data to be updated
         </h1>
         <p className="mt-6 text-meepGray-400 max-w-sm">
-          Choose from the following data sources to enhance your CRM with data
-          that empower you organisation. For geographic data, we need to know
-          which field has the postcode so we can make sure you are getting
-          accurate data.
+          Choose from the following data sources to enhance your{' '}
+          {capitalizeWords(
+            externalDataSource.data?.externalDataSource.crmType || 'CRM'
+          )}{' '}
+          with data that empowers your organisation. For geographic data, we
+          need to know which field has the postcode so we can make sure you are
+          getting accurate data.
         </p>
       </header>
       {externalDataSource.data ? (
diff --git a/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx
index d7ac35b9d..92811d2ed 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx
@@ -16,6 +16,7 @@ import {
 } from '@/components/ExternalDataSourceCard'
 import { Button } from '@/components/ui/button'
 import { LoadingIcon } from '@/components/ui/loadingIcon'
+import { capitalizeWords } from '@/lib/utils'
 
 import { CreateAutoUpdateFormContext } from '../../NewExternalDataSourceWrapper'
 
@@ -106,9 +107,14 @@ export default function Page({
                   <code className="bg-black p-2 rounded">
                     {pageQuery.data.externalDataSource.webhookUrl}
                   </code>
+
                   <p>
                     Turn the below switches on once you have added the above
-                    Webhook URL to your CRM and enabled it.
+                    Webhook URL to your{' '}
+                    {capitalizeWords(
+                      pageQuery.data?.externalDataSource.crmType || 'CRM'
+                    )}{' '}
+                    and enabled it.
                   </p>
                 </div>
               </li>
diff --git a/nextjs/src/components/UpdateMappingForm.tsx b/nextjs/src/components/UpdateMappingForm.tsx
index 91cbdab4c..3f5064097 100644
--- a/nextjs/src/components/UpdateMappingForm.tsx
+++ b/nextjs/src/components/UpdateMappingForm.tsx
@@ -33,6 +33,7 @@ import {
 } from '@/components/ui/select'
 import { locationTypeOptions } from '@/lib/location'
 import { currentOrganisationIdAtom } from '@/lib/organisation'
+import { capitalizeWords } from '@/lib/utils'
 
 import { DataSourceFieldLabel } from './DataSourceIcon'
 
@@ -329,8 +330,8 @@ export function UpdateMappingForm({
                   size="sm"
                   className="my-2"
                 >
-                  <Plus className="w-4 h-4" /> Add data to another field in your
-                  CRM
+                  <Plus className="w-4 h-4" /> Add data to another field in your{' '}
+                  {capitalizeWords(crmType || 'CRM')}{' '}
                 </Button>
               </>
             )}

From ebae1a43ffd19513ce6f11c501e0dfce2895383b Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Mon, 2 Dec 2024 18:42:31 +0000
Subject: [PATCH 04/11] two more instances of update CRM to specific data
 source name when we have it

---
 .../create/connect/[externalDataSourceType]/page.tsx        | 6 ++++--
 .../[externalDataSourceId]/InspectExternalDataSource.tsx    | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
index 17a0d3206..12bf3cf3a 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
@@ -47,6 +47,7 @@ import {
 import { locationTypeOptions } from '@/lib/location'
 import { currentOrganisationIdAtom } from '@/lib/organisation'
 import { toastPromise } from '@/lib/toast'
+import { capitalizeWords } from '@/lib/utils'
 
 import { CreateAutoUpdateFormContext } from '../../NewExternalDataSourceWrapper'
 
@@ -734,8 +735,9 @@ export default function Page({
       <div className="space-y-6">
         <h1 className="text-hLg">Testing connection...</h1>
         <p className="text-meepGray-400 max-w-lg">
-          Please wait whilst we try to connect to your CRM using the information
-          you provided
+          Please wait whilst we try to connect to your{' '}
+          {capitalizeWords(externalDataSourceType || 'CRM')} using the
+          information you provided
         </p>
         <LoadingIcon />
       </div>
diff --git a/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx b/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
index 948381d34..f29b7cceb 100644
--- a/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
@@ -49,6 +49,7 @@ import { externalDataSourceOptions } from '@/lib/data'
 import { UPDATE_EXTERNAL_DATA_SOURCE } from '@/lib/graphql/mutations'
 import { contentEditableMutation } from '@/lib/html'
 import { currentOrganisationIdAtom } from '@/lib/organisation'
+import { capitalizeWords } from '@/lib/utils'
 
 import { ManageSourceSharing } from './ManageSourceSharing'
 import importData from './importData'
@@ -334,7 +335,8 @@ export default function InspectExternalDataSource({
                       </code>
                       <p>
                         Turn this switch on once you have added the above
-                        Webhook URL to your CRM:
+                        Webhook URL to your{' '}
+                        {capitalizeWords(source.crmType || 'CRM')}
                       </p>
                       <EnableWebhooksSwitch
                         externalDataSource={source}

From 7c0ad679e5418cd1bc0e1954e3d0ded3dc996bae Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Wed, 4 Dec 2024 16:25:48 +0000
Subject: [PATCH 05/11] update capitalise words function with format CRM
 function - using switch statement to account for CRM names that are one word
 strings

---
 .../configure/[externalDataSourceId]/page.tsx |  4 ++--
 .../connect/[externalDataSourceType]/page.tsx |  4 ++--
 .../review/[externalDataSourceId]/page.tsx    |  4 ++--
 .../InspectExternalDataSource.tsx             |  4 ++--
 nextjs/src/components/UpdateMappingForm.tsx   |  4 ++--
 nextjs/src/lib/utils.ts                       | 21 +++++++++++++------
 6 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx
index af9c295f7..aeb37123c 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx
@@ -17,7 +17,7 @@ import { Button } from '@/components/ui/button'
 import { LoadingIcon } from '@/components/ui/loadingIcon'
 import { UPDATE_EXTERNAL_DATA_SOURCE } from '@/lib/graphql/mutations'
 import { triggerAnalyticsEvent } from '@/lib/posthogutils'
-import { capitalizeWords } from '@/lib/utils'
+import { formatCrmNames } from '@/lib/utils'
 
 import { CreateAutoUpdateFormContext } from '../../NewExternalDataSourceWrapper'
 
@@ -137,7 +137,7 @@ export default function Page({
         </h1>
         <p className="mt-6 text-meepGray-400 max-w-sm">
           Choose from the following data sources to enhance your{' '}
-          {capitalizeWords(
+          {formatCrmNames(
             externalDataSource.data?.externalDataSource.crmType || 'CRM'
           )}{' '}
           with data that empowers your organisation. For geographic data, we
diff --git a/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
index 12bf3cf3a..398444087 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
@@ -47,7 +47,7 @@ import {
 import { locationTypeOptions } from '@/lib/location'
 import { currentOrganisationIdAtom } from '@/lib/organisation'
 import { toastPromise } from '@/lib/toast'
-import { capitalizeWords } from '@/lib/utils'
+import { formatCrmNames } from '@/lib/utils'
 
 import { CreateAutoUpdateFormContext } from '../../NewExternalDataSourceWrapper'
 
@@ -736,7 +736,7 @@ export default function Page({
         <h1 className="text-hLg">Testing connection...</h1>
         <p className="text-meepGray-400 max-w-lg">
           Please wait whilst we try to connect to your{' '}
-          {capitalizeWords(externalDataSourceType || 'CRM')} using the
+          {formatCrmNames(externalDataSourceType || 'CRM')} using the
           information you provided
         </p>
         <LoadingIcon />
diff --git a/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx
index 92811d2ed..d5a4076e4 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx
@@ -16,7 +16,7 @@ import {
 } from '@/components/ExternalDataSourceCard'
 import { Button } from '@/components/ui/button'
 import { LoadingIcon } from '@/components/ui/loadingIcon'
-import { capitalizeWords } from '@/lib/utils'
+import { formatCrmNames } from '@/lib/utils'
 
 import { CreateAutoUpdateFormContext } from '../../NewExternalDataSourceWrapper'
 
@@ -111,7 +111,7 @@ export default function Page({
                   <p>
                     Turn the below switches on once you have added the above
                     Webhook URL to your{' '}
-                    {capitalizeWords(
+                    {formatCrmNames(
                       pageQuery.data?.externalDataSource.crmType || 'CRM'
                     )}{' '}
                     and enabled it.
diff --git a/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx b/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
index f29b7cceb..eaaaaef0f 100644
--- a/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
@@ -49,7 +49,7 @@ import { externalDataSourceOptions } from '@/lib/data'
 import { UPDATE_EXTERNAL_DATA_SOURCE } from '@/lib/graphql/mutations'
 import { contentEditableMutation } from '@/lib/html'
 import { currentOrganisationIdAtom } from '@/lib/organisation'
-import { capitalizeWords } from '@/lib/utils'
+import { formatCrmNames } from '@/lib/utils'
 
 import { ManageSourceSharing } from './ManageSourceSharing'
 import importData from './importData'
@@ -336,7 +336,7 @@ export default function InspectExternalDataSource({
                       <p>
                         Turn this switch on once you have added the above
                         Webhook URL to your{' '}
-                        {capitalizeWords(source.crmType || 'CRM')}
+                        {formatCrmNames(source.crmType || 'CRM')}
                       </p>
                       <EnableWebhooksSwitch
                         externalDataSource={source}
diff --git a/nextjs/src/components/UpdateMappingForm.tsx b/nextjs/src/components/UpdateMappingForm.tsx
index 3f5064097..777561185 100644
--- a/nextjs/src/components/UpdateMappingForm.tsx
+++ b/nextjs/src/components/UpdateMappingForm.tsx
@@ -33,7 +33,7 @@ import {
 } from '@/components/ui/select'
 import { locationTypeOptions } from '@/lib/location'
 import { currentOrganisationIdAtom } from '@/lib/organisation'
-import { capitalizeWords } from '@/lib/utils'
+import { formatCrmNames } from '@/lib/utils'
 
 import { DataSourceFieldLabel } from './DataSourceIcon'
 
@@ -331,7 +331,7 @@ export function UpdateMappingForm({
                   className="my-2"
                 >
                   <Plus className="w-4 h-4" /> Add data to another field in your{' '}
-                  {capitalizeWords(crmType || 'CRM')}{' '}
+                  {formatCrmNames(crmType || 'CRM')}{' '}
                 </Button>
               </>
             )}
diff --git a/nextjs/src/lib/utils.ts b/nextjs/src/lib/utils.ts
index a1eea3c74..6fc92d691 100644
--- a/nextjs/src/lib/utils.ts
+++ b/nextjs/src/lib/utils.ts
@@ -4,10 +4,19 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-
-export function capitalizeWords(input: string): string {
-  return input
-    .split(' ')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
+export function formatCrmNames(input: string): string {
+  switch (input.toLowerCase()) {
+    case 'actionnetwork':
+      return 'Action Network'
+    case 'editablegooglesheets':
+      return 'Editable Google Sheets'
+    case 'tickettailor':
+      return 'Ticket Tailor'
+    case 'airtable':
+      return 'Airtable'
+    case 'mailchimp':
+      return 'Mailchimp'
+    default:
+      return 'CRM'
+  }
 }

From ed63da991be58506f8654e3c841c73cd196cd5c6 Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Wed, 4 Dec 2024 16:44:45 +0000
Subject: [PATCH 06/11] correct the actionNetworkApiUrl link

---
 .../create/connect/[externalDataSourceType]/page.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
index 398444087..23b63b3ab 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/connect/[externalDataSourceType]/page.tsx
@@ -987,7 +987,7 @@ export default function Page({
   if (externalDataSourceType === 'actionnetwork') {
     const groupSlug = form.watch('actionnetwork.groupSlug')
     const actionNetworkApiUrl = groupSlug
-      ? `${groupSlug.replace(/\/manage$/, '')}/apis`
+      ? `https://actionnetwork.org/groups/${groupSlug}/apis`
       : ''
     const showApiKeyField = !!groupSlug
 

From 042e7181c08d67150ecaf3e3989e5ae3b0b026dd Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Wed, 4 Dec 2024 16:53:43 +0000
Subject: [PATCH 07/11] change data layers to data sources in new external data
 onboarding

---
 .../data-sources/create/NewExternalDataSourceWrapper.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nextjs/src/app/(logged-in)/data-sources/create/NewExternalDataSourceWrapper.tsx b/nextjs/src/app/(logged-in)/data-sources/create/NewExternalDataSourceWrapper.tsx
index 8d5fa8195..e1f95782e 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/NewExternalDataSourceWrapper.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/NewExternalDataSourceWrapper.tsx
@@ -54,7 +54,7 @@ export default function NewExternalDataSourceWrapper({
                 step > 3 ? 'completed' : step === 3 ? 'active' : 'disabled'
               }
             >
-              Select data layers
+              Select data sources
             </Step>
             <Step number={4} state={step === 4 ? 'active' : 'disabled'}>
               Activate sync

From b435c784b2d3aeb24aa31856979ac258a50d5ec8 Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Wed, 4 Dec 2024 17:12:41 +0000
Subject: [PATCH 08/11] put specific CRM name into trigger update button

---
 .../InspectExternalDataSource.tsx                     | 11 +++++++----
 nextjs/src/components/ExternalDataSourceCard.tsx      |  8 ++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx b/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
index eaaaaef0f..52a5b3313 100644
--- a/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
@@ -436,7 +436,10 @@ export default function InspectExternalDataSource({
                     </p>
                     <div className="space-y-4">
                       {!source.isUpdateScheduled ? (
-                        <TriggerUpdateButton id={source.id} />
+                        <TriggerUpdateButton
+                          id={source.id}
+                          crmType={source.crmType}
+                        />
                       ) : (
                         <>
                           <Button disabled>
@@ -469,15 +472,15 @@ export default function InspectExternalDataSource({
                         {source.autoUpdateEnabled ? 'enabled' : 'disabled'} for
                         this data source. Mapped can automatically update this
                         data source based on the mapping you{"'"}ve defined in
-                        the Data Mapping section.
+                        the data enrichment configuration.
                       </p>
                       {source.connectionDetails.__typename ===
                         'ActionNetworkSource' && (
                         <p className="text-sm text-meepGray-400 text-red-400">
                           Warning: Action Network auto-updates only work for new
                           members, not changes to existing members{"'"} details.
-                          If existing members change, you must trigger a full
-                          update using the button on the left.
+                          If you are chaning existing members you must trigger a
+                          full update using the button on the left.
                         </p>
                       )}
                       {source.automatedWebhooks ? (
diff --git a/nextjs/src/components/ExternalDataSourceCard.tsx b/nextjs/src/components/ExternalDataSourceCard.tsx
index 3bd29c98b..31842457b 100644
--- a/nextjs/src/components/ExternalDataSourceCard.tsx
+++ b/nextjs/src/components/ExternalDataSourceCard.tsx
@@ -36,6 +36,7 @@ import {
 } from '@/components/ui/alert-dialog'
 import { Switch } from '@/components/ui/switch'
 
+import { formatCrmNames } from '@/lib/utils'
 import { DataSourceIcon } from './DataSourceIcon'
 import { Button, ButtonProps, buttonVariants } from './ui/button'
 
@@ -188,10 +189,12 @@ export function WebhookRefresh({
 
 export function TriggerUpdateButton({
   id,
+  crmType,
   label = 'Enrich all data now',
   ...buttonProps
 }: {
   id: string
+  crmType?: string
   label?: string
 } & ButtonProps) {
   const client = useApolloClient()
@@ -207,8 +210,9 @@ export function TriggerUpdateButton({
         <AlertDialogHeader>
           <AlertDialogTitle>Trigger a full update</AlertDialogTitle>
           <AlertDialogDescription className="text-base">
-            This will update all records in the CRM. Depending on the size of
-            your CRM, this may take a while.
+            This will update all records in the{' '}
+            {formatCrmNames(crmType || 'CRM')}. Depending on your{' '}
+            {formatCrmNames(crmType || 'CRM')}, this may take a while.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>

From e52c0f8babf0bcca0843fcedd36139168b3690c5 Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Wed, 4 Dec 2024 17:57:13 +0000
Subject: [PATCH 09/11] change membership data sources header to membership
 lists

---
 .../src/app/(logged-in)/data-sources/ExternalDataSourceList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nextjs/src/app/(logged-in)/data-sources/ExternalDataSourceList.tsx b/nextjs/src/app/(logged-in)/data-sources/ExternalDataSourceList.tsx
index a94254ec7..7da29bd25 100644
--- a/nextjs/src/app/(logged-in)/data-sources/ExternalDataSourceList.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/ExternalDataSourceList.tsx
@@ -96,7 +96,7 @@ export default function ExternalDataSourceList() {
       <PageHeader />
       <div className="border-b border-meepGray-700 pt-10" />
       <header className="flex flex-row justify-end">
-        <h2 className="text-hMd mr-auto">Membership data sources</h2>
+        <h2 className="text-hMd mr-auto">Membership lists</h2>
       </header>
       <p className="text-meepGray-400">
         Add your membership lists here. You will then be able to:

From 8cf0de36f469cb4ad620ea7d455f8c088ffeaa7f Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Wed, 4 Dec 2024 17:58:09 +0000
Subject: [PATCH 10/11] git commit -m update generic CRM with specific CRM type
 where possible

---
 .../InspectExternalDataSource.tsx             | 26 ++++++++++---------
 .../src/components/ExternalDataSourceCard.tsx |  2 +-
 nextjs/src/components/SelectSourceData.tsx    |  6 ++++-
 nextjs/src/components/UpdateMappingForm.tsx   |  1 +
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx b/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
index 52a5b3313..a88d9cee5 100644
--- a/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
@@ -256,9 +256,10 @@ export default function InspectExternalDataSource({
                 {format(',')(source.importedDataCount || 0)}
               </div>
               <p className="text-meepGray-400">
-                Import data from this source into Mapped for use in reports
+                Import data from this {formatCrmNames(source.crmType)} into
+                Mapped for use in reports
                 {dataType !== DataSourceType.Member
-                  ? ', and to enrich membership lists'
+                  ? ' and to enrich membership lists'
                   : ''}
                 .
               </p>
@@ -293,7 +294,7 @@ export default function InspectExternalDataSource({
                   <p className="text-sm text-meepGray-400">
                     Auto-imports are{' '}
                     {source.autoImportEnabled ? 'enabled' : 'disabled'} for this
-                    data source.
+                    {source.crmType}.
                   </p>
                   {source.connectionDetails.__typename ===
                     'ActionNetworkSource' && (
@@ -424,8 +425,8 @@ export default function InspectExternalDataSource({
                     <h2 className="text-hMd mb-5">Enrich your original data</h2>
                     <p className="text-meepGray-400">
                       <span className="align-middle">
-                        Pull Mapped data into your original{' '}
-                        {crmInfo?.name || 'data source'}, based on the record
+                        Pull Mapped data into your{' '}
+                        {crmInfo?.name || 'data source'} based on each record
                         {"'"}s
                       </span>
                       <DataSourceFieldLabel
@@ -470,17 +471,18 @@ export default function InspectExternalDataSource({
                       <p className="text-sm text-meepGray-400">
                         Auto-updates are{' '}
                         {source.autoUpdateEnabled ? 'enabled' : 'disabled'} for
-                        this data source. Mapped can automatically update this
-                        data source based on the mapping you{"'"}ve defined in
-                        the data enrichment configuration.
+                        this {formatCrmNames(source.crmType)}. Select this to
+                        allow Mapped to automatically update this{' '}
+                        {formatCrmNames(source.crmType)} based on the fields you
+                        selected in Data Enrichment Settings.
                       </p>
                       {source.connectionDetails.__typename ===
                         'ActionNetworkSource' && (
                         <p className="text-sm text-meepGray-400 text-red-400">
                           Warning: Action Network auto-updates only work for new
                           members, not changes to existing members{"'"} details.
-                          If you are chaning existing members you must trigger a
-                          full update using the button on the left.
+                          If you are changing existing members you must trigger
+                          a full update using the button on the left.
                         </p>
                       )}
                       {source.automatedWebhooks ? (
@@ -536,11 +538,11 @@ export default function InspectExternalDataSource({
                   )}
                 </header>
                 <h2 className="text-hSm !mt-8 my-5">
-                  Configure data enrichment
+                  Data Enrichment Settings
                 </h2>
                 <p className="mt-1 text-meepGray-400 text-sm">
                   Use the 'Enrich' button above to re-run the enrichment process
-                  after changing this configuration.
+                  after changing these settings.
                 </p>
                 <UpdateMappingForm
                   allowMapping={allowMapping}
diff --git a/nextjs/src/components/ExternalDataSourceCard.tsx b/nextjs/src/components/ExternalDataSourceCard.tsx
index 31842457b..65bfd4896 100644
--- a/nextjs/src/components/ExternalDataSourceCard.tsx
+++ b/nextjs/src/components/ExternalDataSourceCard.tsx
@@ -212,7 +212,7 @@ export function TriggerUpdateButton({
           <AlertDialogDescription className="text-base">
             This will update all records in the{' '}
             {formatCrmNames(crmType || 'CRM')}. Depending on your{' '}
-            {formatCrmNames(crmType || 'CRM')}, this may take a while.
+            {formatCrmNames(crmType || 'CRM')} this may take a while.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
diff --git a/nextjs/src/components/SelectSourceData.tsx b/nextjs/src/components/SelectSourceData.tsx
index 9ab6d2ab2..3a0d9c2c8 100644
--- a/nextjs/src/components/SelectSourceData.tsx
+++ b/nextjs/src/components/SelectSourceData.tsx
@@ -17,6 +17,7 @@ import {
 import { SourcePath } from '@/lib/data'
 import useFuse from '@/lib/hooks/filter'
 import { currentOrganisationIdAtom } from '@/lib/organisation'
+import { formatCrmNames } from '@/lib/utils'
 
 import { CRMSelection } from './CRMButtonItem'
 import { DataSourceFieldLabel, DataSourceIcon } from './DataSourceIcon'
@@ -30,6 +31,7 @@ export function SourcePathSelector({
   loading,
   value,
   setValue,
+  crmType,
   focusOnMount = false,
 }: {
   sources: Array<Source>
@@ -39,6 +41,7 @@ export function SourcePathSelector({
     source: AutoUpdateConfig['source'],
     sourcePath: AutoUpdateConfig['sourcePath']
   ) => void
+  crmType?: string
   focusOnMount?: boolean
 }) {
   const [open, setOpen] = React.useState(focusOnMount)
@@ -101,7 +104,8 @@ export function SourcePathSelector({
           <DialogHeader className="col-span-4">
             <DialogTitle>Data sources</DialogTitle>
             <DialogDescription>
-              Pick a data source and a field to import to your membership list.
+              Pick a data source and a field to import to your{' '}
+              {formatCrmNames(crmType || 'CRM')}
             </DialogDescription>
           </DialogHeader>
           {loading ? (
diff --git a/nextjs/src/components/UpdateMappingForm.tsx b/nextjs/src/components/UpdateMappingForm.tsx
index 777561185..9579a1a60 100644
--- a/nextjs/src/components/UpdateMappingForm.tsx
+++ b/nextjs/src/components/UpdateMappingForm.tsx
@@ -228,6 +228,7 @@ export function UpdateMappingForm({
                             <X className="w-3 h-3" />
                           </Button>
                           <SourcePathSelector
+                            crmType={crmType}
                             focusOnMount={
                               form.watch(`updateMapping.${index}.source`) ===
                               '?'

From 3aabc8d58307509818c8996fac5a27da8cdf28c9 Mon Sep 17 00:00:00 2001
From: root <acunnane13@gmail.com>
Date: Mon, 9 Dec 2024 11:48:13 +0000
Subject: [PATCH 11/11] update default text from CRM to database

---
 .../create/configure/[externalDataSourceId]/page.tsx      | 2 +-
 .../create/review/[externalDataSourceId]/page.tsx         | 2 +-
 .../[externalDataSourceId]/InspectExternalDataSource.tsx  | 8 ++++----
 nextjs/src/components/ExternalDataSourceCard.tsx          | 4 ++--
 nextjs/src/components/SelectSourceData.tsx                | 2 +-
 nextjs/src/components/UpdateMappingForm.tsx               | 2 +-
 nextjs/src/lib/utils.ts                                   | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx
index aeb37123c..4363735c4 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/configure/[externalDataSourceId]/page.tsx
@@ -138,7 +138,7 @@ export default function Page({
         <p className="mt-6 text-meepGray-400 max-w-sm">
           Choose from the following data sources to enhance your{' '}
           {formatCrmNames(
-            externalDataSource.data?.externalDataSource.crmType || 'CRM'
+            externalDataSource.data?.externalDataSource.crmType || 'database'
           )}{' '}
           with data that empowers your organisation. For geographic data, we
           need to know which field has the postcode so we can make sure you are
diff --git a/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx b/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx
index d5a4076e4..4d0c74481 100644
--- a/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/create/review/[externalDataSourceId]/page.tsx
@@ -112,7 +112,7 @@ export default function Page({
                     Turn the below switches on once you have added the above
                     Webhook URL to your{' '}
                     {formatCrmNames(
-                      pageQuery.data?.externalDataSource.crmType || 'CRM'
+                      pageQuery.data?.externalDataSource.crmType || 'database'
                     )}{' '}
                     and enabled it.
                   </p>
diff --git a/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx b/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
index a88d9cee5..fbc7ea36c 100644
--- a/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
+++ b/nextjs/src/app/(logged-in)/data-sources/inspect/[externalDataSourceId]/InspectExternalDataSource.tsx
@@ -337,7 +337,7 @@ export default function InspectExternalDataSource({
                       <p>
                         Turn this switch on once you have added the above
                         Webhook URL to your{' '}
-                        {formatCrmNames(source.crmType || 'CRM')}
+                        {formatCrmNames(source.crmType || 'database')}
                       </p>
                       <EnableWebhooksSwitch
                         externalDataSource={source}
@@ -425,8 +425,8 @@ export default function InspectExternalDataSource({
                     <h2 className="text-hMd mb-5">Enrich your original data</h2>
                     <p className="text-meepGray-400">
                       <span className="align-middle">
-                        Pull Mapped data into your{' '}
-                        {crmInfo?.name || 'data source'} based on each record
+                        Pull Mapped data into your {crmInfo?.name || 'database'}{' '}
+                        based on each record
                         {"'"}s
                       </span>
                       <DataSourceFieldLabel
@@ -516,7 +516,7 @@ export default function InspectExternalDataSource({
                           </code>
                           <p>
                             Turn this switch on once you have added the above
-                            Webhook URL to your CRM:
+                            Webhook URL to your database:
                           </p>
                           <EnableWebhooksSwitch
                             externalDataSource={source}
diff --git a/nextjs/src/components/ExternalDataSourceCard.tsx b/nextjs/src/components/ExternalDataSourceCard.tsx
index 65bfd4896..20e3c9f46 100644
--- a/nextjs/src/components/ExternalDataSourceCard.tsx
+++ b/nextjs/src/components/ExternalDataSourceCard.tsx
@@ -211,8 +211,8 @@ export function TriggerUpdateButton({
           <AlertDialogTitle>Trigger a full update</AlertDialogTitle>
           <AlertDialogDescription className="text-base">
             This will update all records in the{' '}
-            {formatCrmNames(crmType || 'CRM')}. Depending on your{' '}
-            {formatCrmNames(crmType || 'CRM')} this may take a while.
+            {formatCrmNames(crmType || 'database')}. Depending on your{' '}
+            {formatCrmNames(crmType || 'database')} this may take a while.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
diff --git a/nextjs/src/components/SelectSourceData.tsx b/nextjs/src/components/SelectSourceData.tsx
index 3a0d9c2c8..00cd18500 100644
--- a/nextjs/src/components/SelectSourceData.tsx
+++ b/nextjs/src/components/SelectSourceData.tsx
@@ -105,7 +105,7 @@ export function SourcePathSelector({
             <DialogTitle>Data sources</DialogTitle>
             <DialogDescription>
               Pick a data source and a field to import to your{' '}
-              {formatCrmNames(crmType || 'CRM')}
+              {formatCrmNames(crmType || 'database')}
             </DialogDescription>
           </DialogHeader>
           {loading ? (
diff --git a/nextjs/src/components/UpdateMappingForm.tsx b/nextjs/src/components/UpdateMappingForm.tsx
index 9579a1a60..fbbaee7e3 100644
--- a/nextjs/src/components/UpdateMappingForm.tsx
+++ b/nextjs/src/components/UpdateMappingForm.tsx
@@ -332,7 +332,7 @@ export function UpdateMappingForm({
                   className="my-2"
                 >
                   <Plus className="w-4 h-4" /> Add data to another field in your{' '}
-                  {formatCrmNames(crmType || 'CRM')}{' '}
+                  {formatCrmNames(crmType || 'database')}{' '}
                 </Button>
               </>
             )}
diff --git a/nextjs/src/lib/utils.ts b/nextjs/src/lib/utils.ts
index 6fc92d691..a4af4ceba 100644
--- a/nextjs/src/lib/utils.ts
+++ b/nextjs/src/lib/utils.ts
@@ -17,6 +17,6 @@ export function formatCrmNames(input: string): string {
     case 'mailchimp':
       return 'Mailchimp'
     default:
-      return 'CRM'
+      return 'database'
   }
 }