collavre_notion 0.1.0

data/app/javascript/collavre_notion.js

@@ -0,0 +1,506 @@
+let notionIntegrationInitialized = false;
+
+if (!notionIntegrationInitialized) {
+  notionIntegrationInitialized = true;
+
+  document.addEventListener('turbo:load', function () {
+    const openBtn = document.getElementById('notion-integration-btn');
+    const modal = document.getElementById('notion-integration-modal');
+    if (!openBtn || !modal) return;
+
+    const statusEl = document.getElementById('notion-integration-status');
+    const loginBtn = document.getElementById('notion-login-btn');
+    const loginForm = document.getElementById('notion-login-form');
+    const closeBtn = document.getElementById('close-notion-modal');
+    const prevBtn = document.getElementById('notion-prev-btn');
+    const nextBtn = document.getElementById('notion-next-btn');
+    const exportBtn = document.getElementById('notion-export-btn');
+    const syncBtn = document.getElementById('notion-sync-btn');
+    const deleteBtn = document.getElementById('notion-delete-btn');
+    const errorEl = document.getElementById('notion-wizard-error');
+    const existingContainer = document.getElementById('notion-existing-connections');
+    const existingList = document.getElementById('notion-existing-page-list');
+    const connectMessage = document.getElementById('notion-connect-message');
+    const workspaceNameEl = document.getElementById('notion-workspace-name');
+    const parentPageSection = document.getElementById('notion-parent-page-section');
+    const parentPageSelect = document.getElementById('notion-parent-page-select');
+    const creativeTitleEl = document.getElementById('notion-creative-title');
+    const workspaceSummaryEl = document.getElementById('notion-workspace-summary');
+    const exportTypeSummaryEl = document.getElementById('notion-export-type-summary');
+    const parentSummaryEl = document.getElementById('notion-parent-summary');
+    const parentPageSummaryEl = document.getElementById('notion-parent-page-summary');
+
+    let creativeId = null;
+    let currentStep = 'connect';
+    let hasExistingIntegration = false;
+    let workspaceInfo = null;
+    let availablePages = [];
+    let exportType = 'new-page';
+    let selectedParentPage = null;
+
+    function csrfToken() {
+      return document.querySelector('meta[name="csrf-token"]')?.content;
+    }
+
+    function resetWizard() {
+      currentStep = 'connect';
+      hasExistingIntegration = false;
+      workspaceInfo = null;
+      availablePages = [];
+      exportType = 'new-page';
+      selectedParentPage = null;
+      statusEl.textContent = '';
+      errorEl.style.display = 'none';
+      errorEl.textContent = '';
+      if (existingContainer) {
+        existingContainer.style.display = 'none';
+      }
+      if (existingList) {
+        existingList.innerHTML = '';
+      }
+      if (connectMessage) {
+        connectMessage.style.display = '';
+      }
+      if (deleteBtn) deleteBtn.style.display = 'none';
+      if (syncBtn) syncBtn.style.display = 'none';
+      if (loginBtn) loginBtn.style.display = 'inline-block';
+      if (parentPageSection) parentPageSection.style.display = 'none';
+      updateStep();
+    }
+
+    function updateStep() {
+      ['connect', 'workspace', 'summary']
+        .forEach(function (step) {
+          const el = document.getElementById(`notion-step-${step}`);
+          if (!el) return;
+          el.style.display = (step === currentStep) ? 'block' : 'none';
+        });
+
+      if (currentStep === 'connect') {
+        prevBtn.style.display = 'none';
+        if (hasExistingIntegration) {
+          nextBtn.style.display = 'block';
+          nextBtn.disabled = false;
+        } else {
+          nextBtn.style.display = 'none';
+        }
+        exportBtn.style.display = 'none';
+      } else if (currentStep === 'workspace') {
+        prevBtn.style.display = 'block';
+        prevBtn.disabled = false;
+        nextBtn.style.display = 'block';
+        nextBtn.disabled = false;
+        exportBtn.style.display = 'none';
+      } else if (currentStep === 'summary') {
+        prevBtn.style.display = 'block';
+        prevBtn.disabled = false;
+        nextBtn.style.display = 'none';
+        exportBtn.style.display = 'block';
+        exportBtn.disabled = false;
+      }
+    }
+
+    function showError(message) {
+      errorEl.textContent = message;
+      errorEl.style.display = 'block';
+    }
+
+    function clearError() {
+      errorEl.style.display = 'none';
+      errorEl.textContent = '';
+    }
+
+    function loadIntegrationStatus() {
+      if (!creativeId) return;
+
+      statusEl.textContent = 'Loading...';
+      clearError();
+
+      fetch(`/notion/creatives/${creativeId}/notion_integration`, {
+        method: 'GET',
+        headers: {
+          'X-CSRF-Token': csrfToken(),
+          'Content-Type': 'application/json'
+        }
+      })
+        .then(response => response.json())
+        .then(data => {
+          console.log('Notion integration status:', data);
+          statusEl.textContent = '';
+          
+          // Store the creative title from the API response
+          if (data.creative_title) {
+            window.notionCreativeTitle = data.creative_title;
+            console.log('Creative title from API:', data.creative_title);
+          }
+          
+          if (data.connected) {
+            workspaceInfo = data.account;
+            availablePages = data.available_pages || [];
+            
+            console.log('Available pages:', availablePages);
+            
+            if (workspaceNameEl) {
+              workspaceNameEl.textContent = data.account.workspace_name || 'Notion Workspace';
+            }
+
+            if (data.linked_pages && data.linked_pages.length > 0) {
+              hasExistingIntegration = true;
+              showExistingIntegration(data.linked_pages);
+            } else {
+              hasExistingIntegration = true;
+              if (connectMessage) connectMessage.style.display = 'none';
+              if (loginBtn) loginBtn.style.display = 'none';
+            }
+            
+            updateParentPageSelect(); // Update the select with available pages
+          } else {
+            hasExistingIntegration = false;
+            if (connectMessage) connectMessage.textContent = modal.dataset.loginRequired;
+          }
+          updateStep();
+        })
+        .catch(error => {
+          console.error('Error loading integration status:', error);
+          statusEl.textContent = '';
+          showError('Failed to load integration status');
+        });
+    }
+
+    function showExistingIntegration(linkedPages) {
+      if (!existingContainer || !existingList) return;
+
+      existingList.innerHTML = '';
+      linkedPages.forEach(function (page) {
+        const li = document.createElement('li');
+        const link = document.createElement('a');
+        link.href = page.page_url;
+        link.target = '_blank';
+        link.textContent = page.page_title || 'Untitled Page';
+        li.appendChild(link);
+        
+        if (page.last_synced_at) {
+          const syncInfo = document.createElement('span');
+          syncInfo.textContent = ` (synced ${new Date(page.last_synced_at).toLocaleDateString()})`;
+          syncInfo.style.color = 'var(--color-text-secondary)';
+          li.appendChild(syncInfo);
+        }
+        
+        existingList.appendChild(li);
+      });
+
+      if (connectMessage) connectMessage.style.display = 'none';
+      if (loginBtn) loginBtn.style.display = 'none';
+      if (syncBtn) syncBtn.style.display = 'inline-block';
+      if (deleteBtn) deleteBtn.style.display = 'inline-block';
+      existingContainer.style.display = 'block';
+    }
+
+    function loadAvailablePages() {
+      // Pages are now loaded with the initial status call
+      return Promise.resolve(availablePages);
+    }
+
+    function updateParentPageOptions() {
+      const showParentSelect = document.querySelector('input[name="notion-export-type"]:checked')?.value === 'select-parent';
+      
+      if (parentPageSection) {
+        parentPageSection.style.display = showParentSelect ? 'block' : 'none';
+      }
+
+      if (showParentSelect && availablePages.length === 0) {
+        loadAvailablePages().then(pages => {
+          availablePages = pages;
+          updateParentPageSelect();
+        });
+      }
+    }
+
+    function updateParentPageSelect() {
+      if (!parentPageSelect) return;
+
+      console.log('Updating parent page select with', availablePages.length, 'pages');
+      parentPageSelect.innerHTML = '';
+      
+      if (availablePages.length === 0) {
+        const option = document.createElement('option');
+        option.value = '';
+        option.textContent = 'No pages available or loading...';
+        parentPageSelect.appendChild(option);
+      } else {
+        const defaultOption = document.createElement('option');
+        defaultOption.value = '';
+        defaultOption.textContent = 'Select a parent page';
+        parentPageSelect.appendChild(defaultOption);
+
+        availablePages.forEach(page => {
+          console.log('Adding page option:', page);
+          const option = document.createElement('option');
+          option.value = page.id;
+          option.textContent = page.title || 'Untitled';
+          parentPageSelect.appendChild(option);
+        });
+      }
+    }
+
+    function updateSummary() {
+      if (creativeTitleEl) {
+        // Use the creative title from the API response
+        const title = window.notionCreativeTitle || 'Current Creative';
+        console.log(`Creative title used: "${title}" for ID: ${creativeId}`);
+        creativeTitleEl.textContent = title;
+      }
+
+      if (workspaceSummaryEl && workspaceInfo) {
+        workspaceSummaryEl.textContent = workspaceInfo.workspace_name || 'Notion Workspace';
+      }
+
+      const selectedExportType = document.querySelector('input[name="notion-export-type"]:checked')?.value || 'new-page';
+      exportType = selectedExportType;
+
+      if (exportTypeSummaryEl) {
+        exportTypeSummaryEl.textContent = selectedExportType === 'new-page' ? 'New page' : 'Subpage';
+      }
+
+      if (selectedExportType === 'select-parent') {
+        selectedParentPage = parentPageSelect?.value || null;
+        if (parentSummaryEl && parentPageSummaryEl) {
+          if (selectedParentPage) {
+            const selectedPage = availablePages.find(p => p.id === selectedParentPage);
+            parentPageSummaryEl.textContent = selectedPage?.title || 'Selected page';
+            parentSummaryEl.style.display = 'block';
+          } else {
+            parentSummaryEl.style.display = 'none';
+          }
+        }
+      } else {
+        if (parentSummaryEl) parentSummaryEl.style.display = 'none';
+      }
+    }
+
+    function performExport() {
+      if (!creativeId) {
+        showError(modal.dataset.noCreative);
+        return;
+      }
+
+      exportBtn.disabled = true;
+      exportBtn.textContent = 'Exporting...';
+      clearError();
+
+      const requestData = {
+        action: 'export'
+      };
+
+      if (exportType === 'select-parent' && selectedParentPage) {
+        requestData.parent_page_id = selectedParentPage;
+      }
+
+      console.log('Sending export request:', requestData);
+      console.log('Export type:', exportType, 'Selected parent page:', selectedParentPage);
+
+      fetch(`/notion/creatives/${creativeId}/notion_integration`, {
+        method: 'PATCH',
+        headers: {
+          'X-CSRF-Token': csrfToken(),
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(requestData)
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            statusEl.textContent = modal.dataset.exportSuccess || 'Export started successfully';
+            statusEl.style.color = 'green';
+            setTimeout(() => {
+              modal.style.display = 'none';
+              resetWizard();
+            }, 2000);
+          } else {
+            showError(data.message || 'Export failed');
+          }
+        })
+        .catch(error => {
+          console.error('Export error:', error);
+          showError('Export failed');
+        })
+        .finally(() => {
+          exportBtn.disabled = false;
+          exportBtn.textContent = 'Export to Notion';
+        });
+    }
+
+    function performSync() {
+      if (!creativeId) return;
+
+      syncBtn.disabled = true;
+      syncBtn.textContent = 'Syncing...';
+      clearError();
+
+      fetch(`/notion/creatives/${creativeId}/notion_integration`, {
+        method: 'PATCH',
+        headers: {
+          'X-CSRF-Token': csrfToken(),
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ action: 'sync' })
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            statusEl.textContent = modal.dataset.syncSuccess || 'Sync completed successfully';
+            statusEl.style.color = 'green';
+          } else {
+            showError(data.message || 'Sync failed');
+          }
+        })
+        .catch(error => {
+          console.error('Sync error:', error);
+          showError('Sync failed');
+        })
+        .finally(() => {
+          syncBtn.disabled = false;
+          syncBtn.textContent = 'Sync to Notion';
+        });
+    }
+
+    function performDelete() {
+      if (!confirm(modal.dataset.deleteConfirm)) return;
+
+      deleteBtn.disabled = true;
+      deleteBtn.textContent = 'Removing...';
+      clearError();
+
+      fetch(`/notion/creatives/${creativeId}/notion_integration`, {
+        method: 'DELETE',
+        headers: {
+          'X-CSRF-Token': csrfToken(),
+          'Content-Type': 'application/json'
+        }
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            statusEl.textContent = modal.dataset.deleteSuccess || 'Integration removed successfully';
+            statusEl.style.color = 'green';
+            setTimeout(() => {
+              modal.style.display = 'none';
+              resetWizard();
+            }, 2000);
+          } else {
+            showError(data.message || 'Deletion failed');
+          }
+        })
+        .catch(error => {
+          console.error('Delete error:', error);
+          showError('Deletion failed');
+        })
+        .finally(() => {
+          deleteBtn.disabled = false;
+          deleteBtn.textContent = 'Remove link';
+        });
+    }
+
+    // Event listeners
+    openBtn.addEventListener('click', function () {
+      creativeId = this.dataset.creativeId;
+      if (!creativeId) {
+        alert(modal.dataset.noCreative);
+        return;
+      }
+      modal.style.display = 'flex';
+      resetWizard();
+      loadIntegrationStatus();
+    });
+
+    closeBtn.addEventListener('click', function () {
+      modal.style.display = 'none';
+      resetWizard();
+    });
+
+    // Listen for OAuth success message from popup window
+    window.addEventListener('message', function(event) {
+      // Verify origin for security
+      if (event.origin !== window.location.origin) return;
+      
+      if (event.data && event.data.type === 'notion_oauth_success') {
+        console.log('Received Notion OAuth success message');
+        loadIntegrationStatus();
+      }
+    });
+
+    loginBtn.addEventListener('click', function () {
+      console.log('Notion login button clicked');
+      const width = parseInt(this.dataset.windowWidth) || 600;
+      const height = parseInt(this.dataset.windowHeight) || 700;
+      const left = (screen.width - width) / 2;
+      const top = (screen.height - height) / 2;
+
+      const authWindow = window.open('', 'notion-auth-window', 
+        `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`);
+      
+      if (authWindow) {
+        loginForm.target = 'notion-auth-window';
+        loginForm.submit();
+        console.log('Auth form submitted to popup window');
+        
+        const checkClosed = setInterval(() => {
+          if (authWindow.closed) {
+            clearInterval(checkClosed);
+            console.log('Auth window closed, reloading integration status');
+            setTimeout(() => loadIntegrationStatus(), 1000);
+          }
+        }, 1000);
+      } else {
+        loginForm.target = '_blank';
+        loginForm.submit();
+      }
+    });
+
+    prevBtn.addEventListener('click', function () {
+      if (currentStep === 'workspace') {
+        currentStep = 'connect';
+      } else if (currentStep === 'summary') {
+        currentStep = 'workspace';
+      }
+      updateStep();
+    });
+
+    nextBtn.addEventListener('click', function () {
+      clearError();
+      if (currentStep === 'connect') {
+        currentStep = 'workspace';
+        updateParentPageOptions();
+      } else if (currentStep === 'workspace') {
+        updateSummary();
+        currentStep = 'summary';
+      }
+      updateStep();
+    });
+
+    exportBtn.addEventListener('click', performExport);
+    if (syncBtn) syncBtn.addEventListener('click', performSync);
+    if (deleteBtn) deleteBtn.addEventListener('click', performDelete);
+
+    // Listen for export type changes
+    document.addEventListener('change', function (e) {
+      if (e.target.name === 'notion-export-type') {
+        updateParentPageOptions();
+      }
+    });
+
+    // Listen for parent page selection
+    if (parentPageSelect) {
+      parentPageSelect.addEventListener('change', function () {
+        selectedParentPage = this.value;
+      });
+    }
+
+    modal.addEventListener('click', function (e) {
+      if (e.target === modal) {
+        modal.style.display = 'none';
+        resetWizard();
+      }
+    });
+  });
+}

