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

package/src/brand-page/components/page/PageComponent.vue

@@ -33,7 +33,6 @@ import DividerSection from '../divider-section/DividerSection.vue';
 import ShapesSection from '../shapes-section/ShapesSection.vue';
 import PageComponentMixin from './PageComponent.mixin.ts';
 import Shop from '../shop/Shop.vue';
-import BookingSection from '../booking-section/BookingSection.vue';
 
 export default {
   components: {
@@ -58,7 +57,6 @@ export default {
     'bp-divider-section': DividerSection,
     'bp-shapes-section': ShapesSection,
     'bp-shop-section': Shop,
-    'bp-booking-section': BookingSection,
   },
   mixins: [PageComponentMixin],
 };

package/src/brand-page/models/content.model.ts

@@ -30,7 +30,6 @@ export const CONTENT_TYPES = {
   'social-links': 'social-links',
   'shapes-section': 'shapes-section',
   'shop-section': 'shop-section',
-  'booking-section': 'booking-section',
 } as const;
 
 export type ContentType = keyof typeof CONTENT_TYPES;

package/src/brand-page/models/index.ts

@@ -581,23 +581,6 @@ export interface DividerSectionContent extends Content {
   backgroundStyle?: BrandPageCssStyle;
 }
 
-export interface BookingSectionContent extends Content {
-  type: 'booking-section';
-  title: string;
-  description: string;
-  buttonText: string;
-  url: string;
-  email?: string;
-  tel?: string;
-  titleStyle: TextStyleDeclaration;
-  descriptionStyle: TextStyleDeclaration;
-  backgroundStyle: BrandPageCssStyle;
-  pageSlug: string;
-  buttonLinkType: ButtonLinkType;
-  buttonTextStyle: TextStyleDeclaration;
-  aspectRatio?: number | null;
-}
-
 export class PageModel {
   title: string;
   slug: string;

package/src/brand-page/utils/style.util.ts

@@ -372,7 +372,7 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
   'Replacements',
 ];
 
-const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section', 'booking-section'];
+const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section'];
 const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
 
 export const applyLogoThemeToContents = (

package/src/brand-page/utils/view-model.util.ts

@@ -36,7 +36,6 @@ import type {
   LogoTemplateImageModel,
   ShopContent,
   SensitiveContent,
-  BookingSectionContent,
 } from '../models';
 import { ButtonStyles, SENSITIVE_CONTENT_TYPES, VIEWPORTS } from '../models';
 import {
@@ -73,7 +72,6 @@ import type {
   DividerSectionViewModel,
   ShapesSectionViewModel,
   ShopViewModel,
-  BookingSectionViewModel,
 } from '../view-models';
 import { isHexTransparent, setRgbAlpha } from './color.util';
 import type { ContentTextStylePropertyKey } from '../constants';
@@ -844,25 +842,6 @@ const mapToSocialLinksViewModel = (
   );
 };
 
-export const mapToBookingSectionViewModel = (
-  content: BookingSectionContent,
-  styles: PageStyles,
-): BookingSectionViewModel => {
-  return applyViewModelTextStyles(
-    {
-      ...content,
-      role: content.type,
-      type: 'booking-section',
-      buttonStyles: styles.buttonStyles,
-      buttonTextStyle: {
-        ...content.buttonTextStyle,
-      },
-      isFullWidth: true,
-    },
-    styles,
-  );
-};
-
 export const mapToPageHeaderViewModel = (
   pageHeader: PageHeaderDesktop | PageHeaderMobile,
   pageStyles: PageStyles,
@@ -1069,12 +1048,6 @@ export const mapToViewModel =
           styles,
         );
 
-      case 'booking-section':
-        return mapToBookingSectionViewModel(
-          content as BookingSectionContent,
-          styles,
-        );
-
       case 'about-section':
         return mapToAboutSectionViewModel(
           content as AboutSectionContent,

package/src/brand-page/view-models.ts

@@ -36,7 +36,6 @@ import type {
   LogoTemplateImageModel,
   CookieOptions,
   SensitiveContent,
-  BookingSectionContent,
 } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
 
@@ -60,8 +59,7 @@ export type ViewModelType =
   | 'testimonial-section'
   | 'social-links'
   | 'shapes-section'
-  | 'shop-section'
-  | 'booking-section';
+  | 'shop-section';
 
 export interface ContentViewModel {
   id: string;
@@ -210,13 +208,6 @@ export interface DividerSectionViewModel
   isFullWidth: boolean;
 }
 
-export interface BookingSectionViewModel
-  extends ContentViewModel,
-    Omit<BookingSectionContent, 'type'> {
-  buttonStyles: ButtonStyles;
-  isFullWidth: boolean;
-}
-
 export interface PageHeaderViewModel
   extends Omit<
     PageHeaderDesktop | PageHeaderMobile,

package/src/brand-page-maker/assessors/banner-section-description-visibility.assessor.ts

@@ -1,7 +1,4 @@
-import type {
-  BannerSectionContent,
-  BookingSectionContent,
-} from '../../brand-page';
+import type { BannerSectionContent } from '../../brand-page';
 import { BUTTON_LINK_TYPE } from '../../brand-page';
 import type { VisibilityAssessor } from '../models';
 import {
@@ -12,7 +9,7 @@ import {
 } from '../../brand-page/constants';
 
 export const bannerSectionUrlVisibilityAssessor: VisibilityAssessor<
-  BannerSectionContent | BookingSectionContent | undefined
+  BannerSectionContent | undefined
 > = (content) => {
   return (
     content?.buttonLinkType !== BUTTON_LINK_TYPE.page &&
@@ -22,7 +19,7 @@ export const bannerSectionUrlVisibilityAssessor: VisibilityAssessor<
 };
 
 export const bannerSectionPageVisibilityAssessor: VisibilityAssessor<
-  BannerSectionContent | BookingSectionContent | undefined
+  BannerSectionContent | undefined
 > = (content) => {
   return (
     content?.buttonLinkType === BUTTON_LINK_TYPE.page &&
@@ -32,7 +29,7 @@ export const bannerSectionPageVisibilityAssessor: VisibilityAssessor<
 };
 
 export const bannerLinkTypeVisibilityAssessor: VisibilityAssessor<
-  BannerSectionContent | BookingSectionContent | undefined
+  BannerSectionContent | undefined
 > = (content) => {
   return content?.buttonText !== '' && content?.buttonText !== false;
 };

package/src/brand-page-maker/assessors/banner-section-field.assessor.ts

@@ -1,7 +1,4 @@
-import type {
-  BannerSectionContent,
-  BookingSectionContent,
-} from '../../brand-page';
+import type { BannerSectionContent } from '../../brand-page';
 import type {
   FieldTypeAssessor,
   ItemFieldType,
@@ -9,7 +6,7 @@ import type {
 } from '../models';
 
 export const bannerSectionFieldTypeAssessor: FieldTypeAssessor<
-  BannerSectionContent | BookingSectionContent | undefined
+  BannerSectionContent | undefined
 > = (content): ItemFieldType => {
   switch (content?.buttonLinkType) {
     case 'url':
@@ -24,7 +21,7 @@ export const bannerSectionFieldTypeAssessor: FieldTypeAssessor<
 };
 
 export const bannerSectionRoleTypeAssessor: FieldTypeAssessor<
-  BannerSectionContent | BookingSectionContent | undefined
+  BannerSectionContent | undefined
 > = (content): ItemFieldType => {
   switch (content?.buttonLinkType) {
     case 'url':
@@ -39,7 +36,7 @@ export const bannerSectionRoleTypeAssessor: FieldTypeAssessor<
 };
 
 export const bannerPlaceholderFieldTypeAssessor: PlaceholderTypeAssessor<
-  BannerSectionContent | BookingSectionContent | undefined
+  BannerSectionContent | undefined
 > = (content): string => {
   switch (content?.buttonLinkType) {
     case 'url':

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -34,7 +34,6 @@ import type {
   ShapesSectionContent,
   Content,
   ShopContent,
-  BookingSectionContent,
 } from '../../brand-page';
 import {
   SOCIAL_LINKS_ICON_DISPLAY_STYLES,
@@ -82,7 +81,6 @@ import {
   createInitialShapesSectionContent,
   VARIANT_DISPLAY_MODES,
   createInitialShopContent,
-  createInitialBookingSectionContent,
 } from '../models';
 import type {
   ContentReplaceImageSettings,
@@ -3018,110 +3016,6 @@ export const SHOP_SECTION_SETTINGS_CONFIG = (): ContentSettingsConfig<
   type: 'shop-section',
 });
 
-export const BOOKING_SECTION_SETTINGS_CONFIG =
-  (): ContentSettingsConfig<BookingSectionContent> => ({
-    type: 'booking-section',
-    category: 'sections',
-    createInitialContent: createInitialBookingSectionContent,
-    displayMode: CONTENT_SETTINGS_DISPLAY_MODES.focused,
-    defaultIconName: 'calendar',
-    displayName: contentSettingsTr(`bookingSectionDisplayName`),
-    fieldGroups: [
-      {
-        id: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
-        displayName: contentSettingsTr(`settingsDisplayName`),
-        isCollapsed: false,
-      },
-      {
-        id: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
-        displayName: contentSettingsTr(`styleDisplayName`),
-        isCollapsed: true,
-      },
-    ],
-    fields: {
-      titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
-      descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
-      buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
-      title: {
-        type: 'text',
-        placeholder: contentSettingsTr(`titlePlaceholder`),
-        title: contentSettingsTr(`titleTitle`),
-        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
-        maxLength: 200,
-      },
-      titleOverride: {
-        type: 'personalisation-override',
-        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
-        visibilityAssessor: (c, b) =>
-          personalisationOverrideVisibility(c, b, 'title'),
-      },
-      description: {
-        type: 'textarea',
-        placeholder: contentSettingsTr(`descriptionPlaceholder`),
-        title: contentSettingsTr(`descriptionTitle`),
-        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
-        maxLength: 1000,
-      },
-      descriptionOverride: {
-        type: 'personalisation-override',
-        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
-        visibilityAssessor: (c, b) =>
-          personalisationOverrideVisibility(c, b, 'description'),
-      },
-      buttonText: {
-        type: 'text',
-        placeholder: contentSettingsTr(`getStartedPlaceholder`),
-        title: contentSettingsTr(`buttonTitle`),
-        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
-        maxLength: 60,
-      },
-      buttonTextOverride: {
-        type: 'personalisation-override',
-        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
-        visibilityAssessor: (c, b) =>
-          personalisationOverrideVisibility(c, b, 'buttonText'),
-      },
-      backgroundStyle: {
-        type: 'color',
-        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
-        defaultValue: {},
-        isInline: true,
-        showToggle: false,
-        title: contentSettingsTr(`backgroundColorTitle`),
-        valueConvertor: backgroundColorConvertor,
-      },
-      buttonLinkType: {
-        type: 'radio',
-        role: 'multi',
-        defaultValue: BUTTON_LINK_TYPE.url,
-        title: contentSettingsTr(`buttonLinkTitle`),
-        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
-        optionsConvertor: buttonLinkStyleConvertor,
-        visibilityAssessor: bannerLinkTypeVisibilityAssessor,
-      },
-      pageSlug: {
-        type: 'page-dropdown',
-        placeholder: contentSettingsTr(`selectAPagePlaceholder`),
-        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
-        visibilityAssessor: bannerSectionPageVisibilityAssessor,
-        validator: pageValidator,
-        defaultValue: '',
-      },
-      url: {
-        type: 'url',
-        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
-        fieldTypeAssessor: bannerSectionFieldTypeAssessor,
-        roleAssessor: bannerSectionRoleTypeAssessor,
-        placeholderAssessor: bannerPlaceholderFieldTypeAssessor,
-        visibilityAssessor: bannerSectionUrlVisibilityAssessor,
-        validator: urlValidator,
-        defaultValue: '',
-      },
-    },
-    isEnabled: true,
-    isLocked: false,
-  });
-
 export const CONTENT_SETTINGS_CONFIGS = (): Record<
   ContentType,
   ContentSettingsConfig<any>
@@ -3157,5 +3051,4 @@ export const CONTENT_SETTINGS_CONFIGS = (): Record<
   'divider-section': DIVIDER_SECTION_SETTINGS_CONFIG(),
   'shapes-section': SHAPES_SECTION_SETTINGS_CONFIG(),
   'shop-section': SHOP_SECTION_SETTINGS_CONFIG(),
-  'booking-section': BOOKING_SECTION_SETTINGS_CONFIG(),
 });

package/src/brand-page-maker/models/content-settings.ts

@@ -51,7 +51,6 @@ import type {
   BrandPageType,
   SupportMeContent,
   ShopContent,
-  BookingSectionContent,
 } from '../../brand-page';
 import * as uuid from 'uuid';
 import type { CreateInitialContentFunction } from './content-settings-configs';
@@ -518,37 +517,6 @@ export const createInitialBannerSectionContent: CreateInitialContentFunction<
   };
 };
 
-export const createInitialBookingSectionContent: CreateInitialContentFunction<
-  BookingSectionContent
-> = (options?: CreateInitialContentOptions) => {
-  return {
-    id: uuid.v4(),
-    title: contentSettingsTr(`defaultBookingTitle`),
-    description: contentSettingsTr(`defaultBookingDescription`),
-    buttonText: contentSettingsTr(`bookNowLabel`),
-    url: '',
-    type: 'booking-section',
-    descriptionStyle: {
-      applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.paragraphs,
-      textAlign: 'center',
-    },
-    titleStyle: {
-      applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.titles,
-      textAlign: 'center',
-    },
-    backgroundStyle: {},
-    pageSlug: '',
-    buttonLinkType: BUTTON_LINK_TYPE.url,
-    buttonTextStyle: {
-      applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-      textStyleType: TEXT_STYLE_TYPES.buttons,
-      textAlign: 'center',
-    },
-  };
-};
-
 export const createInitialImagesSectionContent: CreateInitialContentFunction<
   ImagesSectionContent
 > = (options?: CreateInitialContentOptions) => {

package/src/brand-page-maker/validators/section-button.validator.ts

@@ -2,7 +2,6 @@ import { isEmail, isTel, isURL } from '../../utils/validator.util';
 import {
   BUTTON_LINK_TYPE,
   type BannerSectionContent,
-  type BookingSectionContent,
 } from '../../brand-page/models';
 import type { ContentValidator, ValidateResult } from '../models';
 import { validatorTr } from '../../composables/useTranslate';
@@ -34,9 +33,9 @@ export const textValidator: ContentValidator<BannerSectionContent> = (
   };
 };
 
-export const urlValidator: ContentValidator<
-  BannerSectionContent | BookingSectionContent
-> = (section): ValidateResult => {
+export const urlValidator: ContentValidator<BannerSectionContent> = (
+  section,
+): ValidateResult => {
   if (
     section.buttonLinkType === BUTTON_LINK_TYPE.url &&
     !isURL(section.url) &&
@@ -80,9 +79,9 @@ export const urlValidator: ContentValidator<
   };
 };
 
-export const pageValidator: ContentValidator<
-  BannerSectionContent | BookingSectionContent
-> = (section): ValidateResult => {
+export const pageValidator: ContentValidator<BannerSectionContent> = (
+  section,
+): ValidateResult => {
   if (section.buttonLinkType === BUTTON_LINK_TYPE.page && !section.pageSlug) {
     return {
       message: MISSING_PAGE_SLUG_MESSAGE(),

package/src/bundles/bundled-translations.json

@@ -418,7 +418,6 @@
     "dividerSectionDisplayName": "Divider",
     "shapesSectionDisplayName": "Shapes",
     "shopSectionDisplayName": "Store",
-    "bookingSectionDisplayName": "Booking",
     "settingsDisplayName": "Settings",
     "styleDisplayName": "Style",
     "titleStyleLabel": "Title style",
@@ -496,8 +495,6 @@
     "followUsOnTitle": "Follow us on",
     "shapesTitle": "Shapes",
     "defaultTextValue": "This is a sample text",
-    "defaultBookingTitle": "Book an appointment",
-    "defaultBookingDescription": "Schedule your appointment today",
     "titlePlaceholder": "Title",
     "successMessagePlaceholder": "Success message",
     "successThanksPlaceholder": "Thank you for your request!",
@@ -554,8 +551,7 @@
     "linkToLabel": "Link to",
     "addLinkButtonText": "Add Link",
     "enterValidUrlError": "Please enter a valid URL",
-    "enterTextHerePlaceholder": "Enter text here...",
-    "bookNowLabel": "Book Now"
+    "enterTextHerePlaceholder": "Enter text here..."
   },
   "formFields": {
     "field": "Field",
@@ -663,9 +659,6 @@
   "textAreaField": {
     "maxLimitReached": "You have reached your maximum limit of characters allowed"
   },
-  "urlField": {
-    "bookingLabel": "Add your booking link (e.g., <a href=\"https://calendly.com/\" class=\"maker-anchor\">Calendly</a>)"
-  },
   "dropzoneUploader": {
     "loadingMessage": "Loading...",
     "dropToUpload": "Drop your files here or click to upload.",

package/src/composables/useTranslate.ts

@@ -124,7 +124,6 @@ const textImageFieldTr = (key) => tr(`textImageField.${key}`);
 const textItemsFieldTr = (key) => tr(`textItemsField.${key}`);
 const textStyleFieldTr = (key) => tr(`textStyleField.${key}`);
 const textAreaFieldTr = (key) => tr(`textAreaField.${key}`);
-const urlFieldTr = (key) => tr(`urlField.${key}`);
 const productConfigOptionTr = (key) => tr(`productConfigOption.${key}`);
 const editLogoSettingsTr = (key) => tr(`editLogoSettings.${key}`);
 const myUploadSettingsTr = (key, valuesToInterpolate = {}) =>
@@ -282,6 +281,5 @@ export {
   requestPaymentStripeTr,
   productDetailModalTr,
   videoTr,
-  urlFieldTr,
   confirmModalTr,
 };

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

@@ -38,7 +38,6 @@
     "dividerSectionDisplayName": "Divider",
     "shapesSectionDisplayName": "Shapes",
     "shopSectionDisplayName": "Store",
-    "bookingSectionDisplayName": "Booking",
 
     "settingsDisplayName": "Settings",
     "styleDisplayName": "Style",
@@ -124,8 +123,6 @@
     "followUsOnTitle": "Follow us on",
     "shapesTitle": "Shapes",
     "defaultTextValue": "This is a sample text",
-    "defaultBookingTitle": "Book an appointment",
-    "defaultBookingDescription": "Schedule your appointment today",
 
     "titlePlaceholder": "Title",
     "successMessagePlaceholder": "Success message",
@@ -191,7 +188,6 @@
     "linkToLabel": "Link to",
     "addLinkButtonText": "Add Link",
     "enterValidUrlError": "Please enter a valid URL",
-    "enterTextHerePlaceholder": "Enter text here...",
-    "bookNowLabel": "Book Now"
+    "enterTextHerePlaceholder": "Enter text here..."
   }
 }

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts

@@ -22,7 +22,7 @@ import {
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
 
-const RTE_ALLOWED_SECTION_TYPES = ['banner-section', 'text', 'booking-section'];
+const RTE_ALLOWED_SECTION_TYPES = ['banner-section', 'text'];
 const RTE_DISALLOWED_STYLE_FIELD_NAMES = [
   'descriptionStyle',
   'titleStyle',

package/src/shared/content-settings/components/url-field/UrlField.mixin.ts

@@ -2,29 +2,11 @@ import { defineComponent } from 'vue';
 import GenericTextInputMixin from '../GenericTextInput.mixin';
 import { URL_RE } from '../../constants';
 import debounce from 'lodash.debounce';
-import {
-  useEventTracker,
-  EVENTS,
-} from '../../../../brand-page-maker/composables/useEventTracker';
 
 const RESIZE_DEBOUNCE_WAIT_IN_MS = 500;
 
 export default defineComponent({
-  props: {
-    brandPageType: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-  },
   mixins: [GenericTextInputMixin],
-  setup() {
-    const eventTracker = useEventTracker();
-
-    return {
-      eventTracker,
-    };
-  },
   data(): Record<string, any> {
     return {
       innerValue: '',
@@ -53,9 +35,6 @@ export default defineComponent({
 
       return this.innerValue;
     },
-    isBooking(): boolean {
-      return this.contentType === 'booking-section';
-    },
   },
   watch: {
     value(newVal) {
@@ -93,22 +72,5 @@ export default defineComponent({
         this.text = this.innerValue;
       }
     },
-    handleBookingLabelClick(event) {
-      if (event.target.tagName === 'A') {
-        event.preventDefault();
-        const href = event.target.getAttribute('href');
-
-        if (href) {
-          this.eventTracker.sendWebsiteEvent({
-            eventName: EVENTS.WEBSITE_MAKER_ADD_CONTENT,
-            eventProps: {
-              continuation: 'calendly-click',
-            },
-          });
-
-          window.open(href, '_blank', 'noopener,noreferrer');
-        }
-      }
-    },
   },
 });

package/src/shared/content-settings/components/url-field/UrlField.vue

@@ -1,11 +1,5 @@
 <template>
   <div>
-    <div
-      v-if="isBooking"
-      class="tw-text-sm tw-mb-2"
-      @click="handleBookingLabelClick"
-      v-html="urlFieldTr('bookingLabel')"
-    />
     <TextInput
       :id="`${id}-${name}`"
       v-model="innerValue"
@@ -27,14 +21,8 @@
 </template>
 <script>
 import UrlFieldMixin from './UrlField.mixin.ts';
-import { urlFieldTr } from '../../../../composables/useTranslate';
 
 export default {
   mixins: [UrlFieldMixin],
-  setup() {
-    return {
-      urlFieldTr,
-    };
-  },
 };
 </script>

package/src/shared/font-family-selector/FontFamilySelector.mixin.ts

@@ -18,9 +18,8 @@ export default defineComponent({
   data() {
     return {
       fontFamilyCategories: Object.values(FONT_FAMILY_CATEGORIES()),
-      activeFontFamilyCategory:
-        this.getCategoryForFont(this.value) ||
-        FONT_FAMILY_CATEGORIES().classic.key,
+      activeFontFamilyCategory: FONT_FAMILY_CATEGORIES().classic
+        .key as FontFamilyCategory,
       FONT_FAMILY_CONFIGS,
     };
   },
@@ -31,27 +30,18 @@ export default defineComponent({
       );
     },
   },
-  watch: {
-    value: {
-      handler(newValue: FontFamilyName) {
-        const category = this.getCategoryForFont(newValue);
+  created() {
+    if (this.value) {
+      const category = Object.values(FONT_FAMILY_CONFIGS).find(
+        (x) => x.name === this.value,
+      )?.categories[0];
 
-        if (category && category !== this.activeFontFamilyCategory) {
-          this.activeFontFamilyCategory = category;
-        }
-      },
-      immediate: true,
-    },
+      if (category) {
+        this.activeFontFamilyCategory = category;
+      }
+    }
   },
   methods: {
-    getCategoryForFont(fontName: FontFamilyName): FontFamilyCategory | null {
-      const fontConfig = Object.values(FONT_FAMILY_CONFIGS).find(
-        (config) => config.name === fontName,
-      );
-
-      return fontConfig?.categories[0] || null;
-    },
-
     onFontFamilyButtonClick(fontFamilyOption: StyleTextFontFamilyOption) {
       this.$emit('on-select', fontFamilyOption);
     },