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

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'
-          ? '4px'
+          ? '8px'
           : '50px',
     padding: '12px 24px',
     border: 'none',
@@ -69,7 +69,7 @@ const containerStyles = computed(() => ({
       : props.block.settings.alignment === 'center'
         ? 'center'
         : 'flex-end',
-  padding: '0',
+  padding: '16px',
 }))
 
 defineOptions({

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

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

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

@@ -12,6 +12,7 @@ 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="relative px-[25px]"
+    class="rounded p-2 relative"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="footerBlockTestIds.container"
   >

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

@@ -72,18 +72,22 @@ defineOptions({
 
 <template>
   <div
+    class="rounded p-4"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="gridBlockTestIds.container"
   >
-    <div class="flex items-center">
+    <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
         v-for="(column, index) in block.settings.columnData"
         :key="column.id"
-        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}%` }"
+        class="min-h-32 space-y-2 rounded border border-dashed border-neutral-300 p-2 overflow-hidden"
         :data-testid="`${gridBlockTestIds.column}-${column.id}`"
       >
         <!-- Column blocks -->

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

@@ -38,7 +38,7 @@ defineOptions({
 
 <template>
   <div
-    class="relative px-[25px]"
+    class="rounded p-2 relative"
     :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 transition-colors"
+      class="group relative rounded border-2 transition-colors"
       :class="{
-        'outline-2 outline-primary-500 outline': isSelected,
-        'outline-transparent hover:outline-2 hover:outline-neutral-300 hover:outline': !isSelected,
+        'border-primary-500': isSelected,
+        'border-transparent hover:border-neutral-300': !isSelected,
         'cursor-move': showDragHandle,
       }"
       @click.stop="handleClick"
@@ -153,14 +153,3 @@ 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="relative px-[25px]"
+    class="rounded p-2 relative"
     :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="relative px-[25px]"
+    class="rounded p-2 relative"
     :style="{ backgroundColor: block.settings.backgroundColor }"
     :data-testid="unsubscribeLinkBlockTestIds.container"
   >

package/app/components/Email/InlinePreview.vue

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

package/app/components/Email/Preview.vue

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

package/app/components/Email/SendTestEmailModal.vue

@@ -85,7 +85,6 @@ 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(
@@ -157,7 +156,6 @@ function onSubmit() {
     brand_id: resolvedBrandId.value,
     ...(sender_name ? { sender_name } : {}),
     from: state.value.from || undefined,
-    renderer: renderer.value,
   })
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "4.2.7-maizzle.0",
+  "version": "4.2.7",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -36,7 +36,7 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "4.2.7-maizzle.0"
+    "@dev.smartpricing/message-composer-utils": "4.2.7"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",

package/app/composables/useEmailRenderer.ts

@@ -1,23 +0,0 @@
-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,
-  }
-}