data/app/jobs/collavre_notion/notion_export_job.rb

@@ -0,0 +1,29 @@
+module CollavreNotion
+  class NotionExportJob < ApplicationJob
+    queue_as :default
+
+    def perform(creative, notion_account, parent_page_id = nil)
+      service = CollavreNotion::NotionService.new(user: notion_account.user)
+
+      begin
+        # Export the creative tree to Notion
+        link = service.sync_creative(creative, parent_page_id: parent_page_id)
+
+        Rails.logger.info("Successfully exported creative #{creative.id} to Notion page #{link.page_id}")
+
+        # You could add broadcast/notification logic here if needed
+        # ActionCable.server.broadcast("user_#{notion_account.user.id}", {
+        #   type: 'notion_export_complete',
+        #   creative_id: creative.id,
+        #   page_url: link.page_url
+        # })
+      rescue NotionError => e
+        Rails.logger.error("Notion export failed for creative #{creative.id}: #{e.message}")
+        raise e
+      rescue StandardError => e
+        Rails.logger.error("Unexpected error during Notion export for creative #{creative.id}: #{e.message}")
+        raise e
+      end
+    end
+  end
+end

data/app/jobs/collavre_notion/notion_sync_job.rb

@@ -0,0 +1,47 @@
+module CollavreNotion
+  class NotionSyncJob < ApplicationJob
+    queue_as :default
+
+    def perform(creative, notion_account, page_id)
+      service = CollavreNotion::NotionService.new(user: notion_account.user)
+
+      begin
+        # Find the existing link
+        link = CollavreNotion::NotionPageLink.find_by(
+          creative: creative,
+          notion_account: notion_account,
+          page_id: page_id
+        )
+
+        unless link
+          Rails.logger.error("No Notion page link found for creative #{creative.id} and page #{page_id}")
+          return
+        end
+
+        # Update the existing Notion page with children as blocks
+        title = ActionController::Base.helpers.strip_tags(creative.description).strip.presence || "Untitled Creative"
+        children = creative.children.to_a
+        Rails.logger.info("NotionSyncJob: Syncing creative #{creative.id} as page title with #{children.count} children as blocks")
+        blocks = children.any? ? NotionCreativeExporter.new(creative).export_tree_blocks(children, 1, 0) : []
+
+        properties = {
+          title: {
+            title: [ { text: { content: title } } ]
+          }
+        }
+
+        service.update_page(page_id, properties: properties, blocks: blocks)
+        link.update!(page_title: title)
+        link.mark_synced!
+
+        Rails.logger.info("Successfully synced creative #{creative.id} to Notion page #{page_id}")
+      rescue NotionError => e
+        Rails.logger.error("Notion sync failed for creative #{creative.id}: #{e.message}")
+        raise e
+      rescue StandardError => e
+        Rails.logger.error("Unexpected error during Notion sync for creative #{creative.id}: #{e.message}")
+        raise e
+      end
+    end
+  end
+end

