@designcrowd/library.brand-page 5.12.4-ast-booking → 5.12.4

package/src/brand-page/components/booking-section/BookingSection.vue

@@ -1,240 +0,0 @@
-<template>
-  <section>
-    <div
-      class="tw-relative tw-px-6 tw-py-8"
-      :style="viewModel.backgroundStyle"
-      style="container-type: inline-size"
-    >
-      <div
-        class="tw-flex tw-gap-8 tw-w-full tw-h-full tw-items-center c_banner-container tw-flex-col tw-gap-5"
-      >
-        <TextWrapper
-          v-if="viewModel.title"
-          :text-style="viewModel.titleStyle"
-          :text="viewModel.title"
-          :slug="context.brandPageSlug"
-          element="h1"
-        />
-        <TextWrapper
-          v-if="hasDescriptionText"
-          :text-style="viewModel.descriptionStyle"
-          :text="renderText"
-          :slug="context.brandPageSlug"
-          element="div"
-        />
-        <div
-          v-if="shouldShowButton"
-          class="tw-w-full tw-flex tw-justify-center"
-        >
-          <button
-            class="tw-block tw-py-4 tw-px-5 tw-text-base tw-text-center tw-w-fit tw-border-0 hover:tw-cursor-pointer"
-            :style="buttonStyle"
-            @click="onClickUrl"
-          >
-            <TextWrapper
-              :text-style="props.viewModel.buttonTextStyle"
-              :text="props.viewModel.buttonText"
-              class="tw-text-center tw-text-base"
-            />
-          </button>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup lang="ts">
-import type { PropType, StyleValue } from 'vue';
-import { computed } from 'vue';
-import { useRouter } from 'vue-router';
-import TextWrapper from '../text-wrapper/TextWrapper.vue';
-import type { BookingSectionViewModel } from '../../view-models';
-import type { BrandPageContext } from '../../models';
-import { getRenderText, escapeContentText } from '../../utils';
-import { hasRTEContent } from '../../../brand-page-maker/utils';
-import { isURL, isEmail, isTel } from '../../../utils/validator.util';
-import { getRouteParamsByPage } from '../../utils/route.util';
-import { BP_PAGE_SLUG_ROUTE_NAME, BP_SLUG_ROUTE_NAME } from '../../constants';
-
-const props = defineProps({
-  viewModel: {
-    type: Object as PropType<BookingSectionViewModel>,
-    required: true,
-  },
-  context: {
-    type: Object as PropType<BrandPageContext>,
-    required: true,
-  },
-  containerClientWidth: {
-    type: Number as PropType<number | undefined>,
-    required: false,
-    default: undefined,
-  },
-  containerClientHeight: {
-    type: Number as PropType<number | undefined>,
-    required: false,
-    default: undefined,
-  },
-});
-
-const router = useRouter();
-
-const handleUrlClick = (url: string) => {
-  if (url && isURL(url)) {
-    window.open(url, '_blank', 'noopener,noreferrer');
-  }
-};
-
-const handlePageNavigation = (pageSlug: string) => {
-  if (!pageSlug) return;
-
-  const routeParams = getRouteParamsByPage(
-    !!props.context.customDomain,
-    props.context.brandPageSlug,
-    pageSlug,
-  );
-
-  const routeName = !!props.context.customDomain
-    ? BP_SLUG_ROUTE_NAME
-    : BP_PAGE_SLUG_ROUTE_NAME;
-
-  router.push({
-    name: routeName,
-    params: routeParams,
-  });
-};
-
-const handleEmailClick = (email?: string, fallbackUrl?: string) => {
-  if (email && isEmail(email)) {
-    window.location.href = `mailto:${email}`;
-  } else if (fallbackUrl && isEmail(fallbackUrl)) {
-    window.location.href = `mailto:${fallbackUrl}`;
-  }
-};
-
-const handlePhoneClick = (tel?: string, fallbackUrl?: string) => {
-  if (tel && isTel(tel)) {
-    window.location.href = `tel:${tel}`;
-  } else if (fallbackUrl && isTel(fallbackUrl)) {
-    window.location.href = `tel:${fallbackUrl}`;
-  }
-};
-
-const handleFallbackClick = (url?: string) => {
-  if (!url) return;
-
-  if (isEmail(url)) {
-    window.location.href = `mailto:${url}`;
-  } else if (isTel(url)) {
-    window.location.href = `tel:${url}`;
-  } else if (isURL(url)) {
-    window.open(url, '_blank', 'noopener,noreferrer');
-  }
-};
-
-const onClickUrl = () => {
-  const { buttonLinkType, url, pageSlug, email, tel } = props.viewModel;
-
-  switch (buttonLinkType) {
-    case 'url':
-      handleUrlClick(url);
-      break;
-
-    case 'page':
-      handlePageNavigation(pageSlug);
-      break;
-
-    case 'mailTo':
-      handleEmailClick(email, url);
-      break;
-
-    case 'tel':
-      handlePhoneClick(tel, url);
-      break;
-
-    default:
-      handleFallbackClick(url);
-      break;
-  }
-};
-
-const renderText = computed((): string => {
-  if (!props.viewModel.description) {
-    return '';
-  }
-
-  if (hasRTEContent(props.viewModel.description)) {
-    return props.viewModel.description;
-  } else {
-    return getRenderText(props.viewModel.description);
-  }
-});
-
-const hasDescriptionText = computed((): boolean => {
-  if (hasRTEContent(props.viewModel.description)) {
-    return escapeContentText(props.viewModel.description) !== '';
-  } else {
-    return props.viewModel?.description?.length > 0;
-  }
-});
-
-const buttonStyle = computed((): StyleValue => {
-  const buttonStyle = {
-    color: props.viewModel.buttonStyles?.style.color,
-    ...props.viewModel.buttonStyles?.style,
-  };
-  const buttonTextStyle = {
-    ...buttonStyle,
-    color: props.viewModel.buttonTextStyle.color,
-  };
-
-  return buttonTextStyle as StyleValue;
-});
-
-const isValidUrl = (url?: string): boolean => !!(url && isURL(url));
-const isValidEmail = (email?: string): boolean => !!(email && isEmail(email));
-const isValidPhone = (tel?: string): boolean => !!(tel && isTel(tel));
-const isValidPage = (pageSlug?: string): boolean => !!pageSlug;
-
-const hasValidTarget = (
-  buttonLinkType: string,
-  url?: string,
-  pageSlug?: string,
-  email?: string,
-  tel?: string,
-): boolean => {
-  switch (buttonLinkType) {
-    case 'url':
-      return isValidUrl(url);
-
-    case 'page':
-      return isValidPage(pageSlug);
-
-    case 'mailTo':
-      return isValidEmail(email) || isValidEmail(url);
-
-    case 'tel':
-      return isValidPhone(tel) || isValidPhone(url);
-
-    default:
-      return isValidUrl(url) || isValidEmail(url) || isValidPhone(url);
-  }
-};
-
-const shouldShowButton = computed((): boolean => {
-  const hasButtonText = !!props.viewModel.buttonText?.length;
-
-  if (!hasButtonText) {
-    return false;
-  }
-
-  const { buttonLinkType, url, pageSlug, email, tel } = props.viewModel;
-  return hasValidTarget(buttonLinkType, url, pageSlug, email, tel);
-});
-</script>
-
-<style scoped>
-.c_banner-container {
-  max-width: var(--brandsite-max-width);
-  margin: 0 auto;
-}
-</style>

package/src/shared/content-settings/components/url-field/i18n/url-field.json

@@ -1,5 +0,0 @@
-{
-  "urlField": {
-    "bookingLabel": "Add your booking link (e.g., <a href=\"https://calendly.com/\" class=\"maker-anchor\">Calendly</a>)"
-  }
-}