@dev.smartpricing/message-composer-layer 4.2.4 → 4.2.6-mjml.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/SendTestEmailModal.vue

@@ -91,11 +91,13 @@ const defaultSenderEmail = computed(
   () => composerContext.organizationData?.value?.senderEmail ?? '',
 )
 
-const accommodationName = computed(() => composerContext.accommodationName?.value ?? '')
+const accommodationName = computed(
+  () => composerContext.organizationData?.value?.accommodationName ?? '',
+)
 
 const state = ref<Schema>({
   to: '',
-  sender_name: accommodationName.value,
+  sender_name: '',
   from: '',
 })
 
@@ -109,6 +111,16 @@ watch(
   { immediate: true },
 )
 
+watch(
+  accommodationName,
+  (name) => {
+    if (!state.value.sender_name) {
+      state.value.sender_name = name
+    }
+  },
+  { immediate: true },
+)
+
 const schema = z.object({
   to: z
     .string()

package/app/composables/composerContext.ts

@@ -3,6 +3,8 @@ import type { AppContextConfig } from '@dev.smartpricing/message-composer-utils/
 
 export interface OrganizationData {
   senderEmail: string
+  /** Tenant accommodation/property name — defaults the test-email sender name */
+  accommodationName?: string
 }
 
 export interface ComposerContext {
@@ -18,7 +20,6 @@ export interface ComposerContext {
   default_tags?: Ref<string[]>
   metaWabaId?: Ref<string>
   metaAccessToken?: Ref<string>
-  accommodationName?: Ref<string>
   isAdmin?: Ref<boolean>
   organizationData?: Ref<OrganizationData>
 }