data/app/models/collavre_notion/notion_account.rb

@@ -0,0 +1,17 @@
+module CollavreNotion
+  class NotionAccount < ApplicationRecord
+    self.table_name = "notion_accounts"
+
+    belongs_to :user, class_name: "::User"
+    has_many :notion_page_links, class_name: "CollavreNotion::NotionPageLink", dependent: :destroy
+
+    encrypts :token, deterministic: false
+
+    validates :notion_uid, :token, presence: true
+    validates :notion_uid, uniqueness: true
+
+    def expired?
+      token_expires_at.present? && token_expires_at < Time.current
+    end
+  end
+end

data/app/models/collavre_notion/notion_block_link.rb

@@ -0,0 +1,10 @@
+module CollavreNotion
+  class NotionBlockLink < ApplicationRecord
+    self.table_name = "notion_block_links"
+
+    belongs_to :notion_page_link, class_name: "CollavreNotion::NotionPageLink"
+    belongs_to :creative, class_name: "Collavre::Creative"
+
+    validates :block_id, presence: true, uniqueness: { scope: :notion_page_link_id }
+  end
+end

data/app/models/collavre_notion/notion_page_link.rb

@@ -0,0 +1,19 @@
+module CollavreNotion
+  class NotionPageLink < ApplicationRecord
+    self.table_name = "notion_page_links"
+
+    belongs_to :creative, class_name: "Collavre::Creative"
+    belongs_to :notion_account, class_name: "CollavreNotion::NotionAccount"
+    has_many :notion_block_links, class_name: "CollavreNotion::NotionBlockLink", dependent: :destroy
+
+    validates :page_id, :page_title, presence: true
+    validates :page_id, uniqueness: true
+
+    scope :recent, -> { order(last_synced_at: :desc) }
+    scope :synced, -> { where.not(last_synced_at: nil) }
+
+    def mark_synced!
+      touch(:last_synced_at)
+    end
+  end
+end