feat: create new sync source

crm/lead_syncing/doctype/lead_sync_source/lead_sync_source.json

@@ -23,7 +23,8 @@
    "fieldtype": "Select",
    "in_list_view": 1,
    "label": "Type",
-   "options": "Facebook"
+   "options": "Facebook",
+   "reqd": 1
   },
   {
    "fieldname": "column_break_lwcw",
@@ -74,7 +75,7 @@
  "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-10-02 12:17:35.222102",
+ "modified": "2025-10-02 12:33:45.810895",
  "modified_by": "Administrator",
  "module": "Lead Syncing",
  "name": "Lead Sync Source",

frontend/src/components/Settings/LeadSyncing/LeadSyncSourcePage.vue

@@ -46,6 +46,7 @@ const sources = createListResource({
 provide('sources', sources)
 
 function updateStep(newStep, data) {
+  console.log("update step called with new step: ", newStep);
   step.value = newStep
   source.value = data
 }

frontend/src/components/Settings/LeadSyncing/NewLeadSyncSource.vue

@@ -8,45 +8,99 @@
                 {{ __('Choose the type of source you want to configure.') }}
             </p>
         </div>
-        
+
         <!-- supported sources -->
         <div class="flex flex-wrap items-center">
-            <div
-                v-for="s in supportedSourceTypes"
-                :key="s.name"
-                class="flex flex-col items-center gap-1 mt-4 w-[70px]"
-                @click="handleSelect(s)"
-            >
-                <EmailProviderIcon
-                    :label="s.name"
-                    :logo="s.icon"
-                    :selected="selectedSourceType?.name === s?.name"
-                />
+            <div v-for="s in supportedSourceTypes" :key="s.name" class="flex flex-col items-center gap-1 mt-4 w-[70px]"
+                @click="handleSelect(s)">
+                <EmailProviderIcon :label="s.name" :logo="s.icon" :selected="selectedSourceType?.name === s?.name" />
             </div>
         </div>
+
+        <div v-if="selectedSourceType" class="flex flex-col gap-4">
+            <!-- docs -->
+            <div class="flex items-center gap-2 p-2 rounded-md ring-1 ring-outline-gray-3 text-ink-gray-6">
+                <CircleAlert class="w-5 h-6 w-min-5 w-max-5 min-h-5 max-w-5" />
+                <div class="text-xs text-wrap">
+                    {{ selectedSourceType.info }}
+                    <a :href="selectedSourceType.link" target="_blank" class="underline">
+                        {{ __('here') }}
+                    </a>.
+                </div>
+            </div>
+
+            <!-- Form -->
+            <div v-if="selectedSourceType.name === 'Facebook'" class="flex flex-col gap-4">
+                <div class="grid grid-cols-1 gap-4">
+                    <div v-for="field in fbSourceFields" :key="field.name" class="flex flex-col gap-1">
+                        <FormControl v-model="state[field.name]" :label="field.label" :name="field.name"
+                            :type="field.type" :placeholder="field.placeholder" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- action button -->
+        <div v-if="selectedSourceType" class="flex justify-between mt-auto">
+            <Button :label="__('Back')" variant="outline" :disabled="sources.insert.loading"
+                @click="emit('updateStep', 'source-list')" />
+            <Button :label="__('Create')" variant="solid" :loading="sources.insert.loading"
+                @click="createLeadSyncSource" />
+        </div>
     </div>
 </template>
 
 
 <script setup>
- import { computed, reactive, ref } from 'vue'
-import { createResource, toast } from 'frappe-ui'
-import CircleAlert from '~icons/lucide/circle-alert'
-// import {
-//   customProviderFields,
-//   popularProviderFields,
-//   services,
-//   validateInputs,
-//   incomingOutgoingFields,
-// } from './emailConfig'
-import { supportedSourceTypes } from './leadSyncSourceConfig'
-import EmailProviderIcon from '../EmailProviderIcon.vue'
+import { reactive, ref, inject } from "vue";
+import { createResource, FormControl, toast } from "frappe-ui";
+import CircleAlert from "~icons/lucide/circle-alert";
+import { supportedSourceTypes } from "./leadSyncSourceConfig";
+import EmailProviderIcon from "../EmailProviderIcon.vue";
 
+const state = reactive({
+    name: "",
+    type: "",
+    access_token: "",
+});
 
-const selectedSourceType = ref(null)
+const emit = defineEmits()
+
+const selectedSourceType = ref(supportedSourceTypes[0]);
+state.type = selectedSourceType.value.name;
+
+const sources = inject("sources");
+const fbSourceFields = [
+    {
+        name: "name",
+        label: __("Name"),
+        type: "text",
+        placeholder: __("Add a name for your source"),
+    },
+    {
+        name: "access_token",
+        label: __("Access Token"),
+        type: "password",
+        placeholder: __("Enter your Facebook Access Token"),
+    },
+];
 
 function handleSelect(sourceType) {
-  selectedSourceType.value = sourceType
-//   state.service = service.name
+    selectedSourceType.value = sourceType;
+    state.type = sourceType.name;
+}
+
+function createLeadSyncSource() {
+    sources.insert.submit({
+        ...state
+    }, {
+        onSuccess: () => {
+            toast.success(__('New Lead Syncing Source created successfully'))
+            emit('updateStep', 'source-list')
+        },
+        onError: (error) => {
+            toast.error(error.messages[0] || __('Failed to create source'))
+        },
+    })
 }
 </script>

frontend/src/components/Settings/LeadSyncing/leadSyncSourceConfig.js

@@ -5,6 +5,7 @@ export const supportedSourceTypes = [
   {
     name: 'Facebook',
     icon: LogoFacebook,
+    info: __("You will need a Meta developer account and an access token to sync leads from Facebook. Read more "),
     link: 'https://www.facebook.com/business/help/503306463479099?id=2190812977867143',
     custom: false,
   }