Hubspot app [INTEG-2766] #10035

joaquincasal · 2025-07-29T20:17:51Z

Purpose

Seamlessly sync Contentful entry content to email campaigns in Hubspot. Map entry fields to custom email modules in Hubspot to automatically keep content consistent at scale.

Approach

The app allows to create custom modules in Hubspot that can be used in emails. The modules are kept in sync with Contentful's content.

Screen.Recording.2025-07-29.at.17.37.12.mov

) * removing some locations and moving tests files * adding cursor to gitignore

* adding base config structure and basic tests * changing ConfigScreen.spec.tsx * pr comments corrections

#9929) * wip * adding content type through config screen first version * making ContentTypeMultiSelect component and tests * refactor in config screen organization * refactor using multiselect component * fix prettier format * refactor in tests + removing app through config screen * refactor and creation of tests * adding autocomplete option in the multiselect component * removing redundant test * removing unnecessary useCallBack

* Add function to create modules * Update apps/hubspot/test/functions/createModules.spec.ts Co-authored-by: JuliRossi <juliana.rossi@external.contentful.com> * Update apps/hubspot/test/functions/createModules.spec.ts Co-authored-by: JuliRossi <juliana.rossi@external.contentful.com> --------- Co-authored-by: JuliRossi <juliana.rossi@external.contentful.com>

* first version of config screen validation function and tests * correction of PR comments and refactor in config screen and validateHubspotToken function

* Add support for more field types * Fix tests warnings * Add support for images + refactor * Modules function refactor * Remove casting * Use find* instead of waitFor in tests * Fix entry title * Fix nummer displayed in the 'select all' checkbox

) * adding creation of config entry when installing the app * refactor extract constant * removing unused code * changing description in createContentType from utils * changing notifier error from config screen

* Copy updates * Add gif to config screen * Replace gif with video

* adding a config entry service * changing ConnectedField type * lazy get for config entry service * removing getDefaultLocale function since it is not used anymore * PR comments

* Add second dialog step * Add Dialog styles file * Show results after module creation * Show error for unsupported characters in modules * Disable inputs when sending * Hubspot: validations update [] (#9962) * Move token validation from config screen to dialog * Update config screen instructions and video

* Show last synced time in sidebar * Display error note in sidebar * Update apps/hubspot/src/locations/Sidebar.tsx Co-authored-by: Franco Banfi <62450599+FBanfi@users.noreply.github.com> * Fix linter --------- Co-authored-by: Franco Banfi <62450599+FBanfi@users.noreply.github.com>

)

* first version of app event handler function * tests for appEventHandler.spec.ts * adding test for ConfigEntryService file * changing ConfigEntryService tests structure * adding tests for ConfigEntryService and removing uninstall event * removing old function from manifest * PR corrections * making default locale optional in ConfigEntryService

* Persist error in sidebar * Refactor Dialog.showResults

* WIP save connected fields + config entry service refactor * adding + fix in createModules.ts --------- Co-authored-by: joaquin <joaquin.casal@10pines.com>

* first version of update on save event + some tests * adding refactor to the appEventHandler tests * rename from test * Fix linter * changin place of call and retry * refactor: passing only the hubspot token to function * early return if entry is not synced + new test * fix test --------- Co-authored-by: joaquin <joaquin.casal@10pines.com>

* Hubspot: Enhance text field handling in module creation [INTEG-2785] * Added support for long text fields in createModules.ts * Introduced LONG_TEXT_MODULE_TEMPLATE in templates.ts * Updated logic to format text field values as HTML paragraphs * Hubspot: Update module templates for rich text handling * Add tests * fix rebase * Hubspot: Refactor module creation by extracting createModuleFile and error classes * Hubspot: Update appEventHandler test to use rich text field template for module creation

* Hubspot: Update configuration screen instructions for clarity * Add tooltip to FieldCheckbox for unsupported syncing indication * Remove audio from hubspot.mp4 * Remove isVisible prop from Tooltip in FieldCheckbox component * Update title in ConfigEntryService to include warning against deletion

* page location table * adding styles * removing property from mock in test * refactors in styles and types * modifying tests and page components

* wip adding test * Fix tests * wip adding types for the connected entry modal * wip fixing tests * Refactoring and polishing page * Modal refactor * Fix typos in messages and update test assertions for connected fields * Refactor displayType function to use FieldItems type for better type safety * refactor to fix warning * changing modal header title and content to match the figma * reducing the padding of the modal to match the figma * refactor in the page empty and error cases * adding test for empty and error table cases --------- Co-authored-by: Juli Rossi <juliana.rossi@external.contentful.com>

