@designcrowd/library.brand-page 5.6.3 → 5.6.4-fluid-2

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -231,8 +231,48 @@ export const SampleBanner = (): any => {
   const brandPageMakerStore = useBrandPageMakerStore();
 
   const bannerContent = createInitialBannerSectionContent();
-  bannerContent.description = 'Lorem ipsum dolor sit amet';
-
+  bannerContent.title = 'LAUNCHING SOON';
+  bannerContent.description = 'This Is Going To Be Epic';
+  bannerContent.buttonText = 'CONTACT US';
+  bannerContent.titleStyle.textStyleType = undefined;
+  bannerContent.titleStyle.fontSize = '6.25em';
+  bannerContent.titleStyle.fontFamily = 'Ubuntu';
+  bannerContent.titleStyle.lineHeight = '1';
+  bannerContent.titleStyle.textAlign = 'left';
+  bannerContent.displayStyle = 'left-aligned';
+
+  bannerContent.descriptionStyle.textStyleType = undefined;
+  bannerContent.descriptionStyle.fontFamily = 'Work Sans';
+  bannerContent.descriptionStyle.fontSize = '2.6875em';
+  bannerContent.descriptionStyle.textAlign = 'left';
+
+  bannerContent.buttonTextStyle.textStyleType = undefined;
+  bannerContent.buttonTextStyle.fontFamily = 'Ubuntu';
+  bannerContent.buttonTextStyle.fontSize = '1.5em';
+  bannerContent.buttonTextStyle.textAlign = 'left';
+
+  console.log('bannerContent', bannerContent);
+
+  const bannerContent2 = createInitialBannerSectionContent();
+  bannerContent2.title = 'LAUNCHING SOON';
+  bannerContent2.description = 'This Is Going To Be Epic2';
+  bannerContent2.buttonText = 'CONTACT US';
+  bannerContent2.titleStyle.textStyleType = undefined;
+  bannerContent2.titleStyle.fontSize = '6.25em';
+  bannerContent2.titleStyle.fontFamily = 'Ubuntu';
+  bannerContent2.titleStyle.lineHeight = '1';
+  bannerContent2.titleStyle.textAlign = 'left';
+  bannerContent2.displayStyle = 'left-aligned';
+
+  bannerContent2.descriptionStyle.textStyleType = undefined;
+  bannerContent2.descriptionStyle.fontFamily = 'Work Sans';
+  bannerContent2.descriptionStyle.fontSize = '2.6875em';
+  bannerContent2.descriptionStyle.textAlign = 'left';
+
+  bannerContent2.buttonTextStyle.textStyleType = undefined;
+  bannerContent2.buttonTextStyle.fontFamily = 'Ubuntu';
+  bannerContent2.buttonTextStyle.fontSize = '1.5em';
+  bannerContent2.buttonTextStyle.textAlign = 'left';
   brandPageMakerStore.setViewport({
     viewport: VIEWPORTS.desktop,
   });
@@ -250,7 +290,7 @@ export const SampleBanner = (): any => {
               {
                 title: 'Home',
                 slug: 'home',
-                contents: [bannerContent],
+                contents: [bannerContent, bannerContent2],
               },
             ],
             brandPageType: BRAND_PAGE_TYPES.brandSite,

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.ts

@@ -106,7 +106,13 @@ export default defineComponent({
       };
     },
   },
