@dev.smartpricing/message-composer-layer 4.2.3 → 4.2.4-maizzle.0

package/app/components/Email/Editor/Blocks/ButtonBlock.vue

@@ -44,7 +44,7 @@ const buttonStyles = computed(() => {
       props.block.settings.shape === 'square'
         ? '0px'
         : props.block.settings.shape === 'rounded'
-          ? '8px'
+          ? '4px'
           : '50px',
     padding: '12px 24px',
     border: 'none',
@@ -69,7 +69,7 @@ const containerStyles = computed(() => ({
       : props.block.settings.alignment === 'center'
         ? 'center'
         : 'flex-end',
-  padding: '16px',
+  padding: '0',
 }))
 
 defineOptions({

package/app/components/Email/Editor/Blocks/DiscountCodeBlock.vue

@@ -35,15 +35,16 @@ const discountCodeStyles = computed(() => {
       props.block.settings.style === 'square'
         ? '0px'
         : props.block.settings.style === 'rounded'
-          ? '8px'
+          ? '4px'
           : '50px',
-    padding: '16px 24px',
+    padding: '12px 8px',
     textAlign: 'center',
-    display: 'inline-block',
   }
 
   if (props.block.settings.width === 'full_width') {
     styles.width = '100%'
+  } else {
+    styles.display = 'inline-block'
   }
 
   return styles
@@ -52,7 +53,7 @@ const discountCodeStyles = computed(() => {
 const containerStyles = computed(() => {
   return {
     backgroundColor: props.block.settings.backgroundBlock,
-    padding: '16px',
+    padding: '0',
     textAlign: 'center' as const,
   }
 })

package/app/components/Email/Editor/Blocks/DividerBlock.vue

@@ -12,7 +12,6 @@ defineOptions({
 
 <template>
   <div
-    class="py-4"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="dividerBlockTestIds.container"
   >

package/app/components/Email/Editor/Blocks/FooterBlock.vue

@@ -38,7 +38,7 @@ defineOptions({
 
 <template>
   <div
-    class="rounded p-2 relative"
+    class="relative px-[25px]"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="footerBlockTestIds.container"
   >

package/app/components/Email/Editor/Blocks/GridBlock.vue

@@ -72,22 +72,18 @@ defineOptions({
 
 <template>
   <div
-    class="rounded p-4"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="gridBlockTestIds.container"
   >
-    <div
-      class="grid gap-4"
-      :class="{
-        'grid-cols-1': block.settings.columns === 1,
-        'grid-cols-2': block.settings.columns === 2,
-        'grid-cols-3': block.settings.columns === 3,
-      }"
-    >
+    <div class="flex items-center">
       <div
         v-for="(column, index) in block.settings.columnData"
         :key="column.id"
-        class="min-h-32 space-y-2 rounded border border-dashed border-neutral-300 p-2 overflow-hidden"
+        class="overflow-hidden [&_img]:w-full self-stretch flex flex-col justify-center"
+        :class="
+          column.blocks.length === 0 ? 'min-h-32 border border-dashed border-neutral-300/50' : ''
+        "
+        :style="{ width: `${100 / block.settings.columns}%` }"
         :data-testid="`${gridBlockTestIds.column}-${column.id}`"
       >
         <!-- Column blocks -->

package/app/components/Email/Editor/Blocks/HeadingBlock.vue

@@ -38,7 +38,7 @@ defineOptions({
 
 <template>
   <div
-    class="rounded p-2 relative"
+    class="relative px-[25px]"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="headingBlockTestIds.container"
   >

package/app/components/Email/Editor/Blocks/IndexBlock.vue

@@ -96,10 +96,10 @@ defineOptions({
       :data-block-id="block.id"
       :data-block-type="block.type"
       :data-testid="`${indexBlockTestIds.container}-${block.id}`"
-      class="group relative rounded border-2 transition-colors"
+      class="group relative transition-colors"
       :class="{
-        'border-primary-500': isSelected,
-        'border-transparent hover:border-neutral-300': !isSelected,
+        'outline-2 outline-primary-500 outline': isSelected,
+        'outline-transparent hover:outline-2 hover:outline-neutral-300 hover:outline': !isSelected,
         'cursor-move': showDragHandle,
       }"
       @click.stop="handleClick"
@@ -153,3 +153,14 @@ defineOptions({
     </div>
   </UPopover>
 </template>
+
+<style scoped>
+:deep(.ProseMirror ul) {
+  list-style-type: disc;
+  padding-left: 1.5em;
+}
+:deep(.ProseMirror ol) {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+}
+</style>

package/app/components/Email/Editor/Blocks/ParagraphBlock.vue

@@ -38,7 +38,7 @@ defineOptions({
 
 <template>
   <div
-    class="rounded p-2 relative"
+    class="relative px-[25px]"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="paragraphBlockTestIds.container"
   >

package/app/components/Email/Editor/Blocks/UnsubscribeLinkBlock.vue

@@ -36,7 +36,7 @@ defineOptions({
 
 <template>
   <div
-    class="rounded p-2 relative"
+    class="relative px-[25px]"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="unsubscribeLinkBlockTestIds.container"
   >

package/app/components/Email/InlinePreview.vue

@@ -25,6 +25,7 @@ const iframeWidth = computed(() => {
   return props.view === 'mobile' ? '400px' : '600px'
 })
 
+const { renderer } = useEmailRenderer()
 const { mutate: preview, data: previewed, isLoading: isPreviewing } = usePreviewEmailMutation()
 
 const previewEmail = useDebounceFn(() => {
@@ -38,11 +39,12 @@ const previewEmail = useDebounceFn(() => {
           logo_url: props.brand.logo_url,
         }
       : null,
+    renderer: renderer.value,
   })
 }, 0)
 
 watch(
-  () => props.message,
+  [() => props.message, renderer],
   () => {
     previewEmail()
   },

package/app/components/Email/Preview.vue

@@ -27,6 +27,7 @@ const { data: resolvedParams } = useResolvedParametersQuery(
   () => props.message.language_id,
 )
 
+const { renderer } = useEmailRenderer()
 const { mutate: compile, data: compiled, isLoading: isCompiling } = useCompileEmailMutation()
 
 const compileEmail = useDebounceFn(() => {
@@ -37,6 +38,7 @@ const compileEmail = useDebounceFn(() => {
       language: props.message.language_id,
       parameters: resolvedParams.value.parameters,
       brand_id: props.brandId,
+      renderer: renderer.value,
     },
   })
 }, 0)
@@ -47,10 +49,7 @@ watch(
   { immediate: true },
 )
 
-watch(
-  () => props.brandId,
-  () => compileEmail(),
-)
+watch([() => props.brandId, renderer], () => compileEmail())
 
 // Compilation
 const iframeContent = ref<string>('')

package/app/components/Email/SendTestEmailModal.vue

@@ -85,6 +85,7 @@ const { t } = useI18n()
 const toast = useToast()
 const emailEditorStore = useEmailEditorStore()
 const composerContext = useComposerContext()
+const { renderer } = useEmailRenderer()
 const { mutate: sendTest, isLoading: isSending, status } = useSendTestEmailMutation()
 
 const defaultSenderEmail = computed(
@@ -138,6 +139,7 @@ function onSubmit() {
     to: state.value.to,
     brand_id: resolvedBrandId.value,
     from: state.value.from || undefined,
+    renderer: renderer.value,
   })
 }
 

package/app/composables/useEmailRenderer.ts

@@ -0,0 +1,23 @@
+import type { EmailRenderer } from '@dev.smartpricing/message-composer-utils/types'
+
+/**
+ * Session-level toggle for email renderer selection.
+ * Defaults to "mjml". Can be driven by A/B flags or dev toggle.
+ */
+export function useEmailRenderer() {
+  const renderer = useState<EmailRenderer>('email-renderer', () => 'mjml')
+
+  function toggle() {
+    renderer.value = renderer.value === 'mjml' ? 'maizzle' : 'mjml'
+  }
+
+  function setRenderer(value: EmailRenderer) {
+    renderer.value = value
+  }
+
+  return {
+    renderer: readonly(renderer),
+    toggle,
+    setRenderer,
+  }
+}