…9997) * adding error badges in Page table and modal * removing warning oct component + styles changes

* Disconnect functionality * remove unused import * re-adding tests * Removing unused parameter * Fix rebase * Prettier

* Enhance FieldSelection component to include connected field IDs and update tooltip behavior. Fetch connected fields in Dialog component and pass them to FieldSelection. Update tests to verify checkbox states for connected fields. * remove parameter

…9996) * fixing update method in config entry service * changing createModules function to send all the fields to the update * adding test for updateConnectedFields

…escriptions (#10014)

…G-2971] (#10015) * changing page table to display content type name * changing page modal to display field name instead of id * inlining content type name in page table * formating prettier

* Add getting started images and enhance ConfigScreen layout * Enhance ConfigScreen by adding alt text for images in GettingStartedStep component * Add test for Getting Started section in ConfigScreen with image alt text checks * Fixes per comments

* Update dependencies and add event subscription script for Hubspot integration * Testing first approach * Remove dotenv/config from setupFiles in vitest configuration * Refactor tests for createAppEventSubscription to improve type safety and error handling

* adding error handling for duplicated names * prettier * Refactor FieldModuleNameMapping to improve validation handling and error management * removing useEffect * refactor removing useEffect --------- Co-authored-by: Juli Rossi <juliana.rossi@external.contentful.com>

netlify · 2025-07-29T20:17:57Z

✅ Deploy Preview for ecommerce-app-base-components canceled.

Name	Link
🔨 Latest commit	`cfdc16e`
🔍 Latest deploy log	https://app.netlify.com/projects/ecommerce-app-base-components/deploys/68892c86ca5404000719d1f2

ryunsong-contentful

Nothing breaking and overall looks good. My comments are more about slight code quality improvements rather than anything breaking or fundamental issues

ryunsong-contentful · 2025-07-29T21:34:34Z

apps/hubspot/src/locations/ConfigScreen.tsx

+    errorMessage: string
+  ) {
+    const hasValue = !!value?.trim();
+    setError(hasValue ? null : errorMessage);


Checkers shouldn't set other params like this, violates SRP (single-responsbility-principal)

ryunsong-contentful · 2025-07-29T21:35:25Z

apps/hubspot/src/locations/ConfigScreen.tsx

+    );
+
+    if (!hubspotTokenHasValue) {
+      sdk.notifier.error(EMPTY_MESSAGE);


Related to the above comment - this is now slightly awkward where one has to understand why setHubspotTokenError isn't called here (because it's somehow already handled in the checker).

ryunsong-contentful · 2025-07-29T21:37:17Z

apps/hubspot/functions/appEventHandler.ts

