@woodsportal/hubspot-kit 1.0.3 → 1.0.5

package/src/dev-module-config/transform/build-hubspot-data.ts

@@ -0,0 +1,409 @@
+import type { ModuleFieldValues } from '../schema/types'
+import { normalizeRepeaterItems } from '../schema/normalize-repeater-items'
+
+type ColorValue = { color?: string; opacity?: number | string }
+
+function colorHex(value: ColorValue | undefined): string {
+  return value?.color ?? ''
+}
+
+function colorRgba(value: ColorValue | undefined): string {
+  if (!value?.color) return ''
+  const opacity = Number(value.opacity)
+  const alpha = Number.isFinite(opacity) ? opacity / 100 : 1
+  const hex = value.color.replace('#', '')
+  if (hex.length !== 6) return value.color
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+function hexWithAlphaSuffix(hex: string, suffix: string): string {
+  if (!hex) return ''
+  return `${hex}${suffix}`
+}
+
+function getNested(module: ModuleFieldValues | undefined, path: string): unknown {
+  if (!module) return undefined
+  return path.split('.').reduce<unknown>((acc, key) => {
+    if (acc === null || acc === undefined || typeof acc !== 'object') return undefined
+    return (acc as Record<string, unknown>)[key]
+  }, module)
+}
+
+function imageSrc(value: unknown): string {
+  if (!value || typeof value !== 'object') return ''
+  const src = (value as { src?: string }).src
+  return src ?? ''
+}
+
+function buildRouteLists(module: ModuleFieldValues) {
+  const iframeList: Array<Record<string, unknown>> = []
+  const dynamicSidebarList: Array<Record<string, unknown>> = []
+  const dynamicRouteList: Array<Record<string, unknown>> = []
+
+  const home = getNested(module, 'home') as ModuleFieldValues | undefined
+  const addHomeTab = Boolean(module.add_home_tab)
+
+  if (addHomeTab && home) {
+    const rightSidebarItems = normalizeRepeaterItems(home.right_sidebar_object)
+    if (home.add_right_sidebar && rightSidebarItems.length > 0) {
+      for (const item of rightSidebarItems) {
+        iframeList.push({
+          label: home.tab_name,
+          tabName: home.tab_name,
+          showIframe: item.show_iframe,
+          propertyName: item.property_name,
+          iframeProperties: item.iframe_properties,
+          hubspotObjectTypeId: item.object_type_id,
+        })
+        dynamicSidebarList.push({
+          label: item.list_object_name,
+          icon: item.icon_svg_code,
+          showIframe: item.show_iframe,
+          propertyName: item.property_name,
+          iframeProperties: item.iframe_properties,
+          listObjectName: item.list_object_name,
+          listObjectProperties: item.list_object_properties,
+          associateObjectName: item.association_object_name,
+          hubspotObjectId: item.association_object_type_id,
+          hubspotObjectTypeId: item.object_type_id,
+          associateObjectProperties: item.association_object_properties,
+          companyAsMediator: item.mediator_object_type_id,
+          pipeLineId: item.pipeline_id,
+          specPipeLine: item.add_specific_pipeline,
+          objectType: 'HUBSPOT_DEFINED',
+        })
+      }
+    }
+
+    dynamicRouteList.push({
+      tabName: home.tab_name,
+      homeCardsView: home.view,
+      icon: home.icon_svg_code,
+    })
+  }
+
+  const menuOptions = getNested(module, 'menu_options') as ModuleFieldValues | undefined
+  const menuObjects = normalizeRepeaterItems(menuOptions?.objects)
+  if (menuOptions?.hubspot_defined_object && menuObjects.length > 0) {
+    for (const item of menuObjects) {
+      iframeList.push({
+        label: item.list_object_name,
+        tabName: item.tab_name,
+        showIframe: item.show_iframe,
+        propertyName: item.property_name,
+        iframeProperties: item.iframe_properties,
+        hubspotObjectTypeId: item.object_type_id,
+      })
+      dynamicRouteList.push({
+        label: item.list_object_name,
+        objectDescription: item.object_description,
+        objectUserProperties: item.properties,
+        objectUserPropertiesView: item.view,
+        icon: item.icon_svg_code,
+        showIframe: item.show_iframe,
+        propertyName: item.property_name,
+        iframeProperties: item.iframe_properties,
+        listObjectName: item.list_object_name,
+        listObjectProperties: item.list_object_properties,
+        associateObjectName: item.association_object_name,
+        hubspotObjectId: item.association_object_type_id,
+        hubspotObjectTypeId: item.object_type_id,
+        associateObjectProperties: item.association_object_properties,
+        companyAsMediator: item.mediator_object_type_id,
+        pipeLineId: item.pipeline_id,
+        specPipeLine: item.add_specific_pipeline,
+        objectType: 'HUBSPOT_DEFINED',
+      })
+    }
+  }
+
+  const customMenuObjects = normalizeRepeaterItems(menuOptions?.hubspot_custom_objects)
+  if (menuOptions?.hubspot_custom_object && customMenuObjects.length > 0) {
+    for (const item of customMenuObjects) {
+      iframeList.push({
+        label: item.list_object_name,
+        tabName: item.tab_name,
+        showIframe: item.show_iframe,
+        propertyName: item.property_name,
+        iframeProperties: item.iframe_properties,
+        hubspotObjectTypeId: item.object_type_id,
+      })
+      dynamicRouteList.push({
+        label: item.list_object_name,
+        objectDescription: item.object_description,
+        objectUserProperties: item.properties,
+        objectUserPropertiesView: item.view,
+        icon: item.icon_svg_code,
+        showIframe: item.show_iframe,
+        propertyName: item.property_name,
+        iframeProperties: item.iframe_properties,
+        listObjectName: item.list_object_name,
+        listObjectProperties: item.list_object_properties,
+        associateObjectName: item.association_object_name,
+        hubspotObjectId: item.association_object_type_id,
+        hubspotObjectTypeId: item.object_type_id,
+        associateObjectProperties: item.association_object_properties,
+        companyAsMediator: item.mediator_object_type_id,
+        pipeLineId: item.pipeline_id,
+        specPipeLine: item.add_specific_pipeline,
+        objectType: 'USER_DEFINED',
+      })
+    }
+  }
+
+  return { iframeList, dynamicSidebarList, dynamicRouteList }
+}
+
+function buildModuleStylesOptions(module: ModuleFieldValues) {
+  const style = getNested(module, 'style') as ModuleFieldValues | undefined
+  const homeTab = getNested(style, 'home_tab_styles') as ModuleFieldValues | undefined
+  const buttonStyles = getNested(homeTab, 'button_styles') as ModuleFieldValues | undefined
+  const sidebar = getNested(style, 'sidebar_styles') as ModuleFieldValues | undefined
+  const listPage = getNested(style, 'list_page_styles') as ModuleFieldValues | undefined
+  const details = getNested(style, 'details_page_styles') as ModuleFieldValues | undefined
+  const banner = getNested(details, 'banner_background_options') as ModuleFieldValues | undefined
+  const createBtn = getNested(style, 'table_record_creation_button') as ModuleFieldValues | undefined
+  const rightTables = getNested(style, 'd_h_sidebar') as ModuleFieldValues | undefined
+  const notes = getNested(style, 'note_cards') as ModuleFieldValues | undefined
+
+  return {
+    homeTabStyles: {
+      headingColor: colorHex(homeTab?.home_tab_banner_text_color as ColorValue),
+      descriptionColor: colorHex(homeTab?.description_color as ColorValue),
+      buttonStyles: {
+        backgroundColor: colorHex(buttonStyles?.background_color as ColorValue),
+        textColor: colorHex(buttonStyles?.text_color as ColorValue),
+      },
+      overlayer: {
+        color: colorHex(homeTab?.banner_overlayer_color as ColorValue),
+        opacity: String((homeTab?.banner_overlayer_color as ColorValue)?.opacity ?? ''),
+      },
+      svgColor: {
+        color: colorHex(homeTab?.user_card_svg_color as ColorValue),
+        opacity: String((homeTab?.user_card_svg_color as ColorValue)?.opacity ?? ''),
+      },
+    },
+    sidebarStyles: {
+      textColor: colorHex(sidebar?.text_color as ColorValue),
+      backgroundColor: colorHex(sidebar?.sidebar_background_color as ColorValue),
+    },
+    listPageStyles: {
+      textColor: colorHex(listPage?.heading_color as ColorValue),
+    },
+    detailsPageStyles: {
+      textColor: colorHex(details?.text_color as ColorValue),
+      bannerColors: {
+        color1: colorHex(banner?.banner_color_1 as ColorValue),
+        color2: colorHex(banner?.banner_color_2 as ColorValue),
+      },
+    },
+    creatButtonStyles: {
+      backgroundColor: colorHex(createBtn?.background_color as ColorValue),
+      textColor: colorHex(createBtn?.text_color as ColorValue),
+    },
+    rightTables: {
+      backgroundColor: colorRgba(rightTables?.background_color as ColorValue),
+      cardBackgroundColor: colorRgba(rightTables?.card_background_color as ColorValue),
+      textColor: colorRgba(rightTables?.text_color as ColorValue),
+    },
+    noteStyle: {
+      hsBg: colorHex(notes?.hs_note_card_bg_color as ColorValue),
+      hsText: colorHex(notes?.hs_note_ts_text_color as ColorValue),
+      wpBg: colorHex(notes?.wp_note_card_bg_color as ColorValue),
+      wpText: colorHex(notes?.wp_note_ts_text_color as ColorValue),
+    },
+  }
+}
+
+function buildSidebarCtaStyles(module: ModuleFieldValues) {
+  const style = getNested(module, 'style') as ModuleFieldValues | undefined
+  const sidebarCta = getNested(style, 'sidebar_cta') as ModuleFieldValues | undefined
+  return {
+    backgroundColor: colorRgba(sidebarCta?.background_color as ColorValue),
+    textColor: colorRgba(sidebarCta?.text_color as ColorValue),
+    buttonBackgroundColor: colorHex(sidebarCta?.button_background_color as ColorValue),
+    buttonTextColor: colorRgba(sidebarCta?.button_text_color as ColorValue),
+  }
+}
+
+function buildBaseCompanyOptions(module: ModuleFieldValues) {
+  const other = getNested(module, 'other_options') as ModuleFieldValues | undefined
+  const company = getNested(other, 'company_options') as ModuleFieldValues | undefined
+  const createLink = getNested(other, 'create_an_account_link') as ModuleFieldValues | undefined
+  const href = (createLink?.url as { href?: string })?.href ?? '#'
+
+  return {
+    logoImg: imageSrc(company?.logo),
+    companyName: String(company?.company_name ?? ''),
+    smallLogo: imageSrc(company?.small_logo),
+    authPopupFormLogo: imageSrc(company?.auth_popup_form_logo),
+    welcomeMessage: String(other?.welcome_message ?? ''),
+    createAccountBool: Boolean(other?.show_create_an_account_link),
+    createAccountLink: `<a href="${href}" target="_blank" rel="noopener noreferrer">Sign up</a>`,
+  }
+}
+
+export type BuiltHubSpotData = {
+  dataSourceSet: boolean
+  apiBaseUrlOption: string
+  showCompanyNameOption: boolean
+  showSidebarCtaOption: boolean
+  addHomeTabOption: boolean
+  sidebarMenuOptions: Array<Record<string, unknown>>
+  moduleIframeListOptions: Array<Record<string, unknown>>
+  sidebarListDataOption: Array<Record<string, unknown>>
+  showSidebarListDataOption: boolean
+  sidebarCtaDetails: unknown
+  baseCompanyOptions: ReturnType<typeof buildBaseCompanyOptions>
+  enableDashboardCards: boolean
+  dashboardCards: Array<unknown>
+  homeTabsDataTypeFilter: unknown
+  moduleStylesOptions: ReturnType<typeof buildModuleStylesOptions>
+  recorBtnCustom: boolean
+  sidebarCtaStyles: ReturnType<typeof buildSidebarCtaStyles>
+  developerModeModule: boolean
+  developerOptionTempUrl: string
+  developerOption: boolean
+  ssoButtonsCustomizeOptions: unknown
+  primarycolor: string
+  secondarycolor: string
+}
+
+/** TypeScript port of public/module.html HubL assembly (lines 1–270). */
+export function buildHubSpotDataFromFields(
+  module: ModuleFieldValues,
+): BuiltHubSpotData {
+  const { iframeList, dynamicSidebarList, dynamicRouteList } = buildRouteLists(module)
+  const moduleStylesOptions = buildModuleStylesOptions(module)
+  const style = getNested(module, 'style') as ModuleFieldValues | undefined
+  const globals = getNested(style, 'module_global_colors') as ModuleFieldValues | undefined
+  const home = getNested(module, 'home') as ModuleFieldValues | undefined
+  const other = getNested(module, 'other_options') as ModuleFieldValues | undefined
+  const devOptions = getNested(module, 'developer_options') as ModuleFieldValues | undefined
+
+  const creatBg = moduleStylesOptions.creatButtonStyles.backgroundColor
+  const creatText = moduleStylesOptions.creatButtonStyles.textColor
+
+  return {
+    dataSourceSet: false,
+    apiBaseUrlOption: String(module.backend_server_url ?? ''),
+    showCompanyNameOption: Boolean(getNested(other, 'company_options.show_company_name')),
+    showSidebarCtaOption: Boolean(other?.show_sidebar_cta),
+    addHomeTabOption: Boolean(module.add_home_tab),
+    sidebarMenuOptions: dynamicRouteList,
+    moduleIframeListOptions: iframeList,
+    sidebarListDataOption: dynamicSidebarList,
+    showSidebarListDataOption: Boolean(home?.add_right_sidebar),
+    sidebarCtaDetails: other?.sidebar_cta_details ?? {},
+    baseCompanyOptions: buildBaseCompanyOptions(module),
+    enableDashboardCards: Boolean(home?.enable_dashboard_cards),
+    dashboardCards: normalizeRepeaterItems(home?.dashboard_cards),
+    homeTabsDataTypeFilter: home?.tabs_data_type ?? {},
+    moduleStylesOptions,
+    recorBtnCustom: Boolean(creatBg && creatText),
+    sidebarCtaStyles: buildSidebarCtaStyles(module),
+    developerModeModule: Boolean(module.developerMode),
+    developerOptionTempUrl: String(devOptions?.temp_backend_url ?? ''),
+    developerOption: Boolean(module.developer_option),
+    ssoButtonsCustomizeOptions: module.sso_buttons_customize_options ?? {},
+    primarycolor: colorHex(globals?.primary_color as ColorValue),
+    secondarycolor: colorHex(globals?.secondary_color as ColorValue),
+  }
+}
+
+export function buildCssVarsFromFields(module: ModuleFieldValues): Record<string, string> {
+  const built = buildHubSpotDataFromFields(module)
+  const styles = built.moduleStylesOptions
+  const primary = built.primarycolor
+  const secondary = built.secondarycolor
+  const globals = getNested(getNested(module, 'style') as ModuleFieldValues, 'module_global_colors') as ModuleFieldValues
+  const buttonText = colorHex(globals?.button_text_color as ColorValue)
+
+  const homeOverlayerColor =
+    styles.homeTabStyles.overlayer.color !== ''
+      ? colorRgba({
+          color: styles.homeTabStyles.overlayer.color,
+          opacity: styles.homeTabStyles.overlayer.opacity,
+        })
+      : ''
+
+  return {
+    '--primary-color': primary,
+    '--secondary-color': secondary,
+    '--button-text-color': buttonText,
+    '--primary-color-hover-bg': hexWithAlphaSuffix(primary, '30'),
+    '--secondary-color-hover-bg': hexWithAlphaSuffix(secondary, '10'),
+    '--banner-overlayer-color': hexWithAlphaSuffix(primary, '10'),
+    '--home-tab-heading-color': styles.homeTabStyles.headingColor,
+    '--home-tab-description-color': styles.homeTabStyles.descriptionColor,
+    '--home-tab-button-background-color': styles.homeTabStyles.buttonStyles.backgroundColor,
+    '--home-tab-button-text-color': styles.homeTabStyles.buttonStyles.textColor,
+    '--home-tab-overlayer-color': homeOverlayerColor,
+    '--home-tab-overlayer-opacity': styles.homeTabStyles.overlayer.opacity,
+    '--home-tab-svg-color': styles.homeTabStyles.svgColor.color,
+    '--home-tab-svg-opacity': styles.homeTabStyles.svgColor.opacity,
+    '--sidebar-text-color': styles.sidebarStyles.textColor,
+    '--sidebar-background-color': styles.sidebarStyles.backgroundColor,
+    '--list-page-heading-color': styles.listPageStyles.textColor,
+    '--details-page-text-color': styles.detailsPageStyles.textColor,
+    '--details-page-banner-color1': styles.detailsPageStyles.bannerColors.color1,
+    '--details-page-banner-color2': styles.detailsPageStyles.bannerColors.color2,
+    '--right-tables-background-color': styles.rightTables.backgroundColor,
+    '--right-tables-card-background-color': styles.rightTables.cardBackgroundColor,
+    '--right-tables-text-color': styles.rightTables.textColor,
+    '--note-hs-bg': styles.noteStyle.hsBg,
+    '--note-hs-text': styles.noteStyle.hsText,
+    '--note-wp-bg': styles.noteStyle.wpBg,
+    '--note-wp-text': styles.noteStyle.wpText,
+    '--sidebarCta-background-color': built.sidebarCtaStyles.backgroundColor,
+    '--sidebarCta-text-color': built.sidebarCtaStyles.textColor,
+    '--sidebarCta-button-background-color': built.sidebarCtaStyles.buttonBackgroundColor,
+    '--sidebarCta-button-text-color': built.sidebarCtaStyles.buttonTextColor,
+    '--rt-color-white': '#fff',
+    '--rt-color-dark': '#222',
+    '--rt-color-success': '#8dc572',
+    '--rt-color-error': '#be6464',
+    '--rt-color-warning': '#f0ad4e',
+    '--rt-color-info': '#337ab7',
+    '--rt-opacity': '0.9',
+    '--rt-transition-show-delay': '0.15s',
+    '--rt-transition-closing-delay': '0.15s',
+  }
+}
+
+const CREATE_BUTTON_STYLE_ID = 'woodsportal-module-create-button-styles'
+
+export function applyCssVarsToDocument(vars: Record<string, string>): void {
+  if (typeof document === 'undefined') return
+  for (const [name, value] of Object.entries(vars)) {
+    document.documentElement.style.setProperty(name, value)
+  }
+}
+
+export function applyCreateButtonStyles(module: ModuleFieldValues): void {
+  if (typeof document === 'undefined') return
+  const built = buildHubSpotDataFromFields(module)
+  const { backgroundColor, textColor } = built.moduleStylesOptions.creatButtonStyles
+  let styleEl = document.getElementById(CREATE_BUTTON_STYLE_ID) as HTMLStyleElement | null
+
+  if (!built.recorBtnCustom || !backgroundColor || !textColor) {
+    styleEl?.remove()
+    return
+  }
+
+  const css = `
+.CUSTOM-create-button-background-color { background-color: ${backgroundColor}; }
+.CUSTOM-create-button-text-color { color: ${textColor} !important; }
+.CUSTOM-create-button-background-color:hover { background-color: ${hexWithAlphaSuffix(backgroundColor, '80')}; }
+`.trim()
+
+  if (!styleEl) {
+    styleEl = document.createElement('style')
+    styleEl.id = CREATE_BUTTON_STYLE_ID
+    document.head.appendChild(styleEl)
+  }
+  styleEl.textContent = css
+}