@designcrowd/library.brand-page 6.0.3 → 6.0.4

package/src/brand-page/components/logo/LogoRender.vue

@@ -1,188 +1,188 @@
-<template>
-  <div
-    data-component="logo-render"
-    :class="[
-      'logo tw-relative tw-h-full',
-      isBrandSite ? 'brand-site' : 'brand-page',
-    ]"
-  >
-    <figure
-      v-if="logoImageUrl || !isPreview"
-      class="logo__container"
-      :class="{
-        'tw-mb-10': hasMarginBottom,
-      }"
-      :style="[logoBackgroundStyles, figureDimensions]"
-    >
-      <div
-        :style="{
-          ...(props.isBrandPageOrIsBrandContact &&
-          !props.viewModel?.useOldLogoRenderSize
-            ? {
-                margin: 'var(--logo-spacing) auto',
-                height: `${viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT}`,
-                maxWidth: logoMaxWidth,
-              }
-            : {
-                height: '100%',
-                width: '100%',
-              }),
-        }"
-      >
-        <img
-          v-if="logoImageUrl"
-          data-test-tag="logo"
-          class="logo__image"
-          :src="logoImageUrl"
-          :alt="altText"
-          :style="[logoStyle, marginStyle]"
-        />
-      </div>
-    </figure>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed, ref, watch, onServerPrefetch, onMounted } from 'vue';
-import type { LogoViewModel } from '@brand-page/view-models';
-import { LogoCacheRepository } from '../../repositories';
-import {
-  DEFAULT_LOGO_HEIGHT,
-  DEFAULT_LOGO_WIDTH,
-  LOGO_SLIDER_DESKTOP_MAX,
-  LOGO_SLIDER_MOBILE_MAX,
-} from '../../constants';
-
-const props = withDefaults(
-  defineProps<{
-    isPreview: boolean;
-    disableServerRender?: boolean;
-    hasMarginBottom: boolean;
-    isBrandSite: boolean;
-    isBrandPageOrIsBrandContact: boolean;
-    viewModel?: LogoViewModel;
-    altText: string;
-    isMobile?: boolean;
-  }>(),
-  {
-    isPreview: false,
-    hasMarginBottom: false,
-    altText: '',
-    disableServerRender: false,
-    viewModel: undefined,
-  },
-);
-
-const logoImageSvgUrl = ref<string | undefined>(undefined);
-
-const logoImageBase64Url = computed(() => {
-  return typeof props.viewModel?.logoImageBase64Url === 'string' &&
-    props.viewModel.logoImageBase64Url
-    ? props.viewModel.logoImageBase64Url
-    : undefined;
-});
-
-const logoBackgroundStyles = computed(() => {
-  return `background: ${props.viewModel?.styles.backgroundStyle.backgroundColor}`;
-});
-
-const figureDimensions = computed(() => {
-  return !props.viewModel?.useOldLogoRenderSize
-    ? {
-        width: '100%',
-        height: '100%',
-      }
-    : {};
-});
-
-const logoImageUrl = computed(() => {
-  if (typeof logoImageBase64Url.value !== 'undefined') {
-    return logoImageBase64Url.value;
-  }
-  return logoImageSvgUrl.value;
-});
-
-const logoHeight = computed(() => {
-  return props.viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT;
-});
-
-const logoWidth = computed(() => {
-  return props.viewModel?.logoImageWidth || DEFAULT_LOGO_WIDTH;
-});
-
-const logoMaxWidth = computed(() => {
-  if (props.isMobile) {
-    return `${LOGO_SLIDER_MOBILE_MAX}rem`;
-  }
-  return `${LOGO_SLIDER_DESKTOP_MAX}rem`;
-});
-
-const logoStyle = computed(() => {
-  return props.viewModel?.useOldLogoRenderSize
-    ? {
-        width: '100%',
-        height: '100%',
-        'max-width': logoWidth.value,
-        'max-height': logoHeight.value,
-      }
-    : ({
-        width: '100%',
-        height: '100%',
-      } as any);
-});
-
-const marginStyle = computed(() => {
-  return props.viewModel?.useOldLogoRenderSize
-    ? { margin: 'var(--logo-spacing) auto' }
-    : {};
-});
-
-const updateLogoImageSvgUrlAsync = async () => {
-  if (
-    logoImageBase64Url.value ||
-    (!props.viewModel?.logoTemplateImage?.logoTemplateToken &&
-      !props.viewModel?.logoImage?.logoDraftToken)
-  ) {
-    return;
-  }
-
-  try {
-    const logoCacheRepo = LogoCacheRepository.getInstance();
-
-    logoImageSvgUrl.value = props.viewModel.logoTemplateImage?.logoTemplateToken
-      ? await logoCacheRepo.getLogoSvgUrlByLogoTemplateImageAsync(
-          props.viewModel.logoTemplateImage,
-        )
-      : await logoCacheRepo.getLogoSvgUrlByLogoImageAsync(
-          props.viewModel.logoImage,
-        );
-  } catch (err) {
-    console.error('unable to retrieve logo image svg data', err);
-  }
-};
-
-watch(props, updateLogoImageSvgUrlAsync, { deep: true });
-
-onServerPrefetch(() => {
-  if (!props.disableServerRender) {
-    updateLogoImageSvgUrlAsync();
-  }
-});
-
-onMounted(async () => {
-  if (!logoImageSvgUrl.value) {
-    await updateLogoImageSvgUrlAsync();
-  }
-});
-</script>
-<style scoped>
-.logo__container {
-  border: 0.125rem solid var(--logo-border-colour);
-  border-radius: 0.75rem;
-}
-
-.logo__image {
-  display: block;
-  object-fit: contain;
-  height: 6rem;
-}
-</style>
+<template>
+  <div
+    data-component="logo-render"
+    :class="[
+      'logo tw-relative tw-h-full',
+      isBrandSite ? 'brand-site' : 'brand-page',
+    ]"
+  >
+    <figure
+      v-if="logoImageUrl || !isPreview"
+      class="logo__container"
+      :class="{
+        'tw-mb-10': hasMarginBottom,
+      }"
+      :style="[logoBackgroundStyles, figureDimensions]"
+    >
+      <div
+        :style="{
+          ...(props.isBrandPageOrIsBrandContact &&
+          !props.viewModel?.useOldLogoRenderSize
+            ? {
+                margin: 'var(--logo-spacing) auto',
+                height: `${viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT}`,
+                maxWidth: logoMaxWidth,
+              }
+            : {
+                height: '100%',
+                width: '100%',
+              }),
+        }"
+      >
+        <img
+          v-if="logoImageUrl"
+          data-test-tag="logo"
+          class="logo__image"
+          :src="logoImageUrl"
+          :alt="altText"
+          :style="[logoStyle, marginStyle]"
+        />
+      </div>
+    </figure>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch, onServerPrefetch, onMounted } from 'vue';
+import type { LogoViewModel } from '@brand-page/view-models';
+import { LogoCacheRepository } from '../../repositories';
+import {
+  DEFAULT_LOGO_HEIGHT,
+  DEFAULT_LOGO_WIDTH,
+  LOGO_SLIDER_DESKTOP_MAX,
+  LOGO_SLIDER_MOBILE_MAX,
+} from '../../constants';
+import type { ViewportsType } from '@brand-page/models';
+
+const props = withDefaults(
+  defineProps<{
+    isPreview: boolean;
+    disableServerRender?: boolean;
+    hasMarginBottom: boolean;
+    isBrandSite: boolean;
+    isBrandPageOrIsBrandContact: boolean;
+    viewModel?: LogoViewModel;
+    altText: string;
+    isMobile?: boolean;
+  }>(),
+  {
+    isPreview: false,
+    hasMarginBottom: false,
+    altText: '',
+    disableServerRender: false,
+  },
+);
+
+const logoImageSvgUrl = ref<string | undefined>(undefined);
+
+const logoImageBase64Url = computed(() => {
+  return typeof props.viewModel?.logoImageBase64Url === 'string' &&
+    props.viewModel.logoImageBase64Url
+    ? props.viewModel.logoImageBase64Url
+    : undefined;
+});
+
+const logoBackgroundStyles = computed(() => {
+  return `background: ${props.viewModel?.styles.backgroundStyle.backgroundColor}`;
+});
+
+const figureDimensions = computed(() => {
+  return !props.viewModel?.useOldLogoRenderSize
+    ? {
+        width: '100%',
+        height: '100%',
+      }
+    : {};
+});
+
+const logoImageUrl = computed(() => {
+  if (typeof logoImageBase64Url.value !== 'undefined') {
+    return logoImageBase64Url.value;
+  }
+  return logoImageSvgUrl.value;
+});
+
+const logoHeight = computed(() => {
+  return props.viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT;
+});
+
+const logoWidth = computed(() => {
+  return props.viewModel?.logoImageWidth || DEFAULT_LOGO_WIDTH;
+});
+
+const logoMaxWidth = computed(() => {
+  if (props.isMobile) {
+    return `${LOGO_SLIDER_MOBILE_MAX}rem`;
+  }
+  return `${LOGO_SLIDER_DESKTOP_MAX}rem`;
+});
+
+const logoStyle = computed(() => {
+  return props.viewModel?.useOldLogoRenderSize
+    ? {
+        width: '100%',
+        height: '100%',
+        'max-width': logoWidth.value,
+        'max-height': logoHeight.value,
+      }
+    : ({
+        width: '100%',
+        height: '100%',
+      } as any);
+});
+
+const marginStyle = computed(() => {
+  return props.viewModel?.useOldLogoRenderSize
+    ? { margin: 'var(--logo-spacing) auto' }
+    : {};
+});
+
+const updateLogoImageSvgUrlAsync = async () => {
+  if (
+    logoImageBase64Url.value ||
+    (!props.viewModel?.logoTemplateImage?.logoTemplateToken &&
+      !props.viewModel?.logoImage?.logoDraftToken)
+  ) {
+    return;
+  }
+
+  try {
+    const logoCacheRepo = LogoCacheRepository.getInstance();
+
+    logoImageSvgUrl.value = props.viewModel.logoTemplateImage?.logoTemplateToken
+      ? await logoCacheRepo.getLogoSvgUrlByLogoTemplateImageAsync(
+          props.viewModel.logoTemplateImage,
+        )
+      : await logoCacheRepo.getLogoSvgUrlByLogoImageAsync(
+          props.viewModel.logoImage,
+        );
+  } catch (err) {
+    console.error('unable to retrieve logo image svg data', err);
+  }
+};
+
+watch(props, updateLogoImageSvgUrlAsync, { deep: true });
+
+onServerPrefetch(() => {
+  if (!props.disableServerRender) {
+    updateLogoImageSvgUrlAsync();
+  }
+});
+
+onMounted(async () => {
+  if (!logoImageSvgUrl.value) {
+    await updateLogoImageSvgUrlAsync();
+  }
+});
+</script>
+<style scoped>
+.logo__container {
+  border: 0.125rem solid var(--logo-border-colour);
+  border-radius: 0.75rem;
+}
+
+.logo__image {
+  display: block;
+  object-fit: contain;
+  height: 6rem;
+}
+</style>