+async function deleteConfigEntry(cma: PlainClientAPI) {
+  try {
+    await cma.entry.unpublish({ entryId: CONFIG_ENTRY_ID });
+  } catch (e) {}


Should we at least not log the errors if these things fail to at least make debugging easier

Some of these calls are expected to fail in some cases (when the entry is not published). And this runs when the app gets uninstalled, so logs would be lost immediately after

ryunsong-contentful · 2025-07-29T21:51:08Z

apps/hubspot/src/components/Splitter.tsx

+
+interface SplitterProps extends CommonProps, MarginProps, PaddingProps {}
+
+const Splitter = (props: SplitterProps) => {


Add this to the discussion with Sarah about adding this to the component library

ryunsong-contentful · 2025-07-29T21:55:29Z

apps/hubspot/src/locations/Page.tsx

+  const [modalOpen, setModalOpen] = useState<boolean>(false);

-  return <Paragraph>Hello Page Component (AppId: {sdk.ids.app})</Paragraph>;
+  const cma = createClient(


Does this need to be created on every re-render? Could insert a useMemo here. I think I saw something similar in ConfigScreen.tsx

ryunsong-contentful · 2025-07-29T21:56:42Z

apps/hubspot/src/locations/Page.tsx

+              });
+              return { entry, contentType };
+            } catch (err) {
+              return null;


We can probably do something better here no?

FBanfi and others added 30 commits June 17, 2025 09:47

Hubspot: organizing structure and removing locations [INTEG-2802] (#9914

87237d3

) * removing some locations and moving tests files * adding cursor to gitignore

Hubspot: Config screen base structure [INTEG-2769] (#9924)

8c5fe7e

* adding base config structure and basic tests * changing ConfigScreen.spec.tsx * pr comments corrections

Add sidebar (#9932)

f83051a

Add fields selection step (#9940)

fef4874

FieldSelection UI adjustments

48dc92d

Update type import

fef8ffc

Hubspot: Config screen validations with a function [INTEG-2771] (#9945)

a670cca

* first version of config screen validation function and tests * correction of PR comments and refactor in config screen and validateHubspotToken function

Hubspot: Setup custom content type for configuration [INTEG-2784] (#9952

64e898d

) * adding creation of config entry when installing the app * refactor extract constant * removing unused code * changing description in createContentType from utils * changing notifier error from config screen

Hubspot: update copy [] (#9949)

2e05611

* Copy updates * Add gif to config screen * Replace gif with video

add warning so the user doesn't modify the config entry (#9954)

44537ce

Hubspot: adding config entry service [INTEG-2785] (#9953)

b65af71

* adding a config entry service * changing ConnectedField type * lazy get for config entry service * removing getDefaultLocale function since it is not used anymore * PR comments

Hubspot: Trim whitespace from access token input on config screen (#9965

5a1e77b

)

Hubspot: Persist error in sidebar [] (#9967)

d0bbc66

* Persist error in sidebar * Refactor Dialog.showResults

Hubspot: storage on module creation [INTEG-2785] (#9972)

60ff018

* WIP save connected fields + config entry service refactor * adding + fix in createModules.ts --------- Co-authored-by: joaquin <joaquin.casal@10pines.com>

Hubspot: page location table [INTEG-2780] (#9979)

27c8b14

* page location table * adding styles * removing property from mock in test * refactors in styles and types * modifying tests and page components

fix localization issue (#9990)

74fd1aa

Merge branch 'master' into hubspot

126d0c7

Hubspot: adding and displaying error in Page location [INTEG-2783] (#…

6057ac6

…9997) * adding error badges in Page table and modal * removing warning oct component + styles changes

move tooltip (#9993)

e0c27f1

Hubspot disconnect - [INTEG-2782] (#10000)

6c89c39

* Disconnect functionality * remove unused import * re-adding tests * Removing unused parameter * Fix rebase * Prettier

JuliRossi and others added 10 commits July 24, 2025 10:35

Hubspot: fixing update method in createModule function [INTEG-2941] (#…

666a654

…9996) * fixing update method in config entry service * changing createModules function to send all the fields to the update * adding test for updateConnectedFields

Update connected fields handling in Page component and enhance test d…

68dbf93

…escriptions (#10014)

Hubspot: changing displaying field and content type id for name [INTE…

c3b9d71

…G-2971] (#10015) * changing page table to display content type name * changing page modal to display field name instead of id * inlining content type name in page table * formating prettier

Add periods (#10028)

e52280e

Delete custom content type when uninstalling the app (#10030)

6d7e076

Add error message for empty module name

d930ccd

joaquincasal requested a review from a team as a code owner July 29, 2025 20:17

Merge branch 'master' into hubspot

cfdc16e

ryunsong-contentful approved these changes Jul 29, 2025

View reviewed changes

joaquincasal merged commit dc84283 into master Jul 30, 2025
18 checks passed

joaquincasal deleted the hubspot branch July 30, 2025 15:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hubspot app [INTEG-2766] #10035

Hubspot app [INTEG-2766] #10035

Uh oh!

joaquincasal commented Jul 29, 2025 •

edited

Loading

Uh oh!

netlify bot commented Jul 29, 2025 •

edited

Loading

Uh oh!

ryunsong-contentful left a comment

Uh oh!

ryunsong-contentful Jul 29, 2025

Uh oh!

ryunsong-contentful Jul 29, 2025

Uh oh!

ryunsong-contentful Jul 29, 2025

Uh oh!

joaquincasal Jul 30, 2025

Uh oh!

ryunsong-contentful Jul 29, 2025

Uh oh!

ryunsong-contentful Jul 29, 2025

Uh oh!

ryunsong-contentful Jul 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants


		interface SplitterProps extends CommonProps, MarginProps, PaddingProps {}

		const Splitter = (props: SplitterProps) => {

Hubspot app [INTEG-2766] #10035

Hubspot app [INTEG-2766] #10035

Uh oh!

Conversation

joaquincasal commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Approach

Uh oh!

netlify bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ecommerce-app-base-components canceled.

Uh oh!

ryunsong-contentful left a comment

Choose a reason for hiding this comment

Uh oh!

ryunsong-contentful Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

ryunsong-contentful Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

ryunsong-contentful Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

joaquincasal Jul 30, 2025

Choose a reason for hiding this comment

Uh oh!

ryunsong-contentful Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

ryunsong-contentful Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

ryunsong-contentful Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

joaquincasal commented Jul 29, 2025 •

edited

Loading

netlify bot commented Jul 29, 2025 •

edited

Loading