From 5d6ec15c7911e40af0f66dadf4d05e7e0b9413af Mon Sep 17 00:00:00 2001
From: Bernardo Anderson <bdsa@hey.com>
Date: Mon, 28 Jul 2025 16:40:41 -0500
Subject: [PATCH] CP-10288 - Header bar updates

---
 app/javascript/template_builder/builder.vue | 91 ++-------------------
 app/javascript/template_builder/i18n.js     |  2 +-
 spec/system/template_builder_spec.rb        |  8 ++
 3 files changed, 15 insertions(+), 86 deletions(-)

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 9d5a705d..d60d9e5d 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -57,99 +57,20 @@
       :class="{ sticky: withStickySubmitters || isBreakpointLg }"
       :style="{ backgroundColor }"
     >
-      <div class="flex items-center space-x-3">
-        <Contenteditable
-          v-if="withTitle"
-          :model-value="template.name"
-          :editable="editable"
-          class="text-xl md:text-3xl font-semibold focus:text-clip template-name"
-          :icon-stroke-width="2.3"
-          @update:model-value="updateName"
-        />
-      </div>
+      <div />
       <div class="space-x-3 flex items-center flex-shrink-0">
         <slot
           v-if="$slots.buttons"
           name="buttons"
         />
         <template v-else>
-          <button
-            class="base-button"
-            :class="{ disabled: isExporting }"
-            v-bind="isExporting ? { disabled: true } : {}"
-            @click.prevent="onExportClick"
-          >
-            <IconInnerShadowTop
-              v-if="isExporting"
-              width="22"
-              class="animate-spin"
-            />
-            <IconDeviceFloppy
-              v-else
-              width="22"
-            />
-            <span class="hidden md:inline">
-              {{ t('Export') }}
-            </span>
-          </button>
-          <span
-            v-if="editable"
-            id="save_button_container"
-            class="flex"
-          >
-            <button
-              class="primary-button !rounded-r-none !pr-2"
-              :class="{ disabled: isSaving }"
-              v-bind="isSaving ? { disabled: true } : {}"
-              @click.prevent="onSaveClick"
-            >
-              <IconInnerShadowTop
-                v-if="isSaving"
-                width="22"
-                class="animate-spin"
-              />
-              <IconDeviceFloppy
-                v-else
-                width="22"
-              />
-              <span class="hidden md:inline">
-                {{ t('save') }}
-              </span>
-            </button>
-            <div class="dropdown dropdown-end">
-              <label
-                tabindex="0"
-                class="primary-button !rounded-l-none !pl-1 !pr-2 !border-l-neutral-500"
-              >
-                <span class="text-sm align-text-top">
-                  <IconChevronDown class="w-5 h-5 flex-shrink-0" />
-                </span>
-              </label>
-              <ul
-                tabindex="0"
-                class="dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right"
-              >
-                <li>
-                  <a
-                    :href="`/templates/${template.id}/form`"
-                    data-turbo="false"
-                    class="flex items-center justify-center space-x-2"
-                  >
-                    <IconEye class="w-6 h-6 flex-shrink-0" />
-                    <span class="whitespace-nowrap">{{ t('save_and_preview') }}</span>
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </span>
           <a
-            v-else
-            :href="`/templates/${template.id}`"
-            class="base-button"
+            :href="`/templates/${template.id}/form`"
+            data-turbo="false"
+            class="primary-button"
           >
-            <span class="hidden md:inline">
-              {{ t('back') }}
-            </span>
+            <IconEye class="w-6 h-6 flex-shrink-0" />
+            <span class="whitespace-nowrap">{{ t('save_and_preview') }}</span>
           </a>
         </template>
       </div>
diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index 1903137f..216657e0 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -156,7 +156,7 @@ const en = {
   enter_pdf_password: 'Enter PDF password',
   wrong_password: 'Wrong password',
   currency: 'Currency',
-  save_and_preview: 'Save and Preview',
+  save_and_preview: 'Preview',
   preferences: 'Preferences',
   available_in_pro: 'Available in Pro',
   some_fields_are_missing_in_the_formula: 'Some fields are missing in the formula.',
diff --git a/spec/system/template_builder_spec.rb b/spec/system/template_builder_spec.rb
index 2f4b9456..ee7166dd 100644
--- a/spec/system/template_builder_spec.rb
+++ b/spec/system/template_builder_spec.rb
@@ -29,4 +29,12 @@ RSpec.describe 'Template Builder' do
       expect(page).to have_content('sample-image')
     end
   end
+
+  context 'when clicking the save and preview button' do
+    it 'redirects to the template form page' do
+      visit edit_template_path(template)
+      click_on 'Save and Preview'
+      expect(page).to have_current_path("/templates/#{template.id}/form")
+    end
+  end
 end