package/src/brand-page/components/navigation/hamburger/HamburgerNavigation.mixin.ts

@@ -10,7 +10,6 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['open-side-menu'],
 
   computed: {
     iconStyle(): BrandPageCssStyle {

package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.ts

@@ -26,7 +26,6 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['close-side-menu'],
   data() {
     return {
       expandedItems: {} as Record<string, boolean>, // Keep track of which navs are expanded
@@ -54,27 +53,19 @@ export default defineComponent({
     },
     // Prevents us from doubling down on em sizing of font
     defaultWrapperStyle(): BrandPageCssStyle {
-      const {
-        fontSize: _fontSize,
-        lineHeight: _lineHeight,
-        letterSpacing: _letterSpacing,
-        ...rest
-      } = this.defaultButtonStyle;
+      const { fontSize, lineHeight, letterSpacing, ...rest } =
+        this.defaultButtonStyle;
 
       return rest;
     },
     selectedWrapperStyle(): BrandPageCssStyle {
-      const {
-        fontSize: _fontSize,
-        lineHeight: _lineHeight,
-        letterSpacing: _letterSpacing,
-        ...rest
-      } = this.selectedButtonStyle;
+      const { fontSize, lineHeight, letterSpacing, ...rest } =
+        this.selectedButtonStyle;
 
       return rest;
     },
     routes(): any[] {
-      return this.visibleNavItems.map((navItem, _i) => {
+      return this.visibleNavItems.map((navItem, i) => {
         return {
           routeName: navItem.routeName,
           routeParams: navItem.routeParams,
@@ -105,7 +96,7 @@ export default defineComponent({
         paddingLeft: '32px',
         backgroundColor: isActive
           ? baseStyle.backgroundColor
-          : (this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff'),
+          : this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff',
       };
     },
     closeSideMenu(): void {

package/src/brand-page/components/page-footer/PageFooter.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-v-html -->
 <template>
   <div
     data-component="page-footer"

package/src/brand-page/components/page-header/HeaderLayout.vue

@@ -106,9 +106,7 @@ withDefaults(
 .desktop-tab-horizontal-stack-centered-logo-right-menu {
   @apply tw-grid;
   @apply tw-gap-x-4;
-  grid-template-columns:
-    [col-start] 1fr [logo-start] var(--logo-max-width)
-    [logo-end nav-start] 1fr [nav-end];
+  grid-template-columns: [col-start] 1fr [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end];
 }
 .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container {
   grid-column: logo-start / logo-end;
@@ -186,9 +184,7 @@ withDefaults(
 /* DESKTOP_TAB_6 */
 .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav {
   @apply tw-grid;
-  grid-template-rows:
-    [row1-start] var(--tab-nav-height)
-    [row1-end row2-start] 1fr [row2-end];
+  grid-template-rows: [row1-start] var(--tab-nav-height) [row1-end row2-start] 1fr [row2-end];
   @apply tw-gap-y-4;
   justify-content: center;
   justify-items: center;
@@ -213,9 +209,7 @@ withDefaults(
 }
 .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav {
   @apply tw-grid;
-  grid-template-rows:
-    [row1-start] var(--tab-nav-height)
-    [row1-end row2-start] 1fr [row2-end];
+  grid-template-rows: [row1-start] var(--tab-nav-height) [row1-end row2-start] 1fr [row2-end];
   @apply tw-gap-y-4;
   margin-top: 1rem;
 }
@@ -288,9 +282,9 @@ withDefaults(
 .desktop-hamburger-horizontal-stack-centered-logo-right-menu,
 .mobile-hamburger-horizontal-stack-centered-logo-right-menu {
   @apply tw-grid;
-  grid-template-columns:
-    [start] var(--hamburger-nav-width)
-    [logo-start] auto [nav-start] var(--hamburger-nav-width);
+  grid-template-columns: [start] var(--hamburger-nav-width) [logo-start] auto [nav-start] var(
+      --hamburger-nav-width
+    );
   align-items: start;
 }
 .desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container,

package/src/brand-page/components/page-header/PageHeader.vue

@@ -46,7 +46,6 @@ export default {
     HeaderLayout,
   },
   mixins: [PageHeaderMixin],
-  emits: ['open-side-menu'],
 };
 </script>
 <style scoped>

package/src/brand-page/components/shapes-section/ShapesSection.vue

@@ -28,7 +28,7 @@ import Media from '../media/Media.vue';
 import type { TextImageSectionViewModel } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
 
-defineProps({
+const props = defineProps({
   viewModel: {
     type: Object as PropType<TextImageSectionViewModel>,
     required: true,

package/src/brand-page/components/shop/CartModal.vue

@@ -231,6 +231,8 @@
 import {
   Modal,
   Button,
+  Dropdown,
+  DropdownItem,
   NumberStepper,
   Textarea,
   Icon,
@@ -316,7 +318,7 @@ const onQtyChange = (skuKey: string, qty: number) => {
   cartSettingsStore.updateQuantity(skuKey, qty);
 };
 
-const _onUpdateVariantOption = (
+const onUpdateVariantOption = (
   index: number,
   skuKey: string,
   variant: string,

package/src/brand-page/components/shop/FeaturedDisplay.vue

@@ -60,7 +60,7 @@
   </ul>
 </template>
 <script setup lang="ts">
-import type { BrandPageContext } from '@brand-page/models';
+import type { BrandPageContext, ShopContent } from '@brand-page/models';
 import FallbackImage from '../fallback-image/FallbackImage.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { type PropType } from 'vue';
@@ -71,7 +71,7 @@ import { computed } from 'vue';
 
 const shopSettingStore = useShopConfigStore();
 
-defineProps({
+const props = defineProps({
   context: {
     type: Object as PropType<BrandPageContext>,
     required: true,

package/src/brand-page/components/shop/PaymentModal.vue

@@ -115,7 +115,8 @@
 <script setup lang="ts">
 import { Modal, Button, Loader } from '@designcrowd/fe-shared-lib';
 import { useCartStore } from '@shared/ecommerce-settings/store/cart-settings-store';
-import { computed, reactive, onMounted } from 'vue';
+import { computed, reactive, ref, onMounted } from 'vue';
+import IconStripe from '../icon/IconStripe.vue';
 import RequestPaymentStripe from '../payment/RequestPaymentStripe.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import brandPageClient from '../../clients/brand-page.client';
@@ -127,6 +128,7 @@ import type {
   BrandPagePaymentConfig,
   TextStyleDeclaration,
   StripePaymentIntent,
+  StripeShippingDetails,
 } from '@brand-page/models';
 import { paymentProviders } from '@brand-page/constants';
 import raygunUtil from '@brand-page/utils/raygun.util';
@@ -171,6 +173,8 @@ const data = reactive({
   state: 'creating-cart' as State,
 });
 
+const customerEmail = ref('');
+
 const emit = defineEmits(['on-close', 'on-back']);
 
 const onClose = () => {

package/src/brand-page/components/shop/ProductDetailModal.vue

@@ -293,7 +293,7 @@ const onClose = () => {
   emit('on-close');
 };
 
-const _showFullDesc = () => {
+const showFullDesc = () => {
   data.isShowFullDescription = true;
 };
 

package/src/brand-page/components/shop/Shop.vue

@@ -125,7 +125,7 @@ import ThumbnailDisplay from './ThumbnailDisplay.vue';
 import FeaturedDisplay from './FeaturedDisplay.vue';
 import ProductDetailModal from './ProductDetailModal.vue';
 import CartModal from './CartModal.vue';
-import { computed, onMounted, reactive } from 'vue';
+import { computed, onMounted, reactive, type PropType } from 'vue';
 import {
   PAYMENT_OPTION_DISPLAY_TYPES,
   PAYMENT_OPTION_IMAGE_TYPES,

package/src/brand-page/components/shop/TextDisplay.vue

@@ -39,7 +39,7 @@ import { computed } from 'vue';
 
 const shopSettingStore = useShopConfigStore();
 
-defineProps({
+const props = defineProps({
   context: {
     type: Object as PropType<BrandPageContext>,
     required: true,

package/src/brand-page/components/shop/ThumbnailDisplay.vue

@@ -45,7 +45,7 @@
   </ul>
 </template>
 <script setup lang="ts">
-import type { BrandPageContext } from '@brand-page/models';
+import type { BrandPageContext, ShopContent } from '@brand-page/models';
 import FallbackImage from '../fallback-image/FallbackImage.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { PropType } from 'vue';
@@ -56,7 +56,7 @@ import { computed } from 'vue';
 
 const shopSettingStore = useShopConfigStore();
 
-defineProps({
+const props = defineProps({
   context: {
     type: Object as PropType<BrandPageContext>,
     required: true,

package/src/brand-page/components/testimonial-section/TestimonialSection.vue

@@ -265,9 +265,9 @@ const renderText = (val: string): string => (val ? getRenderText(val) : '');
 const forceCarouselUpdate = (): boolean => {
   const shouldUpdateCarousel = Boolean(
     props.isPreview &&
-    (props.viewModel.items.length > 1 ||
-      props.viewModel.displayStyle === 'big-image') &&
-    carouselRef.value,
+      (props.viewModel.items.length > 1 ||
+        props.viewModel.displayStyle === 'big-image') &&
+      carouselRef.value,
   );
 
   if (shouldUpdateCarousel) {

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-v-html -->
 <template>
   <div v-if="sanitizeText" class="tw-w-full" :style="data.wrapperStyle">
     <div
@@ -40,7 +39,6 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   element: 'p',
   textStyle: {} as any,
-  slug: undefined,
 });
 
 const data = reactive<{
@@ -62,7 +60,7 @@ const textStyles = computed(() => {
 });
 
 const style = computed<any>(() => {
-  const { backgroundColor: _backgroundColor, ...textStyle } = props.textStyle;
+  const { backgroundColor, ...textStyle } = props.textStyle;
 
   return textStyle;
 });

package/src/brand-page/constants/sections/footer-display.constants.ts

@@ -1,6 +1,6 @@
 import { ALIGN_CENTERED, ALIGN_JUSTIFIED } from '../misc.constants';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
-import { commonTr } from '@src/composables/useTranslate';
+import { tr, commonTr } from '@src/composables/useTranslate';
 
 export const FOOTER_DISPLAY = {
   /** @deprecated */