@4alldigital/foundation-ui--core 3.0.0

package/src/components/SubscriptionManager/SubscriptionManager.tsx

@@ -0,0 +1,369 @@
+import { useState } from 'react';
+import cx from 'classnames';
+import { confirmAlert } from 'react-confirm-alert'; // Import
+import { Props } from './SubscriptionManager.types';
+import Heading from '../Heading';
+import Card from '../Card';
+import { CardVariant } from '../Card/Card.types';
+import Copy from '../Copy';
+import { useLanguage } from '../../hooks';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+import Button from '../Button';
+import { BTN_VARIANTS } from '../Button/Button.types';
+import Loader from '../Loader';
+import Icon from '../Icon';
+
+const SubscriptionManager = ({
+  testID,
+  title,
+  children,
+  subscription,
+  plans,
+  paymentMethod,
+  changeSubscriptionCallback,
+  pauseSubscriptionCallback,
+  updatePaymentMethodCallback,
+  selectedPlanCallback,
+  confirmPlanCallback,
+  // contactSupportCallback,
+  isLoading,
+}: Props) => {
+  const T = useLanguage();
+  const [selectedPlan, setSelectedPlan] = useState<string | undefined>(subscription?.id);
+  const [allowChangePlan, setAllowChangePlan] = useState<boolean>(false);
+  const [hidePlans, setHidePlans] = useState<boolean>(false);
+
+  // Get status configuration based on subscription status
+  const getStatusConfig = (status: string) => {
+    const statusLower = status.toLowerCase();
+    switch (statusLower) {
+      case 'active':
+        return {
+          icon: 'mdi:check-circle',
+          bgColor: 'bg-success',
+          textColor: 'text-white',
+          label: status,
+        };
+      case 'trialing':
+        return {
+          icon: 'mdi:star-circle',
+          bgColor: 'bg-info',
+          textColor: 'text-white',
+          label: status,
+        };
+      case 'past_due':
+        return {
+          icon: 'mdi:alert-circle',
+          bgColor: 'bg-warning',
+          textColor: 'text-black',
+          label: 'Past Due',
+        };
+      case 'canceled':
+      case 'cancelled':
+        return {
+          icon: 'mdi:close-circle',
+          bgColor: 'bg-error',
+          textColor: 'text-white',
+          label: 'Cancelled',
+        };
+      case 'incomplete':
+        return {
+          icon: 'mdi:progress-alert',
+          bgColor: 'bg-warning',
+          textColor: 'text-black',
+          label: 'Incomplete',
+        };
+      case 'inactive':
+        return {
+          icon: 'mdi:pause-circle',
+          bgColor: 'bg-gray-400 dark:bg-gray-600',
+          textColor: 'text-white',
+          label: 'Inactive',
+        };
+      default:
+        return {
+          icon: 'mdi:information-circle',
+          bgColor: 'bg-gray-300 dark:bg-gray-700',
+          textColor: 'text-gray-800 dark:text-gray-200',
+          label: status,
+        };
+    }
+  };
+
+  const handleSelectPlan = (planId: string) => {
+    setSelectedPlan(planId);
+    if (selectedPlanCallback && typeof selectedPlanCallback === 'function') {
+      selectedPlanCallback(planId);
+    }
+  };
+
+  const handlePauseConfirmation = () => {
+    setAllowChangePlan(false);
+    confirmAlert({
+      title: T?.UI?.CONFIRM_TO_SUBMIT,
+      message: T?.UI?.CONFIRM_TO_PAUSE,
+      buttons: [
+        {
+          label: T?.UI?.YES,
+          onClick: pauseSubscriptionCallback,
+        },
+        {
+          label: T?.UI?.NO,
+          onClick: () => {},
+        },
+      ],
+    });
+  };
+
+  const handleChangePlanConfirmation = () => {
+    confirmAlert({
+      title: T?.UI?.CONFIRM_TO_SUBMIT,
+      message: T?.UI?.CONFIRM_TO_CHANGE_PLAN,
+      buttons: [
+        {
+          label: T?.UI?.YES,
+          onClick: () => {
+            if (selectedPlan && confirmPlanCallback && typeof confirmPlanCallback === 'function') {
+              confirmPlanCallback(selectedPlan);
+            }
+            setAllowChangePlan(false);
+          },
+        },
+        {
+          label: T?.UI?.NO,
+          onClick: () => setAllowChangePlan(false),
+        },
+      ],
+    });
+  };
+
+  const handleUpdatePaymentMethodConfirmation = () => {
+    setAllowChangePlan(false);
+    confirmAlert({
+      title: T?.UI?.CONFIRM_TO_SUBMIT,
+      message: "Are you sure you want to update your payment method? You'll be asked to enter new card details.",
+      buttons: [
+        {
+          label: T?.UI?.YES,
+          onClick: updatePaymentMethodCallback,
+        },
+        {
+          label: T?.UI?.NO,
+          onClick: () => {},
+        },
+      ],
+    });
+  };
+
+  const handleConfirmPlan = () => {
+    setHidePlans(true);
+    if (selectedPlan && confirmPlanCallback && typeof confirmPlanCallback === 'function') {
+      confirmPlanCallback(selectedPlan);
+    }
+  };
+
+  return (
+    <div data-testid={testID || '"SubscriptionManager"'} className="relative">
+      <div className="flex flex-col gap-4">
+        {title && <Heading>{title}</Heading>}
+        {!subscription && (
+          <div className="rounded-lg shadow-md p-6 md:p-8 lg:p-10 bg-card-bg dark:bg-darkCardBackground max-w-4xl mx-auto w-full text-center">
+            <div className="mb-4">
+              <Heading tag={HEADING_TAGS.H3} className="mb-2">
+                {T.UI.NO_ACTIVE_SUBSCRIPTION}
+              </Heading>
+              <Copy className="text-gray-600 dark:text-gray-400">{T?.UI?.NO_SUBSCRIPTION_DETAILS}</Copy>
+            </div>
+          </div>
+        )}
+        {subscription && (
+          <div className="rounded-lg shadow-md p-6 md:p-8 lg:p-10 bg-card-bg dark:bg-darkCardBackground max-w-4xl mx-auto w-full">
+            {/* Primary Information - Plan and Status */}
+            <div className="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700">
+              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4">
+                <div className="flex-1">
+                  <Copy className="text-sm text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wide">
+                    {T?.UI?.CURRENT_PLAN}
+                  </Copy>
+                  <Heading tag={HEADING_TAGS.H2} className="mb-0">
+                    {subscription.plan}
+                  </Heading>
+                  {subscription.planDescription && (
+                    <Copy className="text-gray-600 dark:text-gray-400 mt-1 mb-0">
+                      {subscription.planDescription}
+                    </Copy>
+                  )}
+                </div>
+                <div className="flex-shrink-0">
+                  {(() => {
+                    const statusConfig = getStatusConfig(subscription.status);
+                    return (
+                      <div
+                        className={cx(
+                          'inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold shadow-sm',
+                          statusConfig.bgColor,
+                          statusConfig.textColor,
+                        )}>
+                        <Icon name={statusConfig.icon} className="w-5 h-5" />
+                        <span>{statusConfig.label}</span>
+                      </div>
+                    );
+                  })()}
+                </div>
+              </div>
+              <div className="text-3xl md:text-4xl font-bold text-primary">{subscription.price}</div>
+            </div>
+
+            {/* Secondary Information - Details */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+              <div className="flex flex-col">
+                <Copy className="text-gray-500 dark:text-gray-400 mb-1">{T?.UI?.NEXT_BILLING_DATE}</Copy>
+                <Copy className="mb-0 font-medium">{subscription.nextBillingDate}</Copy>
+              </div>
+              {subscription.endDate && (
+                <div className="flex flex-col">
+                  <Copy className="text-gray-500 dark:text-gray-400 mb-1">{T?.UI?.END_DATE}</Copy>
+                  <Copy className="mb-0 font-medium text-red-600 dark:text-red-400">{subscription.endDate}</Copy>
+                </div>
+              )}
+            </div>
+
+            {/* Payment Method Information */}
+            {paymentMethod && (
+              <div className="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+                <div className="flex flex-col">
+                  <Copy className="text-sm text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wide">
+                    Payment Method
+                  </Copy>
+                  <div className="flex items-center gap-3">
+                    <Icon name="mdi:credit-card" className="w-6 h-6 text-primary" />
+                    <div className="flex flex-col">
+                      <Copy className="mb-0 font-medium">
+                        {paymentMethod.cardType} {paymentMethod.cardNumber}
+                      </Copy>
+                      <Copy className="text-sm text-gray-500 dark:text-gray-400 mb-0">
+                        Expires {paymentMethod.cardExpiry}
+                      </Copy>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        {subscription && (
+          <div className="flex justify-center gap-4 flex-wrap">
+            {changeSubscriptionCallback && (
+              <Button variant={BTN_VARIANTS.PRIMARY} onClick={() => setAllowChangePlan(!allowChangePlan)}>
+                {allowChangePlan ? T?.UI?.CANCEL : T?.UI?.CHANGE_PLAN}
+              </Button>
+            )}
+            {updatePaymentMethodCallback && (
+              <Button variant={BTN_VARIANTS.SECONDARY} onClick={handleUpdatePaymentMethodConfirmation}>
+                Update Payment Method
+              </Button>
+            )}
+            {!subscription.endDate && (
+              <Button variant={BTN_VARIANTS.SECONDARY} onClick={handlePauseConfirmation}>
+                {T?.UI?.PAUSE_SUBSCRIPTION}
+              </Button>
+            )}
+          </div>
+        )}
+        {allowChangePlan && plans && children && (
+          <div className="flex items-center flex-col gap-4">
+            {!hidePlans && (
+              <div className="flex flex-col md:flex-row gap-4 justify-center flex-wrap">
+                {plans.map(plan => (
+                  <div
+                    key={plan.id}
+                    className={cx(
+                      'flex w-[300px] lg:flex-1',
+                      { 'opacity-50': selectedPlan && selectedPlan !== plan.id },
+                      { hidden: hidePlans && selectedPlan && selectedPlan !== plan.id },
+                    )}>
+                    <Card
+                      variant={CardVariant.ICON}
+                      className={cx(
+                        { 'rounded border-2 border-primary bg-tertiary': selectedPlan === plan.id },
+                        { 'border-2 border-card-bg': selectedPlan !== plan.id },
+                      )}
+                      data={{
+                        id: plan.id,
+                        title: plan.name,
+                        icon: plan.icon,
+                        description: `${plan.description} - ${plan.price}`,
+                        onClick: () => handleSelectPlan(plan.id),
+                      }}
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
+            <div>
+              <Button
+                variant={BTN_VARIANTS.PRIMARY}
+                onClick={handleChangePlanConfirmation}
+                disabled={selectedPlan === subscription?.id}>
+                {T?.UI?.CONFIRM_TO_SUBMIT}
+              </Button>
+            </div>
+          </div>
+        )}
+        {subscription && children && !allowChangePlan && (
+          <div className="flex items-center flex-col gap-4">
+            {children}
+          </div>
+        )}
+        {!subscription && (
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center flex-col gap-4">
+              <div className="flex flex-col md:flex-row gap-4 justify-center">
+                {plans.map(plan => (
+                  <div
+                    key={plan.id}
+                    className={cx(
+                      'flex flex-1 w-[300px]',
+                      { 'opacity-50': selectedPlan && selectedPlan !== plan.id },
+                      { hidden: hidePlans && selectedPlan && selectedPlan !== plan.id },
+                    )}>
+                    <Card
+                      variant={CardVariant.ICON}
+                      className={cx(
+                        { 'rounded border-2 border-primary bg-tertiary': selectedPlan === plan.id },
+                        { 'border-2 border-card-bg': selectedPlan !== plan.id },
+                      )}
+                      data={{
+                        id: plan.id,
+                        title: plan.name,
+                        icon: plan.icon,
+                        description: `${plan.description} - ${plan.price}`,
+                        onClick: () => handleSelectPlan(plan.id),
+                      }}
+                    />
+                  </div>
+                ))}
+              </div>
+              <div>
+                <Button variant={BTN_VARIANTS.PRIMARY} onClick={handleConfirmPlan} disabled={!selectedPlan}>
+                  {T?.UI?.CONFIRM_CHOICE}
+                </Button>
+              </div>
+            </div>
+            <div>{children}</div>
+          </div>
+        )}
+      </div>
+      {isLoading && (
+        <div className="absolute top-0 left-0 w-full h-full bg-body-bg bg-opacity-50 flex items-center justify-center">
+          <Loader />
+        </div>
+      )}
+    </div>
+  );
+};
+
+SubscriptionManager.displayName = 'SubscriptionManager';
+
+export default SubscriptionManager;
+export type { Props };

package/src/components/SubscriptionManager/SubscriptionManager.types.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+
+export interface Props {
+  testID?: string;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+  subscription?: {
+    id: string;
+    status: string;
+    plan: string;
+    planDescription?: string;
+    price: string;
+    nextBillingDate: string;
+    endDate?: string;
+  };
+  plans: {
+    id: string;
+    name: string;
+    price: string;
+    description: string;
+    icon?: string;
+  }[];
+  paymentMethod?: {
+    cardType: string;
+    cardNumber: string;
+    cardExpiry: string;
+  };
+  isLoading?: boolean;
+  changeSubscriptionCallback?: (id: string) => void;
+  pauseSubscriptionCallback?: () => void;
+  updatePaymentMethodCallback?: () => void;
+  // contactSupportCallback?: () => void;
+  selectedPlanCallback?: (planId: string) => void; // simple selected plan callback
+  confirmPlanCallback?: (planId: string) => void; // confirm plan callback
+}

package/src/components/SubscriptionManager/index.ts

@@ -0,0 +1 @@
+export { default } from './SubscriptionManager';

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Switch from '.';
+
+const meta: Meta<typeof Switch> = {
+  title: 'ATOMS/Switch',
+  component: Switch,
+};
+
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {};
+
+Default.args = {
+  id: 'id',
+  name: 'example-switch',
+  required: false,
+  disabled: false,
+};
+
+export default meta;

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import cx from 'classnames';
+import { Props } from './Switch.types';
+
+const Switch = forwardRef(function MyInput(
+  { id, name, required, disabled, className, ...rest }: Props,
+  ref: any,
+) {
+  return (
+    <label data-testid="Switch" className={cx('inline-flex items-center cursor-pointer', className)}>
+      <input
+        ref={ref}
+        id={id}
+        name={name}
+        type="checkbox"
+        value=""
+        className="sr-only peer"
+        disabled={disabled}
+        required={required}
+        {...rest}
+      />
+      <div className="form-item switch peer-focus:ring-info dark:peer-focus:ring-info relative w-11 h-6 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:start-[1px] after:bg-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all transition-all"></div>
+    </label>
+  );
+});
+
+Switch.displayName = 'Switch';
+
+export default Switch;
+export type { Props };

package/src/components/Switch/Switch.types.ts

@@ -0,0 +1,7 @@
+export interface Props {
+  id: string;
+  name: string;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+}

package/src/components/Switch/index.ts

@@ -0,0 +1 @@
+export { default } from './Switch';

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Tabs from '.';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'MOLECULES/Tabs',
+  component: Tabs,
+};
+
+type Story = StoryObj<typeof Tabs>;
+
+const ExampleComponent = (): React.ReactElement => {
+  return <h2>Tab 3 content</h2>;
+};
+
+export const Default: Story = {
+  args: {
+    data: [
+      {
+        title: 'Tab 1',
+        content: <h2>Tab 1 content</h2>,
+      },
+      {
+        title: 'Tab 2',
+        content: <h2>Tab 2 content</h2>,
+      },
+      {
+        title: 'Title 3',
+        content: <ExampleComponent />,
+      },
+    ],
+  },
+};
+
+export default meta;

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import cx from 'classnames';
+import { Tab, Tabs as RTabs, TabList, TabPanel } from 'react-tabs';
+import { Props } from './Tabs.types';
+import Copy from '../Copy';
+
+const Tabs = ({ data }: Props) => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  if (!data) {
+    return <></>;
+  }
+
+  return (
+    <div data-testid="Tabs">
+      <RTabs onSelect={(index) => setActiveTab(index)}>
+        <TabList className="mb-8 flex p-0">
+          {data.map((tab, index) => {
+            return (
+              <Tab
+                className={cx('list-none rel ative cursor-pointer inline-block flex-1 items-center justify-center p-4', {
+                  'border-transparent border-solid border-0 border-b-2': activeTab !== index,
+                  'border-primary border-solid border-0 border-b-2': activeTab === index,
+                })}
+                key={index}>
+                <Copy className="m-0 text-center">{tab.title}</Copy>
+              </Tab>
+            );
+          })}
+        </TabList>
+        {data.map((tab, index) => (
+          <TabPanel key={index} className="">{tab.content}</TabPanel>
+        ))}
+      </RTabs>
+    </div>
+  );
+};
+
+Tabs.displayName = 'Tabs';
+
+export default Tabs;
+export type { Props };

package/src/components/Tabs/Tabs.types.ts

@@ -0,0 +1,8 @@
+export interface TabItem {
+  title: string;
+  content: React.ReactNode;
+}
+
+export interface Props {
+  data: TabItem[];
+}

package/src/components/Tabs/index.ts

@@ -0,0 +1 @@
+export { default } from './Tabs';

package/src/components/TextInput/TextInput.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { InputType } from './TextInput.types';
+import TextInput from '.';
+
+const meta: Meta<typeof TextInput> = {
+  title: 'ATOMS/TextInput',
+  component: TextInput,
+};
+
+type Story = StoryObj<typeof TextInput>;
+
+export const Default: Story = {
+  args: {
+    type: InputType.TEXT,
+  },
+};
+
+export default meta;

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, useEffect } from 'react';
+import cx from 'classnames';
+import { InputType, Props } from './TextInput.types';
+import Icon from '../Icon';
+
+const TextInput = forwardRef(function MyInput(
+  {
+    type = InputType.TEXT,
+    required = false,
+    className,
+    onChange,
+    placeholder,
+    icon,
+    disabled = false,
+    name,
+    autoComplete,
+    ...rest
+  }: Props,
+  ref: any,
+) {
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      require('date-input-polyfill');
+    }
+  }, []);
+
+  const format = 'dd/mm/yyyy';
+  const placeholderSet = type === 'date' ? format.toUpperCase() : placeholder;
+
+  if (type === InputType.TEXTAREA) {
+    return (
+      <div data-testid="TextInput" className="relative">
+        <textarea
+          ref={ref}
+          id={name}
+          autoComplete={name}
+          required={required}
+          aria-required={required}
+          disabled={disabled}
+          placeholder={placeholderSet}
+          onChange={onChange}
+          rows={4}
+          className={cx('form-item text-area resize-none', className)}
+          {...rest}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="TextInput" className="relative">
+      {icon && (
+        <div className="form-icon absolute inset-y-0 start-3 flex items-center ps-3.5 pointer-events-none">
+          <Icon name={icon} />
+        </div>
+      )}
+      <input
+        ref={ref}
+        id={name}
+        type={type}
+        autoComplete={autoComplete}
+        required={required}
+        aria-required={required}
+        disabled={disabled}
+        placeholder={placeholderSet}
+        onChange={onChange}
+        className={cx('form-item text-input', { 'pl-12': icon }, className)}
+        {...rest}
+      />
+    </div>
+  );
+});
+
+TextInput.displayName = 'TextInput';
+
+export default TextInput;
+export type { Props };