From 4887383dc4a844d6aefec5044690410d0410e4ec Mon Sep 17 00:00:00 2001
From: chamikaJ <chamika@ceydigital.com>
Date: Wed, 23 Jul 2025 13:03:00 +0530
Subject: [PATCH] feat(upgrade-plans): add responsive styles and improve layout
 for upgrade plans component

- Introduced a new CSS file for responsive design in the upgrade plans component, enhancing mobile usability.
- Updated the upgrade plans component to utilize the new styles, ensuring a better layout on various screen sizes.
- Refactored seat count options logic for improved clarity and functionality.
---
 .../drawers/upgrade-plans/upgrade-plans.css   | 44 +++++++++++++++++++
 .../drawers/upgrade-plans/upgrade-plans.tsx   | 41 ++++++++---------
 .../configuration/configuration.tsx           | 34 +++++++-------
 3 files changed, 79 insertions(+), 40 deletions(-)
 create mode 100644 worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.css

diff --git a/worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.css b/worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.css
new file mode 100644
index 00000000..6baef71a
--- /dev/null
+++ b/worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.css
@@ -0,0 +1,44 @@
+.upgrade-plans-responsive {
+  padding: 24px;
+}
+
+.upgrade-plans-row-responsive {
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 900px) {
+  .upgrade-plans-row-responsive .ant-col {
+    flex: 0 0 100%;
+    max-width: 100%;
+    margin-bottom: 16px;
+  }
+  .upgrade-plans-row-responsive .ant-card {
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 600px) {
+  .upgrade-plans-responsive {
+    padding: 8px;
+  }
+  .upgrade-plans-row-responsive .ant-col {
+    padding: 0 !important;
+    margin-bottom: 12px;
+  }
+  .upgrade-plans-row-responsive .ant-card {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+  .upgrade-plans-responsive .ant-typography,
+  .upgrade-plans-responsive .ant-btn,
+  .upgrade-plans-responsive .ant-form-item {
+    width: 100%;
+    text-align: center;
+  }
+  .upgrade-plans-responsive .ant-btn {
+    margin-top: 12px;
+  }
+} 
\ No newline at end of file
diff --git a/worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.tsx b/worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.tsx
index dd1a6b07..48199a16 100644
--- a/worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.tsx
+++ b/worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.tsx
@@ -30,6 +30,7 @@ import { billingApiService } from '@/api/admin-center/billing.api.service';
 import { authApiService } from '@/api/auth/auth.api.service';
 import { setUser } from '@/features/user/userSlice';
 import { setSession } from '@/utils/session-helper';
+import './upgrade-plans.css';
 
 // Extend Window interface to include Paddle
 declare global {
@@ -65,30 +66,23 @@ const UpgradePlans = () => {
   const [paddleError, setPaddleError] = useState<string | null>(null);
 
   const populateSeatCountOptions = (currentSeats: number) => {
-    if (!currentSeats) return [];
+    if (typeof currentSeats !== 'number') return [];
 
     const step = 5;
     const maxSeats = 90;
-    const minValue = Math.max(1, currentSeats + 1); // Start from 1 or currentSeats + 1, whichever is higher
-    const rangeStart = Math.ceil(minValue / step) * step;
-    const range = Array.from(
-      { length: Math.floor((maxSeats - rangeStart) / step) + 1 },
-      (_, i) => rangeStart + i * step
-    );
+    const minValue = currentSeats + 1;
+    const options: { value: number; disabled: boolean }[] = [];
 
-    // Always include 1 as the first option
-    const options = [1];
-    
-    if (currentSeats < step) {
-      // Add individual numbers from minValue to rangeStart
-      for (let i = Math.max(2, minValue); i < rangeStart; i++) {
-        options.push(i);
-      }
+    // Always show 1-5, but disable if less than minValue
+    for (let i = 1; i <= 5; i++) {
+      options.push({ value: i, disabled: i < minValue });
     }
-    
-    // Add the range of step-based numbers
-    options.push(...range);
-    
+
+    // Show all multiples of 5 from 10 to maxSeats
+    for (let i = 10; i <= maxSeats; i += step) {
+      options.push({ value: i, disabled: i < minValue });
+    }
+
     return options;
   };
 
@@ -350,7 +344,7 @@ const UpgradePlans = () => {
   }, []);
 
   return (
-    <div>
+    <div className="upgrade-plans-responsive">
       <Flex justify="center" align="center">
         <Typography.Title level={2}>
           {billingInfo?.status === SUBSCRIPTION_STATUS.TRIALING
@@ -366,8 +360,9 @@ const UpgradePlans = () => {
               style={{ width: 100 }}
               value={selectedSeatCount}
               options={seatCountOptions.map(option => ({
-                value: option,
-                text: option.toString(),
+                value: option.value,
+                label: option.value.toString(),
+                disabled: option.disabled,
               }))}
               onChange={setSelectedSeatCount}
             />
@@ -376,7 +371,7 @@ const UpgradePlans = () => {
       </Flex>
 
       <Flex>
-        <Row className="w-full">
+        <Row className="w-full upgrade-plans-row-responsive">
           {/* Free Plan */}
           <Col span={8} style={{ padding: '0 4px' }}>
             <Card
diff --git a/worklenz-frontend/src/components/admin-center/configuration/configuration.tsx b/worklenz-frontend/src/components/admin-center/configuration/configuration.tsx
index ffb1e806..c01f82f9 100644
--- a/worklenz-frontend/src/components/admin-center/configuration/configuration.tsx
+++ b/worklenz-frontend/src/components/admin-center/configuration/configuration.tsx
@@ -101,8 +101,8 @@ const Configuration: React.FC = React.memo(() => {
     <div>
       <Card title={<span style={titleStyle}>Billing Details</span>} style={cardStyle}>
         <Form form={form} initialValues={configuration} onFinish={handleSave}>
-          <Row>
-            <Col span={8} style={colStyle}>
+          <Row gutter={[0, 0]}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item
                 name="name"
                 label="Name"
@@ -116,7 +116,7 @@ const Configuration: React.FC = React.memo(() => {
                 <Input placeholder="Name" disabled />
               </Form.Item>
             </Col>
-            <Col span={8} style={colStyle}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item
                 name="email"
                 label="Email Address"
@@ -130,7 +130,7 @@ const Configuration: React.FC = React.memo(() => {
                 <Input placeholder="Email Address" disabled />
               </Form.Item>
             </Col>
-            <Col span={8} style={colStyle}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item
                 name="phone"
                 label="Contact Number"
@@ -147,29 +147,29 @@ const Configuration: React.FC = React.memo(() => {
             </Col>
           </Row>
 
-          <Divider orientation="left" style={dividerStyle}>
+          <Divider orientation="left" style={{ ...dividerStyle, fontSize: '14px' }}>
             <span style={dividerTitleStyle}>Company Details</span>
           </Divider>
 
-          <Row>
-            <Col span={8} style={colStyle}>
+          <Row gutter={[0, 0]}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item name="company_name" label="Company Name" layout="vertical">
                 <Input placeholder="Company Name" />
               </Form.Item>
             </Col>
-            <Col span={8} style={colStyle}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item name="address_line_1" label="Address Line 01" layout="vertical">
                 <Input placeholder="Address Line 01" />
               </Form.Item>
             </Col>
-            <Col span={8} style={colStyle}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item name="address_line_2" label="Address Line 02" layout="vertical">
                 <Input placeholder="Address Line 02" />
               </Form.Item>
             </Col>
           </Row>
-          <Row>
-            <Col span={8} style={colStyle}>
+          <Row gutter={[0, 0]}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item name="country" label="Country" layout="vertical">
                 <Select
                   dropdownStyle={{ maxHeight: 256, overflow: 'auto' }}
@@ -182,28 +182,28 @@ const Configuration: React.FC = React.memo(() => {
                 />
               </Form.Item>
             </Col>
-            <Col span={8} style={colStyle}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item name="city" label="City" layout="vertical">
                 <Input placeholder="City" />
               </Form.Item>
             </Col>
-            <Col span={8} style={colStyle}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item name="state" label="State" layout="vertical">
                 <Input placeholder="State" />
               </Form.Item>
             </Col>
           </Row>
-          <Row>
-            <Col span={8} style={colStyle}>
+          <Row gutter={[0, 0]}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item name="postal_code" label="Postal Code" layout="vertical">
                 <Input placeholder="Postal Code" />
               </Form.Item>
             </Col>
           </Row>
           <Row>
-            <Col style={buttonColStyle}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={{ ...buttonColStyle, marginTop: 8 }}>
               <Form.Item>
-                <Button type="primary" htmlType="submit" loading={loading}>
+                <Button type="primary" htmlType="submit" loading={loading} block>
                   Save
                 </Button>
               </Form.Item>