@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

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';
-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>
+<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>

package/src/brand-page/components/mailing-list/MailingList.mixin.ts

@@ -2,7 +2,10 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { MailingListViewModel } from '@brand-page/view-models';
 import brandPageClient from '../../clients/brand-page.client';
-import { getEmailValidationError } from '@brand-page/utils';
+import {
+  getEmailValidationError,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 import {
   contentSettingsTr,
@@ -61,6 +64,10 @@ export default defineComponent({
     }
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     hasNameError(): boolean {
       return !!this.nameError;
     },

package/src/brand-page/components/mailing-list/MailingList.vue

@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section :style="contentPaddingStyle">
     <div
       v-if="show"
       class="tw-p-4"

package/src/brand-page/components/map/Map.vue

@@ -1,5 +1,5 @@
 <template>
-  <div data-component="map">
+  <div data-component="map" :style="contentPaddingStyle">
     <div
       class="c-map"
       :class="{
@@ -22,6 +22,7 @@ import Placeholder from '../placeholder/Placeholder.vue';
 import type { MapViewModel } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
 import { mapTr } from '@src/composables/useTranslate';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import { computed } from 'vue';
 
 interface Props {
@@ -37,6 +38,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const placeId = computed(() => props.viewModel?.address?.placeId);
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
 </script>
 <style scoped>
 .c-map {

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

@@ -10,6 +10,7 @@ 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,6 +26,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['close-side-menu'],
   data() {
     return {
       expandedItems: {} as Record<string, boolean>, // Keep track of which navs are expanded
@@ -53,19 +54,27 @@ export default defineComponent({
     },
     // Prevents us from doubling down on em sizing of font
     defaultWrapperStyle(): BrandPageCssStyle {
-      const { fontSize, lineHeight, letterSpacing, ...rest } =
-        this.defaultButtonStyle;
+      const {
+        fontSize: _fontSize,
+        lineHeight: _lineHeight,
+        letterSpacing: _letterSpacing,
+        ...rest
+      } = this.defaultButtonStyle;
 
       return rest;
     },
     selectedWrapperStyle(): BrandPageCssStyle {
-      const { fontSize, lineHeight, letterSpacing, ...rest } =
-        this.selectedButtonStyle;
+      const {
+        fontSize: _fontSize,
+        lineHeight: _lineHeight,
+        letterSpacing: _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,
@@ -96,7 +105,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,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div
     data-component="page-footer"

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

@@ -106,7 +106,9 @@ 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;
@@ -184,7 +186,9 @@ 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;
@@ -209,7 +213,9 @@ 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;
 }
@@ -282,9 +288,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,6 +46,7 @@ export default {
     HeaderLayout,
   },
   mixins: [PageHeaderMixin],
+  emits: ['open-side-menu'],
 };
 </script>
 <style scoped>

package/src/brand-page/components/payment/request-payment/RequestPayment.mixin.ts

@@ -14,6 +14,7 @@ import type { RequestPaymentViewModel } from '../../../view-models';
 import type { PaymentRequestDetails } from '../Payment.mixin';
 import { DEFAULT_CURRENCY_SYMBOL } from '../../../constants';
 import { addOpacityToHex } from '../../../utils/color.util';
+import { contentPaddingStyle as toContentPaddingStyle } from '../../../utils';
 import { RGBAtoHex } from '@utils/helpers';
 
 const MAX_CUSTOM_REQUEST_CHARS = 500;
@@ -42,6 +43,10 @@ export default defineComponent({
     };
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     isCustomerRequestDetailsValid(): boolean {
       return (
         !this.viewModel.requestPaymentConfig.isCustomerRequestDetailsEnabled ||

package/src/brand-page/components/payment/request-payment/RequestPayment.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     data-component="request-payment"
+    :style="contentPaddingStyle"
     :class="{
       'tw-my-8': context.isBrandSite,
       'tw-mb-4': context.isBrandPageOrIsBrandContact,

package/src/brand-page/components/payment/support-me/SupportMe.mixin.ts

@@ -4,7 +4,10 @@ import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '../../../constants';
 import type { BrandPageContext, PaymentOption } from '../../../models';
 import type { SupportMeViewModel } from '../../../view-models';
 import type { PaymentRequestDetails } from '../Payment.mixin';
-import { isPaymentAmountValid } from '../../../utils';
+import {
+  isPaymentAmountValid,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '../../../utils';
 import {
   DEFAULT_CURRENCY_SYMBOL,
   DEFAULT_CURRENCY_CODE,
@@ -33,6 +36,10 @@ export default defineComponent({
     };
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     isCustomAmountFieldVisible(): boolean {
       return this.viewModel.supportMeConfig.paymentOptions.some(
         (o) => o.name === SUPPORT_ME_CUSTOM_PRODUCT_NAME,

package/src/brand-page/components/payment/support-me/SupportMe.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     data-component="support-me"
+    :style="contentPaddingStyle"
     :class="{
       'tw-my-8': context.isBrandSite,
       'tw-mb-4': context.isBrandPageOrIsBrandContact,

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';
 
-const props = defineProps({
+defineProps({
   viewModel: {
     type: Object as PropType<TextImageSectionViewModel>,
     required: true,

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

@@ -231,8 +231,6 @@
 import {
   Modal,
   Button,
-  Dropdown,
-  DropdownItem,
   NumberStepper,
   Textarea,
   Icon,
@@ -318,7 +316,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, ShopContent } from '@brand-page/models';
+import type { BrandPageContext } 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();
 
-const props = defineProps({
+defineProps({
   context: {
     type: Object as PropType<BrandPageContext>,
     required: true,