Implement Silver, Gold and Platinum pricing plans on on-premises pages#613
Implement Silver, Gold and Platinum pricing plans on on-premises pages#613ViktorSoroka07 wants to merge 1 commit intodevelopfrom
Conversation
ViktorSoroka07
requested review from
AmsterGet and
siarheirazuvalau
as code owners
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the
WalkthroughAdds an IconWithBackground component and BenefitItem, refactors LinkedCard and LinkedCardBlock to support iconColor and generic CardComponent, updates OfferPageWrapper to show benefits on pricing pages, removes comparePlans/utilizationDescription plumbing, tweaks pricing UI/text, and applies multiple styling and content updates including renaming labels and terminology changes. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Areas requiring extra attention:
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/containers/OnPremisesPage/constants.tsx (1)
36-113: Terminology inconsistency across pricing pages causes customer confusion.OnPremisesPage uses "support hours" while AcceleratorsPage (D4jPage, HealeniumPage) use "professional service hours", and TestingAsServicePage uses "Professional Service Points". This creates confusion about whether these are the same or different offerings.
Standardize terminology across all pricing/service pages:
- Decide on a single term for each distinct service type
- Update all constant files consistently
- Clarify in documentation if these are intentionally different products
🧹 Nitpick comments (6)
src/components/InfoCard/InfoCard.tsx (1)
1-1: Consider whether memoization is necessary here.The
useMemohook memoizes the BEM block builder creation, butcreateBemBlockBuilderis a lightweight operation (array manipulation and string concatenation). The memoization overhead might outweigh the benefits in typical render scenarios.Additionally,
compactfilters out falsy values before passing tocreateBemBlockBuilder, but the builder already handles falsy blocks internally (see the conditional logic in the reduce function). While explicit, this adds a minor redundancy.That said, if this pattern is used consistently across the codebase for uniformity (as suggested by the AI summary), it's reasonable to maintain for consistency.
</review_comment_end>
Also applies to: 3-3, 18-21
src/containers/AcceleratorsPage/D4jPage/constants.tsx (1)
61-77: Minor: Inconsistent JSX wrapper choice.FAQ items 3 and 4 use different wrapper patterns (
<div>vs<></>). Consider using consistent wrappers across all FAQ items for maintainability.src/containers/OnPremisesPage/OnPremisesPage.tsx (1)
27-27: Consider refining the description text for clarity.The updated description text could be improved for readability:
- Current: "Need expert assistance or enterprise features for your self-hosted or SaaS ReportPortal? We offer support, integrations, migrations and custom features development"
- Consider adding punctuation and improving flow
🔎 Suggested refinement
- 'Need expert assistance or enterprise features for your self-hosted or SaaS ReportPortal? We offer support, integrations, migrations and custom features development', + 'Need expert assistance or enterprise features for your self-hosted or SaaS ReportPortal? We offer support, integrations, migrations, and custom features development.',Note: Added Oxford comma and period at the end.
src/components/LinkedCardBlock/BenefitItem/BenefitItem.tsx (2)
9-16: Type inconsistency:iconColoris required buticonis optional.In
CommonBenefitItemProps,iconColoris required (iconColor: string) whileiconis optional (icon?: string). This is semantically inconsistent sinceiconColoronly makes sense wheniconis provided. Consider making both optional or aligning with the discriminated union pattern used inBenefitItemProps.🔎 Suggested fix
export interface CommonBenefitItemProps { itemTitle: string; description: string; link?: string; linkText?: string; - icon?: string; - iconColor: string; + icon?: string; + iconColor?: string; }
43-48: Consider usingArrowLinkfor consistency.
LinkedCarduses theArrowLinkcomponent for link rendering, whileBenefitItemuses a plainLinkwith a hardcoded" >"suffix. For visual and behavioral consistency across card components, consider usingArrowLinkhere as well.src/components/OfferPageWrapper/OfferPageWrapper.tsx (1)
118-128: Consider using a<button>for scroll-to behavior.The current implementation uses a
Linkwithto="#"andpreventDefault()for scroll behavior. While this works, a<button>styled as a link would be more semantically appropriate since this action doesn't navigate to a new URL.🔎 Suggested refactor
- <Link - to="#" - className="link" - onClick={event => { - event.preventDefault(); - - utilizationRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); - }} - > + <button + type="button" + className="link" + onClick={() => { + utilizationRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); + }} + > Learn more - </Link> + </button>This would require ensuring the
.linkclass applies appropriate button-reset styles.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (26)
src/components/OfferPageWrapper/icons/envelope.svgis excluded by!**/*.svgsrc/components/OfferPageWrapper/icons/handshake.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/boost-agents.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/developer-guide.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/enhance-integrations.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/improve-core.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/installation-guide.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/release-notes.svgis excluded by!**/*.svgsrc/containers/SassPage/icons/cloud-icon.inline.svgis excluded by!**/*.svgsrc/containers/SassPage/icons/server-icon.inline.svgis excluded by!**/*.svgsrc/containers/SassPage/icons/service-packages-icon.inline.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/BusinessPage/icons/brand-visibility.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/BusinessPage/icons/community-engagement.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/BusinessPage/icons/product-improvement.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/BusinessPage/icons/talent-attraction.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/IndividualPage/icons/gain-recognition.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/IndividualPage/icons/join-community.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/IndividualPage/icons/support-innovation.svgis excluded by!**/*.svgsrc/svg/community.svgis excluded by!**/*.svgsrc/svg/deal.inline.svgis excluded by!**/*.svgsrc/svg/externalLinkArrow.inline.svgis excluded by!**/*.svgsrc/svg/headphones.inline.svgis excluded by!**/*.svgsrc/svg/infoIcon.inline.svgis excluded by!**/*.svgsrc/svg/star.inline.svgis excluded by!**/*.svgsrc/svg/star.svgis excluded by!**/*.svgsrc/svg/tool.inline.svgis excluded by!**/*.svg
📒 Files selected for processing (37)
src/components/IconWithBackground/IconWithBackground.scsssrc/components/IconWithBackground/IconWithBackground.tsxsrc/components/IconWithBackground/index.tssrc/components/InfoCard/InfoCard.tsxsrc/components/Layout/Navigation/NavMenu/OfferingsMenu/constants.tsxsrc/components/LinkedCard/LinkedCard.scsssrc/components/LinkedCard/LinkedCard.tsxsrc/components/LinkedCardBlock/BenefitItem/BenefitItem.scsssrc/components/LinkedCardBlock/BenefitItem/BenefitItem.tsxsrc/components/LinkedCardBlock/BenefitItem/index.tssrc/components/LinkedCardBlock/LinkedCardBlock.scsssrc/components/LinkedCardBlock/LinkedCardBlock.tsxsrc/components/LinkedCardBlock/index.tssrc/components/OfferPageWrapper/OfferPageWrapper.scsssrc/components/OfferPageWrapper/OfferPageWrapper.tsxsrc/components/OfferPageWrapper/TimeScale/TimeScale.scsssrc/components/OfferPageWrapper/constants.tssrc/components/PricingCard/PricingCard.scsssrc/components/PricingCard/PricingCard.tsxsrc/components/PricingHero/PricingHero.scsssrc/components/PricingHero/PricingHero.tsxsrc/components/TitleBlock/TitleBlock.tsxsrc/containers/AcceleratorsPage/D4jPage/D4jPage.tsxsrc/containers/AcceleratorsPage/D4jPage/constants.tsxsrc/containers/AcceleratorsPage/HealeniumPage/HealeniumPage.tsxsrc/containers/AcceleratorsPage/HealeniumPage/constants.tsxsrc/containers/AcceleratorsPage/QaspPage/QaspPage.tsxsrc/containers/CommunityPage/CommunityPage.tsxsrc/containers/CommunityPage/constants.tssrc/containers/OnPremisesPage/OnPremisesPage.tsxsrc/containers/OnPremisesPage/constants.tsxsrc/containers/SassPage/SaasPage.tsxsrc/containers/SponsorsPage/BusinessPage/constants.tssrc/containers/SponsorsPage/IndividualPage/constants.tssrc/hooks/usePricingHeroProps.tsxsrc/utils/contactUsConfig.tssrc/utils/formatOfferingPlans.ts
🧰 Additional context used
🧬 Code graph analysis (13)
src/containers/AcceleratorsPage/QaspPage/QaspPage.tsx (1)
src/utils/formatOfferingPlans.ts (1)
formatOfferingPlans(6-26)
src/components/OfferPageWrapper/constants.ts (2)
src/components/LinkedCardBlock/BenefitItem/BenefitItem.tsx (1)
BenefitItemProps(18-26)src/utils/constants.ts (1)
DOCUMENTATION_URL(5-5)
src/components/IconWithBackground/IconWithBackground.tsx (1)
src/utils/createBemBlockBuilder.ts (1)
createBemBlockBuilder(4-24)
src/components/TitleBlock/TitleBlock.tsx (1)
src/utils/createBemBlockBuilder.ts (1)
createBemBlockBuilder(4-24)
src/components/LinkedCardBlock/LinkedCardBlock.tsx (3)
src/components/LinkedCard/LinkedCard.tsx (2)
LinkedCardProps(17-25)LinkedCard(29-45)src/utils/createBemBlockBuilder.ts (1)
createBemBlockBuilder(4-24)src/components/TitleBlock/TitleBlock.tsx (1)
TitleBlock(13-18)
src/containers/OnPremisesPage/OnPremisesPage.tsx (1)
src/utils/formatOfferingPlans.ts (1)
formatOfferingPlans(6-26)
src/containers/AcceleratorsPage/D4jPage/D4jPage.tsx (1)
src/utils/formatOfferingPlans.ts (1)
formatOfferingPlans(6-26)
src/components/LinkedCardBlock/BenefitItem/BenefitItem.tsx (2)
src/utils/createBemBlockBuilder.ts (1)
createBemBlockBuilder(4-24)src/components/IconWithBackground/IconWithBackground.tsx (1)
IconWithBackground(13-27)
src/components/InfoCard/InfoCard.tsx (2)
src/utils/types.ts (1)
LinkDto(21-24)src/utils/createBemBlockBuilder.ts (1)
createBemBlockBuilder(4-24)
src/containers/OnPremisesPage/constants.tsx (2)
src/containers/AcceleratorsPage/D4jPage/constants.tsx (1)
FAQ_DATA(33-129)src/containers/AcceleratorsPage/HealeniumPage/constants.tsx (1)
FAQ_DATA(22-55)
src/containers/AcceleratorsPage/HealeniumPage/constants.tsx (2)
src/containers/AcceleratorsPage/D4jPage/constants.tsx (1)
FAQ_DATA(33-129)src/containers/OnPremisesPage/constants.tsx (1)
FAQ_DATA(33-113)
src/containers/AcceleratorsPage/HealeniumPage/HealeniumPage.tsx (1)
src/utils/formatOfferingPlans.ts (1)
formatOfferingPlans(6-26)
src/components/LinkedCard/LinkedCard.tsx (2)
src/components/IconWithBackground/IconWithBackground.tsx (1)
IconWithBackground(13-27)src/components/ArrowLink/ArrowLink.tsx (1)
ArrowLink(18-28)
🔇 Additional comments (55)
src/components/TitleBlock/TitleBlock.tsx (1)
8-8: LGTM! Good improvement to prevent empty DOM elements.Making the subtitle optional and conditionally rendering it is the correct approach. This prevents rendering an empty div when no subtitle is provided, keeping the DOM clean.
Also applies to: 16-16
src/components/InfoCard/InfoCard.tsx (1)
14-14: Well-structured implementation with good flexibility.The addition of the optional
classNameprop enhances component flexibility, allowing consumers to apply custom styling when needed. The component structure is clean, follows BEM conventions consistently, and the Link button is properly integrated with appropriate class composition.</review_comment_end>
Also applies to: 17-17, 23-37
src/containers/SponsorsPage/IndividualPage/constants.ts (3)
18-18: Icon swaps are semantically appropriate.The updated icons align well with their respective card purposes:
communitySvgfor "Join a Community"starSvgfor "Gain recognition"These changes improve consistency by using centralized assets while maintaining clear visual semantics.
Also applies to: 25-25
1-2: The new SVG imports resolve correctly and files exist.The
@app/*alias maps tosrc/*per tsconfig.json, so:
@app/svg/star.svg→src/svg/star.svg✓@app/svg/community.svg→src/svg/community.svg✓Both files are present and the imports are valid.
12-12: No changes needed. All CSS variables (--graphics-iris,--graphics-light-blue,--graphics-jade) are properly defined insrc/styles/css-variables.scss, and theiconColorproperty is correctly consumed by theIconWithBackgroundcomponent across all card implementations.src/containers/AcceleratorsPage/HealeniumPage/constants.tsx (2)
25-32: Terminology update improves clarity.The change from "Professional Service Points" to "professional service hours" is clear, consistent, and more intuitive for users. The updated wording accurately describes the subscription model.
9-9: No issues found. The time allocation changes (56→50 hours, 112→120 hours) are intentional per the PR objective and the new values align with official Healenium pricing documentation. No other codebase references to the old values exist, and the terminology update to "professional service hours" is consistent with other accelerator pages (e.g., D4jPage).src/components/LinkedCard/LinkedCard.scss (1)
16-18: LGTM! Clean integration with the new IconWithBackground component.The styling change properly supports the new IconWithBackground component architecture by replacing the previous
&__imageselector with the.icon-with-backgroundclass selector.src/hooks/usePricingHeroProps.tsx (1)
5-20: LGTM! Button text and icon updates align with the rebranding.The changes properly update the pricing navigation buttons from "SaaS" to "SaaS Plans" and "On-Prem Services" to "Service Packages", with corresponding icon update.
src/utils/formatOfferingPlans.ts (1)
8-24: LGTM! Defensive programming with proper null handling.The optional chaining and conditional spread ensure that
comparePlansis only included in the return object when valid data exists, preventing downstream consumers from handling undefined/empty values.src/containers/CommunityPage/constants.ts (1)
18-18: LGTM! Consistent iconColor addition across all cards.The iconColor property additions properly support the IconWithBackground component's color customization using CSS variables.
Also applies to: 27-27, 36-36, 48-48, 57-57, 66-66
src/components/IconWithBackground/IconWithBackground.tsx (1)
1-27: LGTM! Well-structured component with proper encapsulation.The IconWithBackground component is cleanly implemented using CSS variables for customization and follows BEM naming conventions. The icon URL is used in a CSS mask, which is safe since icons come from static imports in the codebase.
src/containers/AcceleratorsPage/D4jPage/constants.tsx (1)
36-43: LGTM! Terminology updated consistently.The FAQ label and content properly use "professional service hours" instead of the previous "Professional Service Points" terminology.
src/components/PricingCard/PricingCard.tsx (3)
44-44: LGTM! Label text updated.The change from "Most popular" to "Top choice" aligns with the UI refresh.
62-62: Simplified list item rendering.The removal of custom
BLOCKS.LIST_ITEMrendering simplifies the component by eliminating icon-based list customization. Ensure this aligns with the intended visual design.
78-80: LGTM! Clearer price period display.The updated price period formatting ("for package per {period}") provides clearer context for the pricing structure.
src/containers/OnPremisesPage/constants.tsx (2)
39-42: Verify the policy change for hours validity.The validity period content has been significantly changed from monthly accumulation with rollover to a simpler "annual term only, no rollover" policy. Ensure this reflects the actual updated business policy.
5-30: No action needed. ThetimeScaleDataprop inOfferPageWrapperexplicitly accepts bothnumberandstringtypes (time: number | string), so the type change from numbers to strings is not breaking.Likely an incorrect or invalid review comment.
src/containers/SponsorsPage/BusinessPage/constants.ts (2)
2-3: LGTM: Consolidated icon imports.The refactor to use shared icons from the common SVG directory is a good practice for consistency and maintainability.
13-14: The CSS custom properties referenced in this file are already properly defined. All variables (--graphics-iris,--graphics-orchid,--graphics-light-blue,--graphics-jade) are defined insrc/styles/css-variables.scsswithin the:rootselector and are available globally throughout the application.src/components/PricingCard/PricingCard.scss (2)
95-105: LGTM: Updated price display styling.The font scale change and new price-period class improve the visual hierarchy of pricing information.
127-139: Verify browser support for:has()selector.The
:has()pseudo-class at lines 127 and 220 is now supported across all major browsers. The CSS :has() pseudo class is finally supported by all major browsers. Current support includes:
- Chrome/Edge 105+
- Firefox 121+
- Safari 15.4+
Ensure your target browser compatibility matrix aligns with these requirements.
Also applies to: 220-222
src/components/LinkedCardBlock/BenefitItem/index.ts (1)
1-1: LGTM: Standard barrel export pattern.The re-export follows established conventions for exposing the BenefitItem component through its module namespace.
src/components/LinkedCardBlock/index.ts (1)
2-2: LGTM: BenefitItem added to public API.The re-export makes BenefitItem available alongside LinkedCardBlock, enabling consumers to import both from the same module.
src/components/IconWithBackground/index.ts (1)
1-1: LGTM: Standard barrel export pattern.The re-export establishes the public API for the IconWithBackground component.
src/components/PricingHero/PricingHero.tsx (1)
24-24: LGTM: Proper handling of optional prop.Making
offerTypeoptional with conditional rendering at Line 88 is the correct approach. This maintains backward compatibility while preventing empty wrapper divs when the prop is not provided.Also applies to: 88-88
src/containers/CommunityPage/CommunityPage.tsx (1)
46-46: LGTM: Improved API with mode prop.Replacing the boolean
largePaddingwithmode="large"is a more extensible API design that allows for additional mode variants in the future. The LinkedCardBlock component correctly accepts the mode prop as an optional string literal type 'large', and the implementation properly applies BEM modifier classes based on the mode value for styling.src/utils/contactUsConfig.ts (1)
7-7: Verify URL redirects and integrations for renamed pricing plans.Changing plan names from
['Lite', 'Service Pro', 'Advanced']to['Silver', 'Gold', 'Platinum']requires:
Implementing 301 permanent redirects for old URLs
/contact-us/on-premises/lite→/contact-us/on-premises/silver/contact-us/on-premises/service-pro→/contact-us/on-premises/gold/contact-us/on-premises/advanced→/contact-us/on-premises/platinumUpdating any external documentation, marketing materials, and customer-facing references
Verifying Salesforce or other integrations recognize the new plan names
Confirm these changes are complete before deploying.
src/components/IconWithBackground/IconWithBackground.scss (1)
1-33: LGTM! Clean implementation of icon with background component.The SCSS follows BEM conventions and uses modern CSS features appropriately:
- CSS custom properties for dynamic theming (--icon-color, --icon-url)
- Mask technique for SVG icon coloring
- Logical properties (border-radius, flex)
- Proper layering with pseudo-element for translucent background
src/components/Layout/Navigation/NavMenu/OfferingsMenu/constants.tsx (2)
13-13: LGTM! Clear terminology update.The change from "SaaS" to "SaaS Plans" provides better clarity in the navigation menu.
19-19: LGTM! Terminology alignment.The change from "On-Premises" to "Service Packages" aligns with the PR's objective to update pricing plan terminology.
src/components/LinkedCardBlock/LinkedCardBlock.scss (4)
5-5: Verify visual impact of reduced padding.The vertical padding has been reduced from 120px to 80px (a 40px reduction) and updated to use the logical property
padding-block. This is a noticeable visual change that should be verified across different screen sizes.The PR description mentions visual checks were performed. Please confirm the reduced spacing looks appropriate in the context of the pricing pages.
7-10: LGTM! Improved modifier naming and logical properties.The modifier class rename from
--large-paddingto--largeis more concise, and the use ofpadding-blockis a modern best practice.
13-19: LGTM! Improved BEM structure.The refactored selectors (
.title-block__titleand.title-block__subtitle) follow proper BEM conventions and improve specificity.
32-35: LGTM! Support for new BenefitItem component.The addition of
.benefit-itemalongside.linked-cardallows the LinkedCardBlock to properly render both types of card components with consistent flex layout.src/components/LinkedCardBlock/BenefitItem/BenefitItem.scss (1)
1-40: LGTM! Well-structured BenefitItem styles.The SCSS follows established patterns:
- Proper BEM naming convention
- Flex layout with appropriate gap for icon-text pairing
- Uses design system mixins for typography consistency
- CSS custom properties for theming (--text-primary)
- Clean, maintainable structure
src/containers/AcceleratorsPage/D4jPage/D4jPage.tsx (1)
9-9: LGTM! Consistent refactoring pattern.The removal of
comparePlansdestructuring aligns with the systematic refactoring across all accelerator pages (D4jPage, QaspPage, HealeniumPage) and pricing pages to simplify the data structure. The formatOfferingPlans utility now returns onlyplans, as shown in the relevant code snippets.src/components/OfferPageWrapper/constants.ts (1)
1-29: LGTM! Well-structured benefits data.The BENEFITS_CARDS constant is well-organized with proper typing and clear benefit descriptions. The use of CSS custom properties for iconColor maintains consistency with the design system. The DOCUMENTATION_URL constant is properly exported from utils and correctly configured via environment variables.
src/containers/AcceleratorsPage/QaspPage/QaspPage.tsx (1)
10-10: Refactoring confirmed safe: QaSpace pricing display unaffected by comparePlans removal.The change from
const { plans, comparePlans }toconst { plans }in QaspPage.tsx is verified as safe. TheOfferPageWrappercomponent does not accept acomparePlansprop—it only requiresplansand other configuration properties. No code in the QaSpace context referencescomparePlans, and the destructuring pattern is consistent across all accelerator pages (D4jPage, HealeniumPage, QaspPage). TheformatOfferingPlansfunction continues to supportcomparePlansfor pages that need it (e.g., SaasPage), confirming this is a safe elimination of unused destructuring.src/containers/OnPremisesPage/OnPremisesPage.tsx (1)
9-9: Verify removal of comparePlans from On-Premises page.Line 9 correctly extracts only
plansfromformatOfferingPlans, reflecting the refactoring wherecomparePlansis now returned conditionally based on query data availability. OnPremisesPage no longer referencescomparePlans.src/containers/SassPage/SaasPage.tsx (1)
48-48: LGTM!The updated description is concise and clearly communicates the SaaS value proposition. The removal of the
offerTypeprop aligns with the updatedPricingHerocomponent that now treats it as optional.src/components/PricingHero/PricingHero.scss (1)
56-99: LGTM!The margin adjustment and the new
:first-childcentering rule for&-subtitlecorrectly handle the layout whenofferTypeis omitted, ensuring proper centering when the subtitle becomes the first child element.src/containers/AcceleratorsPage/HealeniumPage/HealeniumPage.tsx (1)
9-19: LGTM!The simplified destructuring of
{ plans }aligns with the removal of compare plan functionality from this page. TheformatOfferingPlansutility conditionally spreadscomparePlans, so extracting onlyplansis type-safe.src/components/OfferPageWrapper/TimeScale/TimeScale.scss (1)
97-133: LGTM!The styling simplifications for
&__listand itslielements improve maintainability by replacing complex nth-child offset logic with explicit width specifications. The responsive adjustments appear consistent with the broader UI simplification goals of this PR.src/components/LinkedCard/LinkedCard.tsx (1)
37-44: LGTM!The refactored component structure using
IconWithBackgroundis clean. The discriminated union type correctly ensuresiconColoris available wheniconis provided.src/components/OfferPageWrapper/OfferPageWrapper.scss (2)
45-61: LGTM!The new
.linked-card-blocksection provides appropriate container padding resets and responsive max-width constraints for the cards. The styling integrates well with the newBenefitItemcomponent rendering.
128-145: LGTM!The
&__subscription-infoblock provides clean styling with appropriate link states. The&:not(.link)selector correctly differentiates styling between generic anchors and the.linkclass.src/components/LinkedCardBlock/LinkedCardBlock.tsx (2)
21-28: LGTM on the generic refactor!The generic pattern
<T extends LinkedCardProps = LinkedCardProps>enables flexible card component injection while maintaining type safety. The defaultCardComponentassignment correctly uses a type assertion sinceLinkedCardis typed for the baseLinkedCardProps.
37-39: Key uniqueness assumption:itemTitlemay not be unique.Using
cardInfo.itemTitleas the React key assumes titles are unique across cards. If duplicate titles are possible, this could cause React reconciliation issues. Consider using an index or adding anidfield if uniqueness cannot be guaranteed.src/components/OfferPageWrapper/OfferPageWrapper.tsx (6)
19-26: LGTM!New imports are well-organized and follow the existing project patterns.
97-97: LGTM!The conditional spread pattern is a clean approach to conditionally pass props based on page type.
104-106: LGTM!Good use of the semantic
<mark>element for text highlighting.
132-138: LGTM!The conditional benefits block is cleanly integrated using the
LinkedCardBlockwithBenefitItemas the card renderer.
150-150: LGTM!Heading text aligns with the updated terminology for support hours.
152-158: Verify the icon choice for an internal link.The
LinkArrowicon (imported fromexternalLinkArrow.inline.svg) is typically used to indicate external links that navigate away from the site. However,/legal/termsappears to be an internal route.Consider whether this icon choice is intentional or if a different visual treatment would be more appropriate for internal navigation to avoid user confusion.
| children: ( | ||
| <> | ||
| <div> | ||
| <div> | ||
| If Company seeks to consume more Professional Service Points than have been contracted for | ||
| according to the Order, overage fees of 25% on a per Professional Service Point basis will | ||
| If Company seeks to consume more Professional service hours than have been contracted for | ||
| according to the Order, overage fees of 25% on a per Professional service hour basis will | ||
| apply. | ||
| </div> | ||
| <div> | ||
| Professional Service Points may be used for the duration of the payment term, and expire | ||
| at that time. For example, annual upfront payment entitles Company to use the contracted | ||
| monthly service points at any point in the year. For a quarterly upfront payment, service | ||
| points must be used within three months. | ||
| Professional service hours may be used for the duration of the payment term, and expire at | ||
| that time. For example, annual upfront payment entitles Company to use the contracted | ||
| monthly Service Points at any point in the year. For a quarterly upfront payment, Service | ||
| Points must be used within three months. | ||
| </div> | ||
| </> | ||
| </div> | ||
| ), |
There was a problem hiding this comment.
Terminology inconsistency: Mixed capitalization and outdated term.
- Line 103: Uses "Professional service hours" (capital P)
- Line 110: Still uses outdated term "Service Points" instead of "professional service hours"
These should be updated to match the lowercase "professional service hours" used elsewhere in the file (line 36, 40, etc.).
🔎 Proposed fix for consistent terminology
<div>
- If Company seeks to consume more Professional service hours than have been contracted for
+ If Company seeks to consume more professional service hours than have been contracted for
according to the Order, overage fees of 25% on a per Professional service hour basis will
apply.
</div>
<div>
Professional service hours may be used for the duration of the payment term, and expire at
that time. For example, annual upfront payment entitles Company to use the contracted
- monthly Service Points at any point in the year. For a quarterly upfront payment, Service
- Points must be used within three months.
+ monthly professional service hours at any point in the year. For a quarterly upfront payment,
+ professional service hours must be used within three months.
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| children: ( | |
| <> | |
| <div> | |
| <div> | |
| If Company seeks to consume more Professional Service Points than have been contracted for | |
| according to the Order, overage fees of 25% on a per Professional Service Point basis will | |
| If Company seeks to consume more Professional service hours than have been contracted for | |
| according to the Order, overage fees of 25% on a per Professional service hour basis will | |
| apply. | |
| </div> | |
| <div> | |
| Professional Service Points may be used for the duration of the payment term, and expire | |
| at that time. For example, annual upfront payment entitles Company to use the contracted | |
| monthly service points at any point in the year. For a quarterly upfront payment, service | |
| points must be used within three months. | |
| Professional service hours may be used for the duration of the payment term, and expire at | |
| that time. For example, annual upfront payment entitles Company to use the contracted | |
| monthly Service Points at any point in the year. For a quarterly upfront payment, Service | |
| Points must be used within three months. | |
| </div> | |
| </> | |
| </div> | |
| ), | |
| children: ( | |
| <div> | |
| <div> | |
| If Company seeks to consume more professional service hours than have been contracted for | |
| according to the Order, overage fees of 25% on a per professional service hour basis will | |
| apply. | |
| </div> | |
| <div> | |
| professional service hours may be used for the duration of the payment term, and expire at | |
| that time. For example, annual upfront payment entitles Company to use the contracted | |
| monthly professional service hours at any point in the year. For a quarterly upfront payment, | |
| professional service hours must be used within three months. | |
| </div> | |
| </div> | |
| ), |
🤖 Prompt for AI Agents
In src/containers/AcceleratorsPage/D4jPage/constants.tsx around lines 100 to
114, update inconsistent terminology: change "Professional service hours"
(capital P) to "professional service hours" and replace the outdated term
"Service Points" with "professional service hours" so phrasing is consistent
with the lowercase usage elsewhere in the file; make these exact string
replacements in the JSX children blocks on the specified lines.
239dc7b to
b876886
Compare
ViktorSoroka07
changed the title
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
src/components/PricingCard/PricingCard.scss (2)
127-139: Consider browser support requirements for:has()selector.The
:has()pseudo-class has broad modern browser support (Chrome 105+, Safari 15.4+, Firefox 121+), but older browsers will ignore this rule entirely. If your target audience includes users on older browsers, the feature content inside<b>tags will fall back to default styling.Also, consider extracting the
48pxline-height to a variable for consistency with other typography definitions.
220-222: Consider nesting this rule within the.pricing-cardblock for BEM consistency.This rule works correctly but is placed outside the main
.pricing-cardblock. For better organization and BEM methodology adherence, consider moving it inside the&__price-valueblock.🔎 Suggested refactor
&__price-value { @include m.font-scale(x3-medium); @include m.font-poppins(v.$fw-bold); display: inline-block; margin-right: 5px; margin-bottom: 10px; + + &:has(+ .pricing-card__price-period) { + margin-bottom: 0; + } } -// Remove lines 220-222 -.pricing-card__price-value:has(+ .pricing-card__price-period) { - margin-bottom: 0; -}src/components/InfoCard/InfoCard.tsx (1)
18-21: useMemo optimization is a minor performance gain.Memoizing the BEM block builder prevents recreation on each render, but
createBemBlockBuilderis relatively lightweight. This optimization is correct but offers minimal performance benefit.src/utils/contactUsConfig.ts (1)
142-142: Standardize terminology: "Package" vs "Plan".There's a terminology inconsistency in the Salesforce source values:
- Line 142:
Request Support "${plan} Package"- Line 154:
Request Support "${plan} Plan"Both refer to on-premises plans. Consider standardizing to either "Package" or "Plan" for consistency in analytics and tracking.
🔎 Proposed fix to standardize terminology
If "Package" is the preferred term:
{ name: SALESFORCE_SOURCE_NAME, - value: `Landing page / On-Premises / Compare Plan / Request Support "${plan} Plan"`, + value: `Landing page / On-Premises / Compare Plan / Request Support "${plan} Package"`, },Or if "Plan" is preferred:
{ name: SALESFORCE_SOURCE_NAME, - value: `Landing page / On-Premises / Request Support "${plan} Package"`, + value: `Landing page / On-Premises / Request Support "${plan} Plan"`, },Also applies to: 154-154
src/containers/OnPremisesPage/constants.tsx (1)
70-75: Consider improving readability.The answer text has slightly awkward formatting with the
<br />tag placement and multiple sentence fragments in a single<div>.🔎 Suggested formatting improvement
children: ( - <div> - Unfortunately, no. You can't downgrade your billing plan at any time. <br /> However, - if you need more support hours, we can discuss the plan upgrade. For that, please, press - "Contact us" in the upper right corner of our landing page. We'll be happy to - help you to find the most suitable plan for your team and provide a quote. - </div> + <> + <div> + Unfortunately, no. You can't downgrade your billing plan at any time. + </div> + <div> + However, if you need more support hours, we can discuss the plan upgrade. For that, + please press "Contact us" in the upper right corner of our landing page. + We'll be happy to help you find the most suitable plan for your team and provide a + quote. + </div> + </> ),src/components/LinkedCardBlock/LinkedCardBlock.tsx (1)
37-39: Consider adding a fallback for key uniqueness.The component uses
cardInfo.itemTitleas the React key. While this works when titles are unique, it could cause issues if the component is reused with duplicate titles.🔎 Optional improvement for key prop
Consider adding an optional
idfield to the card data or using a combination of title and index:{cardsInfo.map((cardInfo, index) => ( - <CardComponent key={cardInfo.itemTitle} {...cardInfo} /> + <CardComponent key={cardInfo.id || `${cardInfo.itemTitle}-${index}`} {...cardInfo} /> ))}This would require updating the type definition to include an optional
idfield.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (26)
src/components/OfferPageWrapper/icons/envelope.svgis excluded by!**/*.svgsrc/components/OfferPageWrapper/icons/handshake.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/boost-agents.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/developer-guide.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/enhance-integrations.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/improve-core.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/installation-guide.svgis excluded by!**/*.svgsrc/containers/CommunityPage/icons/release-notes.svgis excluded by!**/*.svgsrc/containers/SassPage/icons/cloud-icon.inline.svgis excluded by!**/*.svgsrc/containers/SassPage/icons/server-icon.inline.svgis excluded by!**/*.svgsrc/containers/SassPage/icons/service-packages-icon.inline.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/BusinessPage/icons/brand-visibility.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/BusinessPage/icons/community-engagement.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/BusinessPage/icons/product-improvement.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/BusinessPage/icons/talent-attraction.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/IndividualPage/icons/gain-recognition.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/IndividualPage/icons/join-community.svgis excluded by!**/*.svgsrc/containers/SponsorsPage/IndividualPage/icons/support-innovation.svgis excluded by!**/*.svgsrc/svg/community.svgis excluded by!**/*.svgsrc/svg/deal.inline.svgis excluded by!**/*.svgsrc/svg/externalLinkArrow.inline.svgis excluded by!**/*.svgsrc/svg/headphones.inline.svgis excluded by!**/*.svgsrc/svg/infoIcon.inline.svgis excluded by!**/*.svgsrc/svg/star.inline.svgis excluded by!**/*.svgsrc/svg/star.svgis excluded by!**/*.svgsrc/svg/tool.inline.svgis excluded by!**/*.svg
📒 Files selected for processing (37)
src/components/IconWithBackground/IconWithBackground.scsssrc/components/IconWithBackground/IconWithBackground.tsxsrc/components/IconWithBackground/index.tssrc/components/InfoCard/InfoCard.tsxsrc/components/Layout/Navigation/NavMenu/OfferingsMenu/constants.tsxsrc/components/LinkedCard/LinkedCard.scsssrc/components/LinkedCard/LinkedCard.tsxsrc/components/LinkedCardBlock/BenefitItem/BenefitItem.scsssrc/components/LinkedCardBlock/BenefitItem/BenefitItem.tsxsrc/components/LinkedCardBlock/BenefitItem/index.tssrc/components/LinkedCardBlock/LinkedCardBlock.scsssrc/components/LinkedCardBlock/LinkedCardBlock.tsxsrc/components/LinkedCardBlock/index.tssrc/components/OfferPageWrapper/OfferPageWrapper.scsssrc/components/OfferPageWrapper/OfferPageWrapper.tsxsrc/components/OfferPageWrapper/TimeScale/TimeScale.scsssrc/components/OfferPageWrapper/constants.tssrc/components/PricingCard/PricingCard.scsssrc/components/PricingCard/PricingCard.tsxsrc/components/PricingHero/PricingHero.scsssrc/components/PricingHero/PricingHero.tsxsrc/components/TitleBlock/TitleBlock.tsxsrc/containers/AcceleratorsPage/D4jPage/D4jPage.tsxsrc/containers/AcceleratorsPage/D4jPage/constants.tsxsrc/containers/AcceleratorsPage/HealeniumPage/HealeniumPage.tsxsrc/containers/AcceleratorsPage/HealeniumPage/constants.tsxsrc/containers/AcceleratorsPage/QaspPage/QaspPage.tsxsrc/containers/CommunityPage/CommunityPage.tsxsrc/containers/CommunityPage/constants.tssrc/containers/OnPremisesPage/OnPremisesPage.tsxsrc/containers/OnPremisesPage/constants.tsxsrc/containers/SassPage/SaasPage.tsxsrc/containers/SponsorsPage/BusinessPage/constants.tssrc/containers/SponsorsPage/IndividualPage/constants.tssrc/hooks/usePricingHeroProps.tsxsrc/utils/contactUsConfig.tssrc/utils/formatOfferingPlans.ts
🚧 Files skipped from review as they are similar to previous changes (19)
- src/components/LinkedCardBlock/index.ts
- src/components/IconWithBackground/index.ts
- src/components/LinkedCard/LinkedCard.scss
- src/components/OfferPageWrapper/constants.ts
- src/components/IconWithBackground/IconWithBackground.scss
- src/containers/SponsorsPage/IndividualPage/constants.ts
- src/components/LinkedCardBlock/BenefitItem/BenefitItem.tsx
- src/containers/AcceleratorsPage/QaspPage/QaspPage.tsx
- src/components/Layout/Navigation/NavMenu/OfferingsMenu/constants.tsx
- src/components/OfferPageWrapper/OfferPageWrapper.scss
- src/components/PricingCard/PricingCard.tsx
- src/components/LinkedCard/LinkedCard.tsx
- src/components/LinkedCardBlock/LinkedCardBlock.scss
- src/components/LinkedCardBlock/BenefitItem/index.ts
- src/components/PricingHero/PricingHero.tsx
- src/containers/AcceleratorsPage/D4jPage/constants.tsx
- src/containers/SponsorsPage/BusinessPage/constants.ts
- src/containers/SassPage/SaasPage.tsx
- src/components/PricingHero/PricingHero.scss
🧰 Additional context used
🧬 Code graph analysis (9)
src/containers/OnPremisesPage/OnPremisesPage.tsx (1)
src/utils/formatOfferingPlans.ts (1)
formatOfferingPlans(6-26)
src/containers/AcceleratorsPage/HealeniumPage/HealeniumPage.tsx (1)
src/utils/formatOfferingPlans.ts (1)
formatOfferingPlans(6-26)
src/containers/AcceleratorsPage/D4jPage/D4jPage.tsx (1)
src/utils/formatOfferingPlans.ts (1)
formatOfferingPlans(6-26)
src/components/OfferPageWrapper/OfferPageWrapper.tsx (5)
src/custom.d.ts (1)
Link(18-18)src/components/LinkedCardBlock/LinkedCardBlock.tsx (1)
LinkedCardBlock(21-44)src/components/OfferPageWrapper/constants.ts (1)
BENEFITS_CARDS(8-29)src/components/LinkedCardBlock/BenefitItem/BenefitItem.tsx (1)
BenefitItem(30-51)src/components/OfferPageWrapper/TimeScale/TimeScale.tsx (1)
TimeScale(17-48)
src/containers/AcceleratorsPage/HealeniumPage/constants.tsx (2)
src/containers/AcceleratorsPage/D4jPage/constants.tsx (1)
FAQ_DATA(33-129)src/containers/OnPremisesPage/constants.tsx (1)
FAQ_DATA(33-113)
src/containers/OnPremisesPage/constants.tsx (2)
src/containers/AcceleratorsPage/D4jPage/constants.tsx (1)
FAQ_DATA(33-129)src/containers/AcceleratorsPage/HealeniumPage/constants.tsx (1)
FAQ_DATA(22-55)
src/components/IconWithBackground/IconWithBackground.tsx (1)
src/utils/createBemBlockBuilder.ts (1)
createBemBlockBuilder(4-24)
src/components/LinkedCardBlock/LinkedCardBlock.tsx (3)
src/components/LinkedCard/LinkedCard.tsx (2)
LinkedCardProps(17-25)LinkedCard(29-45)src/utils/createBemBlockBuilder.ts (1)
createBemBlockBuilder(4-24)src/components/TitleBlock/TitleBlock.tsx (1)
TitleBlock(13-18)
src/components/InfoCard/InfoCard.tsx (2)
src/utils/types.ts (1)
LinkDto(21-24)src/utils/createBemBlockBuilder.ts (1)
createBemBlockBuilder(4-24)
🔇 Additional comments (29)
src/components/LinkedCardBlock/BenefitItem/BenefitItem.scss (1)
1-40: LGTM! Clean and well-structured SCSS.The stylesheet follows best practices:
- Modern SCSS module syntax with
@use- Consistent BEM naming convention
- Appropriate use of typography mixins
- CSS custom properties for theming
- Clean flex-based layout structure
The component styling is maintainable and follows the project's conventions.
src/components/PricingCard/PricingCard.scss (2)
94-101: LGTM!The updated font scale and margin adjustments align with the pricing UI refresh.
103-105: LGTM!New period label styling is clean and uses the appropriate service color variable.
src/hooks/usePricingHeroProps.tsx (1)
5-5: The import path is valid—the ServicePackagesIcon file exists.The icon file exists at
src/containers/SassPage/icons/service-packages-icon.inline.svg, and the relative import path from the hook is correct.src/components/TitleBlock/TitleBlock.tsx (2)
6-9: LGTM! Making subtitle optional improves component flexibility.The change from required to optional prop is well-aligned with the conditional rendering below and allows cleaner usage when a subtitle isn't needed.
16-16: Good use of conditional rendering.The conditional rendering pattern at line 16 prevents empty subtitle divs from cluttering the DOM when no subtitle is provided. This pairs well with the optional prop definition. All usages of
TitleBlockin the codebase pass either a subtitle string or leave it undefined, so the change is fully compatible with existing code.src/components/InfoCard/InfoCard.tsx (2)
1-3: LGTM!The new imports are appropriate for the memoized BEM builder implementation.
23-37: LGTM!The restructured rendering properly uses the memoized BEM builder for all elements, and the Link button is correctly composed with combined class names.
src/components/OfferPageWrapper/TimeScale/TimeScale.scss (2)
15-15: LGTM! Layout refinements for improved spacing and background rendering.The margin simplification and background-size change from "cover" to "contain" appear to be intentional improvements. The "contain" value ensures the background image is fully visible without cropping.
Also applies to: 23-23
116-121: LGTM! Consider testing with longer content.The explicit width values (240px mobile, 180px tablet+) provide predictable layout. Ensure longer text content wraps gracefully within these constraints.
src/utils/formatOfferingPlans.ts (1)
8-24: LGTM! Excellent defensive programming for optional comparePlans.The use of optional chaining and conditional spread ensures:
- No runtime errors when
allContentfulComparePlanis absent- Clean return type -
comparePlanskey is only present when data exists- Backward compatibility with existing consumers
This aligns well with the PR's goal to deprecate comparePlans usage across pages.
src/containers/AcceleratorsPage/HealeniumPage/constants.tsx (2)
6-19: Verify the time bucket changes align with pricing updates.The time values have changed:
- Line 9: 56 → 50 hours (-10.7%)
- Line 17: 112 → 120 hours (+7.1%)
Also, the non-breaking space entity was removed from line 6, which simplifies the rendering.
Please confirm these time adjustments align with the updated pricing structure mentioned in the PR objectives.
25-33: LGTM! Terminology standardization improves clarity.The FAQ has been updated to consistently use "professional service hours" instead of the previous "Professional Service Points". This matches the pattern in D4jPage constants (as shown in relevant snippets) and improves terminology consistency across accelerator pages.
src/containers/OnPremisesPage/OnPremisesPage.tsx (2)
9-19: LGTM! Correctly updated to match formatOfferingPlans API changes.The destructuring now only extracts
plans, which aligns with the updatedformatOfferingPlansfunction that conditionally includescomparePlans. The GraphQL query appropriately no longer fetchesallContentfulComparePlan.
22-36: LGTM! Hero description updated and deprecated props removed.The new hero description better articulates the value proposition: "expert assistance or enterprise features for your self-hosted or SaaS ReportPortal". The removal of
comparePlansandutilizationDescriptionprops aligns with the broader refactoring to simplify the pricing presentation.src/containers/CommunityPage/CommunityPage.tsx (1)
46-46: LGTM! LinkedCardBlock API updated to use mode prop.The prop has been changed from
largePadding(boolean) tomode="large"(string), which provides more flexibility for future layout variants. This aligns with the LinkedCardBlock refactoring mentioned in the AI summary.src/containers/AcceleratorsPage/D4jPage/D4jPage.tsx (1)
9-38: LGTM! Consistent comparePlans removal across accelerator pages.This change mirrors the updates in OnPremisesPage and HealeniumPage:
- Destructures only
plansfromformatOfferingPlans- Removes
allContentfulComparePlanfrom GraphQL query- Removes
comparePlansandutilizationDescriptionprops fromOfferPageWrapperThe consistent pattern across all offering pages indicates a well-coordinated refactoring effort.
src/containers/AcceleratorsPage/HealeniumPage/HealeniumPage.tsx (1)
9-38: LGTM! Final page completing the consistent comparePlans removal.HealeniumPage follows the same refactoring pattern as D4jPage, QaspPage, and OnPremisesPage:
- Extracts only
plansfromformatOfferingPlans- Omits
allContentfulComparePlanfrom GraphQL- No longer passes
comparePlansorutilizationDescriptiontoOfferPageWrapperAll offering pages are now consistent with the new pricing presentation approach.
src/containers/CommunityPage/constants.ts (1)
18-18: LGTM! Consistent iconColor additions align with IconWithBackground pattern.All six CSS variables are properly defined in the design system, and the iconColor properties follow the consistent
var(--graphics-{color})pattern across card entries in both GITHUB_CONTRIBUTION_CARDS and DOCUMENTATION_CARDS.src/components/IconWithBackground/IconWithBackground.tsx (1)
13-27: LGTM!The component implementation is clean and uses CSS custom properties appropriately. The icon prop appears to be sourced from internal SVG imports based on the usage context (e.g.,
starSvg,envelopeSvginBENEFITS_CARDS), so direct string interpolation into theurl()is acceptable.src/containers/OnPremisesPage/constants.tsx (3)
3-31: LGTM! Clear service tier restructuring.The TIME_SCALE_DATA has been reorganized into three distinct tiers (1+, 50+, 150+ hours) with well-defined service categories. The new structure clearly communicates the scope and complexity of services available at each tier.
82-85: Verify overage policy simplification is intentional.The overage policy explanation has been significantly simplified, removing the detailed accumulation logic about payment terms (quarterly vs. annual). Ensure this simplification aligns with the updated business model.
36-44: The terminology update in OnPremisesPage is incomplete—old terminology persists in other files.The change to "support hours" in OnPremisesPage/constants.tsx is correct, but the codebase still contains the old terminology:
- "professional service hours" remains in
src/containers/AcceleratorsPage/HealeniumPage/constants.tsxandsrc/containers/AcceleratorsPage/D4jPage/constants.tsx- "Professional Service Points" persists in multiple TestingAsServicePage files (
Tips/constants.ts,Tips/Tips.tsx,ServiceHours/ServiceHours.tsx,BenefitsOfTaas/BenefitsOfTaas.tsx)For true terminology consistency, update these remaining references to align with the new terminology.
Likely an incorrect or invalid review comment.
src/components/LinkedCardBlock/LinkedCardBlock.tsx (1)
10-17: LGTM! Well-designed generic component.The conversion to a generic component is well-executed. The type constraint
T extends LinkedCardPropsensures type safety while allowing flexibility for different card types (e.g.,BenefitItem). The optionalCardComponentprop with a sensible default maintains backward compatibility.src/components/OfferPageWrapper/OfferPageWrapper.tsx (5)
19-19: LGTM! New imports support the enhanced pricing page features.The added imports (
LinkedCardBlock,BenefitItem,LinkArrow,BENEFITS_CARDS) support the new benefits section and Terms & Conditions link, aligning with the PR's objective to update pricing plans UI.Also applies to: 23-23, 26-26
104-106: LGTM! Terminology and content updates are consistent.The updates consistently use "support hours" terminology throughout, replacing previous references to "professional service hours" or "Professional Service Points". The emphasis on "full year" aligns with the annual subscription model, and the Learn more link provides intuitive navigation to the utilization details.
Also applies to: 115-128, 150-150
132-138: LGTM! Benefits section properly implemented.The
LinkedCardBlockis correctly used withBenefitItemas theCardComponentto render the benefits cards. The conditional rendering ensures this section appears only on pricing pages, providing clear value proposition to potential customers.
152-158: LGTM! Terms & Conditions link well-placed.The Terms & Conditions link is appropriately positioned after the utilization details and conditionally rendered for pricing pages. The visual indicator (
LinkArrow) helps users recognize this as an important legal document link.
90-98: No issues detected. ThePricingHerocomponent correctly definesofferTypeas an optional prop and safely handles cases where it's undefined through conditional rendering.
ViktorSoroka07
force-pushed
the
feature/pricing-plans-update
branch
5 times, most recently
from
9260946 to
7cb9e9b
Compare
AmsterGet
force-pushed
the
feature/pricing-plans-update
branch
from
7cb9e9b to
e8fd017
Compare
2 participants
PR Checklist
developfor features/bugfixes,masterfor release/hotfix)?npm run format)?npm run serve)?Notes
Contentful env for deployments - dev.
Visuals
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.