feat: update source page

* also redirect here once a new source is created

frontend/src/components/Settings/EmailTemplate/EditEmailTemplate.vue

@@ -128,7 +128,6 @@ import {
   FormControl,
   Switch,
   toast,
-  call,
   createResource,
 } from 'frappe-ui'
 import { computed, inject, onMounted, ref } from 'vue'

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

@@ -1 +1,50 @@
-<template></template>
+<template>
+    <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
+        <!-- Header -->
+        <div class="flex justify-between">
+            <div class="flex gap-1 -ml-4 w-9/12">
+                <Button variant="ghost" icon-left="chevron-left" :label="__(source.name)" size="md"
+                    @click="() => emit('updateStep', 'source-list')"
+                    class="cursor-pointer hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5 font-semibold text-xl hover:opacity-70 !pr-0 !max-w-96 !justify-start" />
+
+                <div class="w-fit ml-1">
+                    <EmailProviderIcon :logo="sourceIcon[source.type]" />
+                </div>
+            </div>
+            <div class="flex item-center space-x-4 w-3/12 justify-end">
+                <div class="flex items-center space-x-2">
+                    <Switch size="sm" v-model="source.enabled" />
+                    <span class="text-sm text-ink-gray-7">{{ __('Enabled') }}</span>
+                </div>
+                <Button :label="__('Update')" icon-left="edit" variant="solid" :loading="sources.setValue.loading"
+                    @click="updateSource" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { Switch } from "frappe-ui";
+import { inject, onMounted, ref } from "vue";
+
+import { sourceIcon } from "./leadSyncSourceConfig";
+import EmailProviderIcon from "../EmailProviderIcon.vue";
+
+const emit = defineEmits();
+
+const props = defineProps({
+	sourceData: {
+		type: Object,
+		required: true,
+	},
+});
+
+const sources = inject("sources");
+const source = ref({});
+
+onMounted(() => {
+	source.value = { ...props.sourceData };
+});
+
+function updateSource() {}
+</script>

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

@@ -2,7 +2,7 @@
   <div class="flex-1 p-6">
     <NewLeadSyncSource
       v-if="step === 'new-source'"
-      :templateData="source"
+      :sourceData="source"
       @updateStep="updateStep"
     />
     <LeadSyncSources
@@ -11,7 +11,7 @@
     />
     <EditLeadSyncSource
       v-else-if="step === 'edit-source'"
-      :templateData="source"
+      :sourceData="source"
       @updateStep="updateStep"
     />
   </div>

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

@@ -33,7 +33,7 @@
             <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"
+                        <FormControl v-model="syncSource[field.name]" :label="field.label" :name="field.name"
                             :type="field.type" :placeholder="field.placeholder" />
                     </div>
                 </div>
@@ -52,13 +52,13 @@
 
 
 <script setup>
-import { reactive, ref, inject } from "vue";
-import { createResource, FormControl, toast } from "frappe-ui";
+import { ref, inject, onMounted } from "vue";
+import { FormControl, toast } from "frappe-ui";
 import CircleAlert from "~icons/lucide/circle-alert";
 import { supportedSourceTypes } from "./leadSyncSourceConfig";
 import EmailProviderIcon from "../EmailProviderIcon.vue";
 
-const state = reactive({
+const syncSource = ref({
     name: "",
     type: "",
     access_token: "",
@@ -66,8 +66,15 @@ const state = reactive({
 
 const emit = defineEmits()
 
+const props = defineProps({
+  sourceData: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
 const selectedSourceType = ref(supportedSourceTypes[0]);
-state.type = selectedSourceType.value.name;
+syncSource.value.type = selectedSourceType.value.name;
 
 const sources = inject("sources");
 const fbSourceFields = [
@@ -87,20 +94,29 @@ const fbSourceFields = [
 
 function handleSelect(sourceType) {
     selectedSourceType.value = sourceType;
-    state.type = sourceType.name;
+    syncSource.value.type = sourceType.name;
 }
 
 function createLeadSyncSource() {
     sources.insert.submit({
-        ...state
+        ...syncSource.value
     }, {
         onSuccess: () => {
             toast.success(__('New Lead Syncing Source created successfully'))
-            emit('updateStep', 'source-list')
+            emit('updateStep', 'edit-source', { ...syncSource.value })
         },
         onError: (error) => {
             toast.error(error.messages[0] || __('Failed to create source'))
         },
     })
 }
+
+
+onMounted(() => {
+  if (props.sourceData?.name) {
+    Object.assign(syncSource.value, props.sourceData)
+    syncSource.value.name = `${syncSource.value.name} - Copy`
+    syncSource.value.enabled = false // Default to disabled
+  }
+})
 </script>

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

@@ -9,4 +9,8 @@ export const supportedSourceTypes = [
     link: 'https://www.facebook.com/business/help/503306463479099?id=2190812977867143',
     custom: false,
   }
-]
+]
+
+export const sourceIcon = {
+  'Facebook': LogoFacebook
+}