feat: coming soon section

components/pricing/index.tsx

@@ -0,0 +1,105 @@
+import React, { FunctionComponent, useMemo } from 'react';
+import Image from 'next/image';
+
+import CheckIcon from '../../assets/check.png';
+import Typography from '../typography';
+import Button from '../button';
+
+import { Container, Features, PriceImage } from './pricing.styled';
+
+import { Plan } from '@/types/plan';
+import { BISCAY, SALTBOX_BLUE } from '@/constants/colors';
+
+export interface PricingProps {
+  isActive?: boolean;
+  onClick: () => void;
+  plan: Plan;
+  hideButton?: boolean;
+}
+
+const Pricing: FunctionComponent<PricingProps> = ({ hideButton, isActive, onClick, plan }) => {
+  const { name, description, images, metadata, features } = plan;
+
+  const buttonName = metadata && metadata['button'];
+  const featuresTitle = metadata && metadata['featuresTitle'];
+  const comingSoonTitle = metadata && metadata['comingSoonTitle'];
+  const priceLabel = metadata && metadata['priceLabel'];
+
+  const comingSoonFeatures = useMemo(
+    () => features.filter(({ name }) => name.includes('SOON')),
+    [features],
+  );
+
+  const availableFeatures = useMemo(
+    () => features.filter(({ name }) => !name.includes('SOON')),
+    [features],
+  );
+
+  return (
+    <Container isActive={isActive}>
+      <PriceImage src={images[0]} alt="product" width={32} height={32} />
+      <Typography variant="h6" color={BISCAY} sx={{ mt: 2, mb: 2 }}>
+        {name}
+      </Typography>
+      <Typography variant="body2" color={SALTBOX_BLUE} sx={{ mb: 2, height: '38px' }}>
+        {description}
+      </Typography>
+      <Typography variant="subtitle1" color={BISCAY} sx={{ mb: 3 }}>
+        {priceLabel}
+      </Typography>
+      {!hideButton && (
+        <Button
+          color="primary"
+          variant="contained"
+          sx={{ mb: 3, width: '100%' }}
+          fullWidth
+          disabled={isActive}
+          onClick={onClick}
+        >
+          {isActive ? 'Current plan' : buttonName}
+        </Button>
+      )}
+      {featuresTitle && (
+        <Typography variant="body2" color={SALTBOX_BLUE} sx={{ mb: 3 }}>
+          {featuresTitle}
+        </Typography>
+      )}
+      <Features>
+        {availableFeatures.map((feature) => {
+          return (
+            <Typography
+              key={feature.name}
+              variant="subtitle3"
+              color={BISCAY}
+              sx={{ mb: 1, display: 'flex', alignItems: 'center', gap: '12px' }}
+            >
+              <Image alt="check-icon" src={CheckIcon} />
+              {feature.name.includes(':') ? feature.name.split(':')[1] : feature.name}
+            </Typography>
+          );
+        })}
+        {comingSoonTitle && comingSoonFeatures.length && (
+          <Typography variant="body2" color={SALTBOX_BLUE} sx={{ mb: 1 }}>
+            {comingSoonTitle}
+          </Typography>
+        )}
+        {comingSoonFeatures &&
+          comingSoonFeatures.map((feature) => {
+            return (
+              <Typography
+                key={feature.name}
+                variant="subtitle3"
+                color={BISCAY}
+                sx={{ mb: 1, display: 'flex', alignItems: 'center', gap: '12px' }}
+              >
+                <Image alt="check-icon" src={CheckIcon} />
+                {feature.name.includes(':') ? feature.name.split(':')[1] : feature.name}
+              </Typography>
+            );
+          })}
+      </Features>
+    </Container>
+  );
+};
+
+export default Pricing;

containers/plans/plans.styled.ts → components/pricing/pricing.styled.ts

@@ -1,14 +1,13 @@
 import styled from 'styled-components';
 
-import Column from '@/components/column';
+import Column from '../column';
 
 export const Container = styled.div<{ isActive?: boolean }>`
   border: 1px solid ${({ theme }) => theme.colors.pastelLightBlue};
   border-radius: 12px;
-  height: calc(100% - 48px);
-  max-height: 607px;
+  height: 650px;
   padding: 24px;
-  width: 225px;
+  width: 219px;
 
   ${({ isActive, theme }) =>
     isActive &&
@@ -18,3 +17,7 @@ export const Container = styled.div<{ isActive?: boolean }>`
 `;
 
 export const Features = styled(Column)``;
+
+export const PriceImage = styled.img`
+  object-fit: cover;
+`;

containers/subscription/index.tsx

@@ -4,7 +4,6 @@ import Box from '@mui/material/Box';
 import Tabs from '@mui/material/Tabs';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import Plans from '../plans';
 import License from '../license';
 import CancelSubscription from '../cancelSubscription';
 import Billing from '../billing';
@@ -23,6 +22,7 @@ import { activateLicenseKey, validateLicenseKey } from '@/redux/thunks/subscript
 import useModal from '@/hooks/useModal';
 import { SaasPlans } from '@/types/subscription';
 import { selectHasLicenseKey } from '@/redux/selectors/subscription.selector';
+import Pricing from '@/components/pricing';
 
 interface SubscriptionProps {
   activeTabParam?: string;
@@ -132,7 +132,7 @@ const Subscription: FunctionComponent<SubscriptionProps> = ({ activeTabParam, pl
         <TabPanel value={activeTab} index={SettingsTab.PLANS}>
           <PlansContainer>
             {plans.map((plan, index) => (
-              <Plans
+              <Pricing
                 key={plan.id}
                 plan={plan}
                 hideButton={currentPlanIndex > index}

containers/subscription/subscription.styled.ts

@@ -9,6 +9,6 @@ export const Container = styled(Column)`
 export const PlansContainer = styled.div`
   align-items: center;
   display: flex;
-  gap: 12px;
+  gap: 40px;
   height: 100%;
 `;

redux/slices/settings.slice.ts

@@ -32,13 +32,15 @@ const settingsSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(getClusterTourStatus.rejected, () => {
+        // eslint-disable-next-line no-console
         console.error('unable to retrieve console tour secret');
       })
       .addCase(getClusterTourStatus.fulfilled, (state, { payload }) => {
         const tourStatus = payload === 'true';
         state.takenConsoleTour = tourStatus;
       })
       .addCase(updateClusterTourStatus.rejected, () => {
+        // eslint-disable-next-line no-console
         console.error('unable to update cluster tour status');
       });
   },