Various copy changes

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:

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

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 { formatCrmNames } 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{' '}
+          {formatCrmNames(
+            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 ? (

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 { formatCrmNames } 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{' '}
+          {formatCrmNames(externalDataSourceType || 'CRM')} using the
+          information you provided
         </p>
         <LoadingIcon />
       </div>
@@ -982,8 +984,13 @@ export default function Page({
       </div>
     )
   }
-
   if (externalDataSourceType === 'actionnetwork') {
+    const groupSlug = form.watch('actionnetwork.groupSlug')
+    const actionNetworkApiUrl = groupSlug
+      ? `https://actionnetwork.org/groups/${groupSlug}/apis`
+      : ''
+    const showApiKeyField = !!groupSlug
+
     return (
       <div className="space-y-7">
         <header>
@@ -992,7 +999,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 +1031,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 +1083,6 @@ export default function Page({
       </div>
     )
   }
-
   if (externalDataSourceType === 'editablegooglesheets') {
     const redirectSuccessUrl = form.watch(
       'editablegooglesheets.redirectSuccessUrl'

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 { formatCrmNames } 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{' '}
+                    {formatCrmNames(
+                      pageQuery.data?.externalDataSource.crmType || 'CRM'
+                    )}{' '}
+                    and enabled it.
                   </p>
                 </div>
               </li>

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 { formatCrmNames } from '@/lib/utils'
 
 import { ManageSourceSharing } from './ManageSourceSharing'
 import importData from './importData'
@@ -255,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>
@@ -292,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' && (
@@ -334,7 +336,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{' '}
+                        {formatCrmNames(source.crmType || 'CRM')}
                       </p>
                       <EnableWebhooksSwitch
                         externalDataSource={source}
@@ -422,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
@@ -434,7 +437,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>
@@ -465,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 Mapping section.
+                        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 existing members change, 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 ? (
@@ -531,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}

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>

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 ? (

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 { formatCrmNames } from '@/lib/utils'
 
 import { DataSourceFieldLabel } from './DataSourceIcon'
 
@@ -227,6 +228,7 @@ export function UpdateMappingForm({
                             <X className="w-3 h-3" />
                           </Button>
                           <SourcePathSelector
+                            crmType={crmType}
                             focusOnMount={
                               form.watch(`updateMapping.${index}.source`) ===
                               '?'
@@ -329,8 +331,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{' '}
+                  {formatCrmNames(crmType || 'CRM')}{' '}
                 </Button>
               </>
             )}

nextjs/src/lib/utils.ts

@@ -4,3 +4,19 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+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'
+  }
+}