Changes proposed ✍️

Address issues reported in this ticket -> https://linear.app/crowddotdev/issue/C-2511/fix-ui-issues-in-onboarding-and-pricing-page

What

🤖 Generated by Copilot at a946837

This pull request improves the onboard page component and its related steps, components, and configs. It simplifies the rendering logic, adds validation and feedback features, and fixes some UI issues. It also refactors the book a demo page to use a dialog component and adds some utility functions for Cal embed scripts. Additionally, it adds lazy loading and custom loading styles to the avatar-image component and fixes the image width of the integration list items.
​

🤖 Generated by Copilot at a946837

The onboard page needed some changes
To fix UI issues and glitches
They added ctaTooltip and activeIntegrations
And refactored some Cal embed functions
And removed some unused and redundant features

Why

How

🤖 Generated by Copilot at a946837

• Add image width to integration list item and onboard integration item components to prevent stretching (link, link)
• Add div element to onboard sync data step component to display sync message (link)
• Add useVuelidate and minValue imports and props definition to onboard sync data step component to enable validation of active integrations (link)
• Add useVuelidate hook to onboard sync data step component to check that active integrations has a minimum value of 1 (link)
• Remove hasValidation property from invite colleagues, sync data, and workspace details step configs as it is no longer needed (link, link, link)
• Remove populate sample data call from invite colleagues and tenant new form components as it is no longer needed (link, link)
• Change cta property from function to string in sync data and workspace details step configs as it no longer depends on any parameter ( link)
• Add ctaTooltip property to sync data step config to display message when user tries to proceed without connecting any integrations ( link)
• Refactor onboard book a demo page component to use utility function to render Cal embed script (link)
• Change currentUser condition to check for fullName property in onboard page component to avoid displaying comma when user has no name (link)
• Replace justify-between class with gap-10 class in onboard page component to add spacing between step indicators (link)
• Remove conditional rendering of step component based on hasValidation property in onboard page component as it is no longer needed (link)
• Refactor onboard page component to use tooltip component to display ctaTooltip message and change button size from md to lg (link)
• Add activeIntegrations property to form data in onboard page component to store number of connected integrations (link)
• Update activeIntegrations property with integrations length in onConnect method in onboard page component (link)
• Refactor plans page component to use dialog component to display Cal embed script instead of opening new tab (link, link, link, link)
• Refactor plans settings file to use utility functions to render Cal embed script and open customer portal link (link, link, link, link, link, link)
• Add lazy and class attributes and style block to avatar image component to enable lazy loading and styling of image element (link, link)
• Add utils/cals file to define utility functions to render Cal embed script with different parameters (link)

Checklist ✅

• Label appropriately with Feature, Improvement, or Bug.
• Add screenshots to the PR description for relevant FE changes
• New backend functionality has been unit-tested.
• API documentation has been updated (if necessary) (see docs on API documentation).
• Quality standards are met.