@dev.smartpricing/message-composer-layer 1.0.11 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/app/components/Layout/BasePage.vue +43 -0
  2. package/app/layouts/default.vue +5 -0
  3. package/app/pages/brands.vue +4 -8
  4. package/app/pages/images.vue +5 -9
  5. package/app/pages/index.vue +10 -14
  6. package/app/pages/preview/[id].vue +4 -0
  7. package/app/pages/template/email/[id].vue +46 -50
  8. package/app/pages/template/email/create.vue +46 -50
  9. package/app/pages/template/whatsapp/[id].vue +53 -56
  10. package/app/pages/template/whatsapp/create.vue +40 -44
  11. package/package.json +2 -2
package/app/components/Layout/BasePage.vue ADDED
@@ -0,0 +1,43 @@
1
+ <script setup lang="ts">
2
+ import type { ButtonProps, TabsItem } from "#ui/types";
3
+
4
+ const props = defineProps<{
5
+ title: string
6
+ tabs?: TabsItem[]
7
+ activeTab?: string | number
8
+ back?: ButtonProps
9
+ testId?: string
10
+ }>();
11
+
12
+ const emit = defineEmits<{
13
+ tabChange: [value: string | number]
14
+ }>();
15
+
16
+ watchEffect(() => {
17
+ useHead({ title: props.title });
18
+ });
19
+ </script>
20
+
21
+ <template>
22
+ <div class="flex flex-col min-h-0">
23
+ <SNavigationBarHeader
24
+ :title="title"
25
+ :back="back"
26
+ :tabs="tabs"
27
+ :active-tab="activeTab"
28
+ :data-testid="testId"
29
+ class="bg-white sticky top-0 z-10"
30
+ @tab-change="emit('tabChange', $event)"
31
+ >
32
+ <template #actions>
33
+ <div class="flex items-center gap-1.5">
34
+ <slot name="actions" />
35
+ </div>
36
+ </template>
37
+ </SNavigationBarHeader>
38
+
39
+ <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto sm:p-4 p-4">
40
+ <slot />
41
+ </div>
42
+ </div>
43
+ </template>
package/app/layouts/default.vue ADDED
@@ -0,0 +1,5 @@
1
+ <template>
2
+ <SNavigationPage :panel-props="{ ui: { body: 'p-0 sm:p-0 gap-0 sm:gap-0 overflow-hidden' } }">
3
+ <slot />
4
+ </SNavigationPage>
5
+ </template>
package/app/pages/brands.vue CHANGED
@@ -128,13 +128,9 @@ function handleDrawerSaved() {
128
128
  </script>
129
129
 
130
130
  <template>
131
- <SNavigationPage>
132
- <template #header>
133
- <SNavigationBarHeader :title="t('pages.brands.title')">
134
- <template #actions>
135
- <UButton icon="ph:plus" :label="t('pages.brands.new_brand')" @click="openCreate" />
136
- </template>
137
- </SNavigationBarHeader>
131
+ <LayoutBasePage :title="t('pages.brands.title')">
132
+ <template #actions>
133
+ <UButton icon="ph:plus" :label="t('pages.brands.new_brand')" @click="openCreate" />
138
134
  </template>
139
135
 
140
136
  <div class="flex-1 space-y-2.5 relative min-h-0 flex flex-col">
@@ -191,5 +187,5 @@ function handleDrawerSaved() {
191
187
  </div>
192
188
 
193
189
  <BrandDrawer v-model="drawerOpen" :brand-id="editingBrandId" @saved="handleDrawerSaved" />
194
- </SNavigationPage>
190
+ </LayoutBasePage>
195
191
  </template>
package/app/pages/images.vue CHANGED
@@ -46,14 +46,10 @@ async function handleDelete(item: MediaFromDb) {
46
46
  </script>
47
47
 
48
48
  <template>
49
- <SNavigationPage>
50
- <template #header>
51
- <SNavigationBarHeader
52
- :title="t('pages.images.title')"
53
- :data-testid="imagesPageTestIds.navbar"
54
- />
55
- </template>
56
-
49
+ <LayoutBasePage
50
+ :title="t('pages.images.title')"
51
+ :test-id="imagesPageTestIds.navbar"
52
+ >
57
53
  <div v-if="isPending" class="flex justify-center py-12">
58
54
  <UIcon
59
55
  name="i-heroicons-arrow-path"
@@ -137,5 +133,5 @@ async function handleDelete(item: MediaFromDb) {
137
133
  </div>
138
134
  </UCard>
139
135
  </div>
140
- </SNavigationPage>
136
+ </LayoutBasePage>
141
137
  </template>
package/app/pages/index.vue CHANGED
@@ -169,19 +169,15 @@ const tabItems = computed(() => {
169
169
  </script>
170
170
 
171
171
  <template>
172
- <SNavigationPage>
173
- <template #header>
174
- <SNavigationBarHeader
175
- :title="$t('pages.message_library.title')"
176
- :tabs="tabItems.length > 1 ? tabItems : undefined"
177
- :active-tab="renderType"
178
- :data-testid="homeTestIds.navbar"
179
- @tab-change="renderType = $event"
180
- >
181
- <template #actions>
182
- <CreateTemplateButton />
183
- </template>
184
- </SNavigationBarHeader>
172
+ <LayoutBasePage
173
+ :title="$t('pages.message_library.title')"
174
+ :tabs="tabItems.length > 1 ? tabItems : undefined"
175
+ :active-tab="renderType"
176
+ :test-id="homeTestIds.navbar"
177
+ @tab-change="renderType = $event"
178
+ >
179
+ <template #actions>
180
+ <CreateTemplateButton />
185
181
  </template>
186
182
 
187
183
  <BaseTable
@@ -194,5 +190,5 @@ const tabItems = computed(() => {
194
190
  @publish="askPublishGroup"
195
191
  @unpublish="askUnpublishGroup"
196
192
  />
197
- </SNavigationPage>
193
+ </LayoutBasePage>
198
194
  </template>
package/app/pages/preview/[id].vue CHANGED
@@ -5,6 +5,10 @@ import { useRoute } from 'vue-router'
5
5
  import { useI18n } from 'vue-i18n'
6
6
  import { useMessageGroupQuery } from '~/queries/messageGroups'
7
7
 
8
+ definePageMeta({
9
+ layout: false,
10
+ })
11
+
8
12
  const route = useRoute()
9
13
  const { locale } = useI18n()
10
14
  const { data: messageGroup } = useMessageGroupQuery(() => route.params.id as string)
package/app/pages/template/email/[id].vue CHANGED
@@ -412,55 +412,51 @@ watch(
412
412
  </script>
413
413
 
414
414
  <template>
415
- <SNavigationPage>
416
- <template #header>
417
- <SNavigationBarHeader
418
- :title="$t('pages.email.edit_message_group.title')"
419
- :tabs="[
420
- {
421
- label: $t('pages.email.edit_message_group.tab_content'),
422
- value: 'content',
423
- },
424
- {
425
- label: $t('pages.email.edit_message_group.tab_translations'),
426
- value: 'translations',
427
- },
428
- ]"
429
- :active-tab="activeTab"
430
- :data-testid="templateEmailEditTestIds.navbar"
431
- @tab-change="activeTab = $event"
432
- >
433
- <template #actions>
434
- <UButton
435
- @click="
436
- () => {
437
- notifyParent('TEMPLATE_CANCELLED', { id: messageGroup?.id })
438
- goBackOrFallback()
439
- }
440
- "
441
- :label="$t('common.actions.cancel')"
442
- color="primary"
443
- variant="ghost"
444
- :loading="saving || isTranslating"
445
- :data-testid="templateEmailEditTestIds.cancelButton"
446
- />
447
- <UButton
448
- @click="handleSaveAsDraft"
449
- :label="$t('pages.email.edit_message_group.save_as_draft')"
450
- color="primary"
451
- variant="outline"
452
- :loading="saving || isTranslating"
453
- :data-testid="templateEmailEditTestIds.saveDraftButton"
454
- />
455
- <UButton
456
- @click="handleSaveTemplate"
457
- :label="$t('pages.email.edit_message_group.save_message')"
458
- color="primary"
459
- :loading="saving || isTranslating"
460
- :data-testid="templateEmailEditTestIds.saveTemplateButton"
461
- />
462
- </template>
463
- </SNavigationBarHeader>
415
+ <LayoutBasePage
416
+ :title="$t('pages.email.edit_message_group.title')"
417
+ :tabs="[
418
+ {
419
+ label: $t('pages.email.edit_message_group.tab_content'),
420
+ value: 'content',
421
+ },
422
+ {
423
+ label: $t('pages.email.edit_message_group.tab_translations'),
424
+ value: 'translations',
425
+ },
426
+ ]"
427
+ :active-tab="activeTab"
428
+ :test-id="templateEmailEditTestIds.navbar"
429
+ @tab-change="activeTab = $event"
430
+ >
431
+ <template #actions>
432
+ <UButton
433
+ @click="
434
+ () => {
435
+ notifyParent('TEMPLATE_CANCELLED', { id: messageGroup?.id })
436
+ goBackOrFallback()
437
+ }
438
+ "
439
+ :label="$t('common.actions.cancel')"
440
+ color="primary"
441
+ variant="ghost"
442
+ :loading="saving || isTranslating"
443
+ :data-testid="templateEmailEditTestIds.cancelButton"
444
+ />
445
+ <UButton
446
+ @click="handleSaveAsDraft"
447
+ :label="$t('pages.email.edit_message_group.save_as_draft')"
448
+ color="primary"
449
+ variant="outline"
450
+ :loading="saving || isTranslating"
451
+ :data-testid="templateEmailEditTestIds.saveDraftButton"
452
+ />
453
+ <UButton
454
+ @click="handleSaveTemplate"
455
+ :label="$t('pages.email.edit_message_group.save_message')"
456
+ color="primary"
457
+ :loading="saving || isTranslating"
458
+ :data-testid="templateEmailEditTestIds.saveTemplateButton"
459
+ />
464
460
  </template>
465
461
 
466
462
  <div v-if="validationErrors.length">
@@ -592,5 +588,5 @@ watch(
592
588
  @translate-and-save="translateAndSave"
593
589
  @go-to-translations="goToTranslations"
594
590
  />
595
- </SNavigationPage>
591
+ </LayoutBasePage>
596
592
  </template>
package/app/pages/template/email/create.vue CHANGED
@@ -375,55 +375,51 @@ async function translateAndSave() {
375
375
  </script>
376
376
 
377
377
  <template>
378
- <SNavigationPage>
379
- <template #header>
380
- <SNavigationBarHeader
381
- :title="$t('pages.email.create_message_group.title')"
382
- :tabs="[
383
- {
384
- label: $t('pages.email.create_message_group.tab_content'),
385
- value: 'content',
386
- },
387
- {
388
- label: $t('pages.email.create_message_group.tab_translations'),
389
- value: 'translations',
390
- },
391
- ]"
392
- :active-tab="activeTab"
393
- :data-testid="templateEmailCreateTestIds.navbar"
394
- @tab-change="activeTab = $event"
395
- >
396
- <template #actions>
397
- <UButton
398
- @click="
399
- () => {
400
- notifyParent('TEMPLATE_CANCELLED')
401
- goBackOrFallback()
402
- }
403
- "
404
- :label="$t('common.actions.cancel')"
405
- color="primary"
406
- variant="ghost"
407
- :loading="saving || isTranslating"
408
- :data-testid="templateEmailCreateTestIds.cancelButton"
409
- />
410
- <UButton
411
- @click="handleSaveAsDraft"
412
- :label="$t('pages.email.create_message_group.save_as_draft')"
413
- color="primary"
414
- variant="outline"
415
- :loading="saving || isTranslating"
416
- :data-testid="templateEmailCreateTestIds.saveDraftButton"
417
- />
418
- <UButton
419
- @click="handleSaveTemplate"
420
- :label="$t('pages.email.create_message_group.save_message')"
421
- color="primary"
422
- :loading="saving || isTranslating"
423
- :data-testid="templateEmailCreateTestIds.saveTemplateButton"
424
- />
425
- </template>
426
- </SNavigationBarHeader>
378
+ <LayoutBasePage
379
+ :title="$t('pages.email.create_message_group.title')"
380
+ :tabs="[
381
+ {
382
+ label: $t('pages.email.create_message_group.tab_content'),
383
+ value: 'content',
384
+ },
385
+ {
386
+ label: $t('pages.email.create_message_group.tab_translations'),
387
+ value: 'translations',
388
+ },
389
+ ]"
390
+ :active-tab="activeTab"
391
+ :test-id="templateEmailCreateTestIds.navbar"
392
+ @tab-change="activeTab = $event"
393
+ >
394
+ <template #actions>
395
+ <UButton
396
+ @click="
397
+ () => {
398
+ notifyParent('TEMPLATE_CANCELLED')
399
+ goBackOrFallback()
400
+ }
401
+ "
402
+ :label="$t('common.actions.cancel')"
403
+ color="primary"
404
+ variant="ghost"
405
+ :loading="saving || isTranslating"
406
+ :data-testid="templateEmailCreateTestIds.cancelButton"
407
+ />
408
+ <UButton
409
+ @click="handleSaveAsDraft"
410
+ :label="$t('pages.email.create_message_group.save_as_draft')"
411
+ color="primary"
412
+ variant="outline"
413
+ :loading="saving || isTranslating"
414
+ :data-testid="templateEmailCreateTestIds.saveDraftButton"
415
+ />
416
+ <UButton
417
+ @click="handleSaveTemplate"
418
+ :label="$t('pages.email.create_message_group.save_message')"
419
+ color="primary"
420
+ :loading="saving || isTranslating"
421
+ :data-testid="templateEmailCreateTestIds.saveTemplateButton"
422
+ />
427
423
  </template>
428
424
 
429
425
  <div v-if="validationErrors.length">
@@ -558,5 +554,5 @@ async function translateAndSave() {
558
554
  @translate-and-save="translateAndSave"
559
555
  @go-to-translations="goToTranslations"
560
556
  />
561
- </SNavigationPage>
557
+ </LayoutBasePage>
562
558
  </template>
package/app/pages/template/whatsapp/[id].vue CHANGED
@@ -361,61 +361,58 @@ watch(
361
361
  </script>
362
362
 
363
363
  <template>
364
- <SNavigationPage>
365
- <template #header>
366
- <SNavigationBarHeader
367
- v-if="messageGroup"
368
- :title="$t('pages.whatsapp.edit_message_group.title')"
369
- :tabs="[
370
- { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
371
- { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
372
- ]"
373
- :active-tab="activeTab"
374
- :data-testid="templateWhatsappEditTestIds.navbar"
375
- @tab-change="activeTab = $event"
376
- >
377
- <template #actions>
378
- <UButton
379
- @click="
380
- () => {
381
- notifyParent('TEMPLATE_CANCELLED', { id: messageGroup?.id })
382
- goBackOrFallback()
383
- }
384
- "
385
- :label="$t('common.actions.cancel')"
386
- color="primary"
387
- variant="ghost"
388
- :loading="saving || isTranslating"
389
- :data-testid="templateWhatsappEditTestIds.cancelButton"
390
- />
391
- <UButton
392
- v-if="isPending || isApproved"
393
- @click="handleSaveAsNew()"
394
- :label="$t('pages.whatsapp.create_message_group.save_as_new')"
395
- color="secondary"
396
- variant="outline"
397
- :loading="saving || isTranslating"
398
- :data-testid="templateWhatsappEditTestIds.saveAsNewButton"
399
- />
400
- <UButton
401
- v-else
402
- @click="handleSaveDraft()"
403
- :label="$t('pages.whatsapp.create_message_group.save_draft')"
404
- color="secondary"
405
- variant="outline"
406
- :loading="saving || isTranslating"
407
- :data-testid="templateWhatsappEditTestIds.saveDraftButton"
408
- />
409
- <UButton
410
- v-if="!isPending && !isApproved"
411
- @click="handleRequestApproval()"
412
- :label="$t('pages.whatsapp.create_message_group.request_approval')"
413
- color="primary"
414
- :loading="saving || isTranslating"
415
- :data-testid="templateWhatsappEditTestIds.requestApprovalButton"
416
- />
417
- </template>
418
- </SNavigationBarHeader>
364
+ <LayoutBasePage
365
+ :title="$t('pages.whatsapp.edit_message_group.title')"
366
+ :tabs="[
367
+ { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
368
+ { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
369
+ ]"
370
+ :active-tab="activeTab"
371
+ :test-id="templateWhatsappEditTestIds.navbar"
372
+ @tab-change="activeTab = $event"
373
+ >
374
+ <template #actions>
375
+ <template v-if="messageGroup">
376
+ <UButton
377
+ @click="
378
+ () => {
379
+ notifyParent('TEMPLATE_CANCELLED', { id: messageGroup?.id })
380
+ goBackOrFallback()
381
+ }
382
+ "
383
+ :label="$t('common.actions.cancel')"
384
+ color="primary"
385
+ variant="ghost"
386
+ :loading="saving || isTranslating"
387
+ :data-testid="templateWhatsappEditTestIds.cancelButton"
388
+ />
389
+ <UButton
390
+ v-if="isPending || isApproved"
391
+ @click="handleSaveAsNew()"
392
+ :label="$t('pages.whatsapp.create_message_group.save_as_new')"
393
+ color="secondary"
394
+ variant="outline"
395
+ :loading="saving || isTranslating"
396
+ :data-testid="templateWhatsappEditTestIds.saveAsNewButton"
397
+ />
398
+ <UButton
399
+ v-else
400
+ @click="handleSaveDraft()"
401
+ :label="$t('pages.whatsapp.create_message_group.save_draft')"
402
+ color="secondary"
403
+ variant="outline"
404
+ :loading="saving || isTranslating"
405
+ :data-testid="templateWhatsappEditTestIds.saveDraftButton"
406
+ />
407
+ <UButton
408
+ v-if="!isPending && !isApproved"
409
+ @click="handleRequestApproval()"
410
+ :label="$t('pages.whatsapp.create_message_group.request_approval')"
411
+ color="primary"
412
+ :loading="saving || isTranslating"
413
+ :data-testid="templateWhatsappEditTestIds.requestApprovalButton"
414
+ />
415
+ </template>
419
416
  </template>
420
417
 
421
418
  <div v-if="validationErrors.length">
@@ -557,5 +554,5 @@ watch(
557
554
  @translate-and-save="translateAndSave"
558
555
  @go-to-translations="goToTranslations"
559
556
  />
560
- </SNavigationPage>
557
+ </LayoutBasePage>
561
558
  </template>
package/app/pages/template/whatsapp/create.vue CHANGED
@@ -275,49 +275,45 @@ async function translateAndSave() {
275
275
  </script>
276
276
 
277
277
  <template>
278
- <SNavigationPage>
279
- <template #header>
280
- <SNavigationBarHeader
281
- :title="$t('pages.whatsapp.create_message_group.title')"
282
- :tabs="[
283
- { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
284
- { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
285
- ]"
286
- :active-tab="activeTab"
287
- :data-testid="templateWhatsappCreateTestIds.navbar"
288
- @tab-change="activeTab = $event"
289
- >
290
- <template #actions>
291
- <UButton
292
- @click="
293
- () => {
294
- notifyParent('TEMPLATE_CANCELLED')
295
- goBackOrFallback()
296
- }
297
- "
298
- :label="$t('common.actions.cancel')"
299
- color="primary"
300
- variant="ghost"
301
- :loading="saving || isTranslating"
302
- :data-testid="templateWhatsappCreateTestIds.cancelButton"
303
- />
304
- <UButton
305
- @click="handleSaveDraft()"
306
- :label="$t('pages.whatsapp.create_message_group.save_draft')"
307
- color="primary"
308
- variant="outline"
309
- :loading="saving || isTranslating"
310
- :data-testid="templateWhatsappCreateTestIds.saveDraftButton"
311
- />
312
- <UButton
313
- @click="handleRequestApproval()"
314
- :label="$t('pages.whatsapp.create_message_group.request_approval')"
315
- color="primary"
316
- :loading="saving || isTranslating"
317
- :data-testid="templateWhatsappCreateTestIds.requestApprovalButton"
318
- />
319
- </template>
320
- </SNavigationBarHeader>
278
+ <LayoutBasePage
279
+ :title="$t('pages.whatsapp.create_message_group.title')"
280
+ :tabs="[
281
+ { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
282
+ { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
283
+ ]"
284
+ :active-tab="activeTab"
285
+ :test-id="templateWhatsappCreateTestIds.navbar"
286
+ @tab-change="activeTab = $event"
287
+ >
288
+ <template #actions>
289
+ <UButton
290
+ @click="
291
+ () => {
292
+ notifyParent('TEMPLATE_CANCELLED')
293
+ goBackOrFallback()
294
+ }
295
+ "
296
+ :label="$t('common.actions.cancel')"
297
+ color="primary"
298
+ variant="ghost"
299
+ :loading="saving || isTranslating"
300
+ :data-testid="templateWhatsappCreateTestIds.cancelButton"
301
+ />
302
+ <UButton
303
+ @click="handleSaveDraft()"
304
+ :label="$t('pages.whatsapp.create_message_group.save_draft')"
305
+ color="primary"
306
+ variant="outline"
307
+ :loading="saving || isTranslating"
308
+ :data-testid="templateWhatsappCreateTestIds.saveDraftButton"
309
+ />
310
+ <UButton
311
+ @click="handleRequestApproval()"
312
+ :label="$t('pages.whatsapp.create_message_group.request_approval')"
313
+ color="primary"
314
+ :loading="saving || isTranslating"
315
+ :data-testid="templateWhatsappCreateTestIds.requestApprovalButton"
316
+ />
321
317
  </template>
322
318
 
323
319
  <div v-if="validationErrors.length">
@@ -464,5 +460,5 @@ async function translateAndSave() {
464
460
  @translate-and-save="translateAndSave"
465
461
  @go-to-translations="goToTranslations"
466
462
  />
467
- </SNavigationPage>
463
+ </LayoutBasePage>
468
464
  </template>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dev.smartpricing/message-composer-layer",
3
- "version": "1.0.11",
3
+ "version": "1.0.12",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./nuxt.config.ts",
@@ -39,7 +39,7 @@
39
39
  "vue-router": "^5.0.6",
40
40
  "vue3-emoji-picker": "^1.1.8",
41
41
  "zod": "^4.4.1",
42
- "@dev.smartpricing/message-composer-utils": "3.1.11"
42
+ "@dev.smartpricing/message-composer-utils": "3.1.12"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@nuxt/eslint": "^1.15.2",