+  mounted() {
+    this.dispatchViewPortChangeEvent();
+  },
   watch: {
+    viewport() {
+      this.dispatchViewPortChangeEvent();
+    },
     selectedItemId(itemId: string) {
       this.scrollToContentItemByItemId(itemId);
     },
@@ -134,6 +140,13 @@ export default defineComponent({
     },
   },
   methods: {
+    dispatchViewPortChangeEvent() {
+      window.dispatchEvent(
+        new CustomEvent('editor:viewport', {
+          detail: { viewport: this.viewport },
+        }),
+      );
+    },
     onDraggingStart(): void {
       this.isDraggingContent = true;
 

package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.ts

@@ -139,6 +139,9 @@ export default defineComponent({
           this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandSite,
         isBrandContact:
           this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandContact,
+        options: {
+          disableNavigationSideMenu: true,
+        },
       };
     },
 

package/src/brand-page-maker/convertors/text-size-value.convertor.ts

@@ -1,6 +1,6 @@
 import type { ValueConvertor } from '../models';
 import { DEFAULT_FONT_SIZE } from '../../brand-page/constants/';
-import { pxToRem, remToPx } from '../utils/text.util';
+import { pxToEm, emToPx } from '../utils/text.util';
 
 export const textSizeValueConvertor: ValueConvertor<BrandPageCssStyle, string> =
   {
@@ -8,13 +8,13 @@ export const textSizeValueConvertor: ValueConvertor<BrandPageCssStyle, string> =
 
     convert(value: BrandPageCssStyle): string {
       return (
-        value.fontSize ? remToPx(value.fontSize) : DEFAULT_FONT_SIZE
+        value.fontSize ? emToPx(value.fontSize) : DEFAULT_FONT_SIZE
       ).toString();
     },
 
     convertBack(valuePx: string): BrandPageCssStyle {
       return {
-        fontSize: pxToRem(valuePx),
+        fontSize: pxToEm(valuePx),
       };
     },
   };

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -472,13 +472,22 @@ describe('brand page maker store module', () => {
     // Assert
     expect(
       styleSettingsStore.textStyles.textStyleOptions.titles.style.fontSize,
-    ).toBe(textStyles.textStyleOptions.titles.style.fontSize);
+    ).toBe(
+      textStyles.textStyleOptions.titles.style.fontSize?.replace('rem', 'em'),
+    );
     expect(
       styleSettingsStore.textStyles.textStyleOptions.headings.style.fontSize,
-    ).toBe(textStyles.textStyleOptions.headings.style.fontSize);
+    ).toBe(
+      textStyles.textStyleOptions.headings.style.fontSize?.replace('rem', 'em'),
+    );
     expect(
       styleSettingsStore.textStyles.textStyleOptions.paragraphs.style.fontSize,
-    ).toBe(textStyles.textStyleOptions.paragraphs.style.fontSize);
+    ).toBe(
+      textStyles.textStyleOptions.paragraphs.style.fontSize?.replace(
+        'rem',
+        'em',
+      ),
+    );
   });
 
   test('applySelectedTemplate should not set design template token when applying selected template and is admin', async () => {

package/src/brand-page-maker/utils/text.util.ts

@@ -1,10 +1,10 @@
-export const pxToRem = (px: string) => {
+export const pxToEm = (px: string) => {
   const value = parseFloat(px) / 16;
 
-  return `${value}rem`;
+  return `${value}em`;
 };
 
-export const remToPx = (rem: string) => {
+export const emToPx = (rem: string) => {
   const value = parseFloat(rem) * 16;
 
   return `${value}`;

package/src/clients/user-media-client.ts

@@ -24,7 +24,7 @@ export class UserMediaClient {
 
     try {
       const response = await axios.get<PolicyData>(
-        `${this.endpoints.userPolicyDataEndpoint}?isPublic=${isPublic}&isUpload=true`,
+        `${this.endpoints.userPolicyDataEndpoint}?isPublic=${isPublic}`,
       );
 
       if (response.status !== 200) {
@@ -56,21 +56,19 @@ export class UserMediaClient {
     isPublic: boolean,
     relatedAssetToken: string | undefined,
     mediaType: string,
-    hasTriggeredProcessing: boolean,
   ): Promise<UserMediaItem | undefined> {
     try {
-      const reqUrl = hasTriggeredProcessing
-        ? `${this.endpoints.createUserMediaEndpoint}/${mediaToken}?hasTriggeredProcessing=${hasTriggeredProcessing}`
-        : `${this.endpoints.createUserMediaEndpoint}/${mediaToken}`;
-
-      const response = await axios.put<UserMediaItem>(reqUrl, {
-        mediaToken,
-        mimeType: type,
-        name,
-        isPublic,
-        relatedAssetToken,
-        mediaType,
-      });
+      const response = await axios.put<UserMediaItem>(
+        `${this.endpoints.createUserMediaEndpoint}/${mediaToken}`,
+        {
+          mediaToken,
+          mimeType: type,
+          name,
+          isPublic,
+          relatedAssetToken,
+          mediaType,
+        },
+      );
 
       return response.data;
     } catch (e) {
@@ -120,7 +118,6 @@ export class UserMediaClient {
       true,
       relatedAssetToken,
       file.mediaType,
-      false,
     );
 
     return newMedia?.url;
@@ -135,7 +132,9 @@ export class UserMediaClient {
 
     file.mediaToken = mediaToken;
 
-    const key = `${this.policyData.keyPrefix}${file.mediaToken}`;
+    const key = `${this.policyData.keyPrefix}${
+      file.mediaToken
+    }${getExtensionFromMimeType(file.type)}`;
 
     file.key = key;
     formData.append('key', key);
@@ -179,22 +178,6 @@ export class UserMediaClient {
     }
   }
 
-  async getUserMediaByTokenAsync(
-    mediaToken: string,
-  ): Promise<UserMediaItem | undefined> {
-    try {
-      const response = await axios.get(
-        `${this.endpoints.getAllUserMediaEndpoint}/${mediaToken}?isPublic=true`,
-      );
-
-      return response.data;
-    } catch (e) {
-      if (process.env.NODE_ENV !== 'production') {
-        console.error(e);
-      }
-    }
-  }
-
   async deleteUserMediaByUserMediaToken(
     userMediaToken: string,
   ): Promise<boolean> {

package/src/shared/my-uploads/MyMedia.mixin.ts

@@ -2,10 +2,7 @@ import { UI_EVENTS } from '../../brand-page-maker/constants';
 import type { PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
 import type { UserMediaItemWithDimensions } from './models';
-import {
-  getInstance as getUserMediaClientInstance,
-  UserMediaClient,
-} from '../../clients/user-media-client';
+import { getInstance as getUserMediaClientInstance } from '../../clients/user-media-client';
 import { preloadImage } from '../../brand-page/utils';
 import { useUiStore } from '../../brand-page-maker/stores';
 import { MEDIA_TYPES } from '../../brand-page/models/brand-page-context.model';
@@ -40,7 +37,6 @@ export default defineComponent({
       isDeleting: false as boolean,
       selectedDeleteMediaItem: null as UserMediaItemWithDimensions | null,
       userMedia: [] as UserMediaItemWithDimensions[],
-      userMediaClient: null as UserMediaClient | null,
       loading: false,
     };
   },
@@ -60,8 +56,6 @@ export default defineComponent({
     },
   },
   async mounted() {
-    this.userMediaClient = getUserMediaClientInstance(this.endpoints);
-
     await this.loadUserMedia();
 
     if (window) {
@@ -82,7 +76,8 @@ export default defineComponent({
   methods: {
     async loadUserMedia() {
       this.loading = true;
-      const images = await this.userMediaClient.getUserMediaAsync(
+      const userMediaClient = getUserMediaClientInstance(this.endpoints);
+      const images = await userMediaClient.getUserMediaAsync(
         this.supportedFileExtensions,
         true,
         this.mediaType,
@@ -147,10 +142,11 @@ export default defineComponent({
       this.isDeleting = true;
 
       try {
-        const deleted =
-          await this.userMediaClient.deleteUserMediaByUserMediaToken(
-            this.selectedDeleteMediaItem.media.token,
-          );
+        const userMediaClient = getUserMediaClientInstance(this.endpoints);
+
+        const deleted = await userMediaClient.deleteUserMediaByUserMediaToken(
+          this.selectedDeleteMediaItem.media.token,
+        );
 
         if (deleted) {
           this.selectedDeleteMediaItem = null;
@@ -165,29 +161,5 @@ export default defineComponent({
     isSvg(imageUrl: string | undefined): boolean {
       return imageUrl?.endsWith('.svg') || false;
     },
-
-    async onMediaStatusUpdatedToDone(data) {
-      const newMedia = this.userMedia.map((m) => {
-        if (m.media.token === data.media.token) {
-          return {
-            imagePreviewSrc: data.thumbnailUrl,
-            imageSrc: data.url,
-            ...data,
-          };
-        }
-
-        return m;
-      });
-
-      this.userMedia = newMedia as UserMediaItemWithDimensions[];
-    },
-
-    isImageUploaded(image) {
-      if (image.media && image.media.status) {
-        return image.media.status === 'done';
-      }
-
-      return true;
-    },
   },
 });

package/src/shared/my-uploads/MyMedia.vue

@@ -25,12 +25,15 @@
             class="c-media-btn tw-p-0 tw-border-none tw-cursor-pointer"
             @click="setSelectedMediaItem(image)"
           >
-            <!-- new image item here -->
-            <app-media-selection-item
-              :image-test-tag="`user-media-${idx}`"
-              :item="image"
-              :media-client="userMediaClient"
-              @on-media-done="onMediaStatusUpdatedToDone"
+            <img
+              :data-test-tag="`user-media-${idx}`"
+              :src="image.thumbnailUrl || image.url"
+              alt=""
+              class="c-media-btn__img hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500"
+              :class="{
+                'tw-bg-grayscale-600': isSvg(image.url),
+                'tw-bg-white': !isSvg(image.url),
+              }"
             />
           </button>
           <!-- End media image -->
@@ -67,7 +70,7 @@
           <!-- End media delete confirmation -->
           <!-- Start media delete button -->
           <button
-            v-else-if="isDeleteEnabled && isImageUploaded(image)"
+            v-else-if="isDeleteEnabled"
             class="tw-absolute tw-bottom-15 tw-right-2 tw-bg-white tw-rounded tw-p-1 tw-border-none tw-cursor-pointer"
             @click="onMediaDeleteButtonClick(image)"
           >
@@ -90,14 +93,12 @@
 <script>
 import { Button, Icon, Loader } from '@designcrowd/fe-shared-lib';
 import MyMediaMixin from './MyMedia.mixin.ts';
-import MyMediaSelectionItem from './MyMediaSelectionItem.vue';
 
 export default {
   components: {
     Button,
     Icon,
     Loader,
-    appMediaSelectionItem: MyMediaSelectionItem,
   },
   mixins: [MyMediaMixin],
   setup(props, context) {

package/src/shared/my-uploads/MyUploads.mixin.ts

@@ -191,7 +191,6 @@ export default defineComponent({
           true,
           undefined,
           this.mediaType,
-          true,
         );
       }
 

package/src/shared/my-uploads/models.ts

@@ -4,7 +4,6 @@ interface UserMediaItemMedia {
   name: string;
   mimeType: string;
   createdOn: string;
-  status: string;
 }
 
 export interface UserMediaItem {

package/lib/src/brand-page/components/text-wrapper/TextWrapper.mixin.d.ts

@@ -1,44 +0,0 @@
-import type { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    textStyle: {
-        type: PropType<BrandPageCssStyle>;
-        required: false;
-        default: undefined;
-    };
-    text: {
-        type: StringConstructor;
-        required: true;
-    };
-    element: {
-        type: StringConstructor;
-        required: false;
-        default: () => string;
-    };
-}>, {}, {
-    isCollapsed: boolean;
-}, {
-    textStyles(): {
-        backgroundColor: any;
-    };
-    style(): any;
-    padding(): "" | "tw-py-2 tw-px-4";
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    textStyle: {
-        type: PropType<BrandPageCssStyle>;
-        required: false;
-        default: undefined;
-    };
-    text: {
-        type: StringConstructor;
-        required: true;
-    };
-    element: {
-        type: StringConstructor;
-        required: false;
-        default: () => string;
-    };
-}>> & Readonly<{}>, {
-    textStyle: BrandPageCssStyle;
-    element: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/brand-page/components/text-wrapper/TextWrapper.mixin.js

@@ -1,38 +0,0 @@
-import { defineComponent } from 'vue';
-export default defineComponent({
-    props: {
-        textStyle: {
-            type: Object,
-            required: false,
-            default: undefined,
-        },
-        text: {
-            type: String,
-            required: true,
-        },
-        element: {
-            type: String,
-            required: false,
-            default: () => 'p',
-        },
-    },
-    data: () => ({
-        isCollapsed: false,
-    }),
-    computed: {
-        textStyles() {
-            return {
-                backgroundColor: this.textStyle.backgroundColor,
-            };
-        },
-        style() {
-            const { backgroundColor, ...textStyle } = this.textStyle;
-            return textStyle;
-        },
-        padding() {
-            return this.textStyle.backgroundColor ? 'tw-py-2 tw-px-4' : '';
-        },
-    },
-    watch: {},
-    methods: {},
-});

package/src/brand-page/components/text-wrapper/TextWrapper.mixin.ts

@@ -1,41 +0,0 @@
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-
-export default defineComponent({
-  props: {
-    textStyle: {
-      type: Object as PropType<BrandPageCssStyle>,
-      required: false,
-      default: undefined,
-    },
-    text: {
-      type: String,
-      required: true,
-    },
-    element: {
-      type: String,
-      required: false,
-      default: () => 'p',
-    },
-  },
-  data: () => ({
-    isCollapsed: false as boolean,
-  }),
-  computed: {
-    textStyles() {
-      return {
-        backgroundColor: this.textStyle.backgroundColor,
-      };
-    },
-    style() {
-      const { backgroundColor, ...textStyle } = this.textStyle;
-
-      return textStyle;
-    },
-    padding() {
-      return this.textStyle.backgroundColor ? 'tw-py-2 tw-px-4' : '';
-    },
-  },
-  watch: {},
-  methods: {},
-});

package/src/shared/my-uploads/MyMediaSelectionItem.vue

@@ -1,137 +0,0 @@
-<template>
-  <img
-    v-if="isDone"
-    :data-test-tag="props.imageTestTag"
-    :src="previewSrc"
-    alt=""
-    class="c-media-btn__img hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500"
-    :class="{
-      'tw-bg-grayscale-600': isSvg(previewSrc),
-      'tw-bg-white': !isSvg(previewSrc),
-    }"
-  />
-  <div v-else class="tw-w-full tw-h-full">
-    <div
-      v-if="error"
-      class="tw-flex tw-h-full tw-justify-center tw-items-center"
-    >
-      <Icon
-        name="error"
-        size="lg"
-        color="secondary-300"
-        classes="tw-self-center"
-      />
-    </div>
-    <div v-else class="tw-flex tw-h-full tw-justify-center tw-items-center">
-      <Loader />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, defineProps, defineEmits } from 'vue';
-import { Icon, Loader } from '@designcrowd/fe-shared-lib';
-import type { UserMediaClient } from 'src/clients/user-media-client';
-import type { UserMediaItemWithDimensions } from './models';
-
-const MAX_POLL = 5;
-const EXTRA_WAIT_TIME_EVERY_10_POLL = 2000;
-const POLL_WAIT = 5000;
-
-const props = defineProps<{
-  imageTestTag: string;
-  item: UserMediaItemWithDimensions;
-  mediaClient: UserMediaClient;
-}>();
-
-const emit = defineEmits<{
-  (e: string, payload: any): void;
-}>();
-
-const isDone = ref(false);
-const previewSrc = ref<string>('');
-const error = ref(false);
-const currentPoll = ref(0);
-
-function isSvg(imageUrl: string | null): boolean {
-  return imageUrl?.endsWith('.svg') || false;
-}
-
-async function checkStatusAsync(): Promise<boolean> {
-  currentPoll.value += 1;
-
-  const data = await props.mediaClient.getUserMediaByTokenAsync(
-    props.item.media.token,
-  );
-
-  if (data) {
-    const status = data.media.status;
-
-    if (status === 'inprogress') {
-      return true;
-    }
-
-    if (status === 'done') {
-      emit('on-media-done', data);
-      previewSrc.value = data.thumbnailUrl ?? data.url ?? '';
-      isDone.value = true;
-    } else if (status === 'failed') {
-      error.value = true;
-    }
-  }
-
-  return false;
-}
-
-async function handleProgressAsync() {
-  let repeat = true;
-
-  try {
-    do {
-      repeat = await checkStatusAsync();
-
-      if (currentPoll.value >= MAX_POLL) {
-        error.value = true;
-        repeat = false;
-      }
-
-      // For every 10th poll, add extra wait time
-      const everyTenth = Math.floor(9 / 10);
-      const timeToWait = POLL_WAIT + everyTenth * EXTRA_WAIT_TIME_EVERY_10_POLL;
-
-      await new Promise((r) => setTimeout(r, timeToWait));
-    } while (repeat);
-  } catch {
-    error.value = true;
-  }
-}
-
-onMounted(() => {
-  const status = props.item.media.status;
-
-  if (status === 'inprogress') {
-    handleProgressAsync();
-  } else if (status === 'failed') {
-    error.value = true;
-  } else {
-    // If it's already done or has no status, just set up the image
-    previewSrc.value = props.item.thumbnailUrl ?? props.item.url ?? '';
-    isDone.value = true;
-  }
-});
-</script>
-
-<style scoped>
-.c-media-btn__img {
-  @apply tw-transition-shadow tw-duration-200 tw-ease-out tw-w-full tw-h-full tw-rounded-md tw-object-cover;
-}
-.c-media-btn__img:hover {
-  box-shadow: 0 0 0 3px rgb(0, 151, 215);
-}
-.tw-w-full {
-  width: 100%;
-}
-.tw-h-full {
-  height: 100%;
-}
-</style>