Merge pull request #861 from devtron-labs/feat/freemium-messaging

feat: update freemium messaging and error messaging

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.19.3",
+    "version": "1.19.4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -82,6 +82,7 @@ const GenericModal = ({
     name,
     open,
     width = 600,
+    borderRadius = 8,
     onClose,
     onEscape = noop,
     closeOnBackdropClick = false,
@@ -92,7 +93,7 @@ const GenericModal = ({
             <GenericModalProvider value={{ name, onClose }}>
                 <Backdrop onEscape={onEscape} onClick={closeOnBackdropClick ? onClose : noop}>
                     <motion.div
-                        className={`shadow__modal flexbox-col bg__primary border__secondary br-8 dc__m-auto mt-40 dc__overflow-hidden ${MODAL_WIDTH_TO_CLASS_NAME_MAP[width]}`}
+                        className={`shadow__modal flexbox-col bg__primary border__secondary br-${borderRadius} dc__m-auto mt-40 dc__overflow-hidden ${MODAL_WIDTH_TO_CLASS_NAME_MAP[width]}`}
                         exit={{ y: 100, opacity: 0, scale: 0.75, transition: { duration: 0.35 } }}
                         initial={{ y: 100, opacity: 0, scale: 0.75 }}
                         animate={{ y: 0, opacity: 1, scale: 1 }}

src/Shared/Components/GenericModal/GenericModal.component.tsx

@@ -29,6 +29,7 @@ export interface GenericModalProps extends Partial<Pick<BackdropProps, 'onEscape
      * @default 600
      */
     width?: 450 | 500 | 600 | 800
+    borderRadius?: 8 | 12 | 16
     /**
      * Determines if the modal should close when the user clicks outside of it (on the backdrop).
      * @default false

src/Shared/Components/GenericModal/types.ts

@@ -56,25 +56,24 @@ const LicenseCardSubText = ({
         return (
             <div className="p-16 fs-13 lh-1-5 flexbox-col dc__gap-8">
                 <div className="flexbox dc__gap-8 dc__content-space fs-13 fw-4 lh-20 cn-9">
-                    {freemiumLimitReached ? (
-                        <div className="flexbox-col dc__gap-4">
-                            <span className="fw-6">Multiple Clusters Detected</span>
-                            <span>
-                                Your account is connected to multiple clusters, which isn’t allowed on the freemium
-                                plan. Upgrade to an Enterprise license or contact us.
-                            </span>
-                        </div>
-                    ) : (
-                        <span className="fw-6">Unlimited single cluster usage</span>
-                    )}
+                    <div className="flexbox-col dc__gap-4">
+                        <span className="fw-6">
+                            {freemiumLimitReached ? 'Freemium Limit Reached' : 'What’s Included in Freemium'}
+                        </span>
+                        <span>
+                            {freemiumLimitReached
+                                ? 'You’ve connected more than 2 clusters, which isn’t supported on the freemium plan. Contact Support to unlock your access or upgrade to Enterprise plan.'
+                                : 'Freemium plan allows managing the Devtron host cluster along with one additional cluster.'}
+                        </span>
+                    </div>
                     <Icon
                         name={freemiumLimitReached ? 'ic-error' : 'ic-success'}
                         color={freemiumLimitReached ? 'R500' : 'G500'}
                         size={20}
                     />
                 </div>
                 {freemiumLimitReached && (
-                    <>
+                    <div className="flexbox-col dc__gap-4">
                         <div className="mail-support">
                             <Button
                                 dataTestId="mail-support"
@@ -86,7 +85,7 @@ const LicenseCardSubText = ({
                             />
                         </div>
                         <ContactSupportButton />
-                    </>
+                    </div>
                 )}
             </div>
         )