npm package: @lavanyaks/payment-account-subscription
Description: Embeddable payment Account with subscription (Rs 5/month, 100% discount). Account button for top navigation bar.
Latest version: 1.0.1

# payment-Account-subscription

Embeddable payment Account with subscription for any website or app. When installed, your app gets an **Account** button (for the **middle of the top navigation bar**) that opens a payment Account UI with:

- **Monthly subscription:** Rs 5 (fixed)
- **Periods:** Monthly, 3 Months, 6 Months, Yearly, 3 Yearly — **only 6 Months is enabled and selected by default**
- **Total subscription amount** for the selected period
- **100% discount** — **net payment is always Rs 0**

---

## Steps from the beginning

### Step 1: Create or open your app

Use an existing React website/app or create one:

```bash
npx create-react-app my-app
cd my-app
```

Or with Vite:

```bash
npm create vite@latest my-app -- --template react
cd my-app
npm install
```

### Step 2: Install the package

From your app root:

```bash
npm install payment-Account-subscription
```

(If publishing locally first: `npm install /path/to/payment-Account-subscription` or use `npm link`.)

### Step 3: Add the Account button in the middle of the top navigation bar

Your app must have a **top navigation bar** and place the **Account** button **in the middle** of it.

**Example layout:**

- Left: logo or nav links  
- **Middle: Account button** (from this package)  
- Right: other actions (e.g. login, cart)

**React example:**

```jsx
import { AccountButton } from 'payment-Account-subscription';

function App() {
  return (
    <div>
      <header style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '1rem 1.5rem',
        borderBottom: '1px solid #eee',
      }}>
        <nav>{/* Left: logo, links */}</nav>

        {/* Middle: Account button */}
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
          <AccountButton />
        </div>

        <div>{/* Right: other actions */}</div>
      </header>

      <main>{/* Your app content */}</main>
    </div>
  );
}
```

Using the middle with flexbox:

- `flex: 1` on the middle div and `justifyContent: 'center'` keeps the Account button in the **center** of the bar.
- Adjust `justifyContent` or add margins if you need it slightly off-center.

### Step 4: What happens when the package is installed

- The **Account** button is shown in the place you render it (middle of the nav bar in the example above).
- Clicking **Account** opens the **payment Account** modal.
- The modal shows:
  - **Monthly subscription: Rs 5** (fixed)
  - **Select period:** Monthly, 3 Months, 6 Months, Yearly, 3 Yearly  
    - Only **6 Months** is **enabled** and **selected by default**.
  - **Total subscription amount** for the selected period (e.g. 6 × Rs 5 = Rs 30).
  - **Discount: 100%** (discount amount shown).
  - **Net payment: Rs 0** (always 0).

No backend or payment gateway is included; the UI is ready for you to plug in your own API later.

### Step 5: Optional — use the modal only

If you already have your own “Account” button and only want the subscription modal:

```jsx
import { useState } from 'react';
import { PaymentAccountModal } from 'payment-Account-subscription';

function MyNav() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Account</button>
      <PaymentAccountModal isOpen={open} onClose={() => setOpen(false)} />
    </>
  );
}
```

### Step 6: Build and run your app

```bash
npm run build
npm start
```

Click **Account** in the middle of the nav bar; the payment Account modal should open with 6 Months selected, total amount shown, 100% discount, and net payment Rs 0.

---

## API

| Export | Description |
|--------|-------------|
| `AccountButton` | Button + modal. Render once, typically in the **middle of the top navigation bar**. |
| `PaymentAccountModal` | Modal only. Props: `isOpen`, `onClose`. |
| `MONTHLY_PRICE_RS` | `5` |
| `PERIODS` | `{ 1m, 3m, 6m, 1y, 3y }` with `label`, `months`, `enabled`. Only `6m` is `enabled: true`. |
| `DEFAULT_PERIOD` | `'6m'` |
| `DISCOUNT_PERCENT` | `100` |
| `PeriodKey` | `'1m' | '3m' | '6m' | '1y' | '3y'` |

---

## Requirements summary

- **Account button:** In the **middle** of the **top navigation bar**.
- **Monthly price:** Rs 5 (fixed).
- **Periods:** Monthly, 3 months, 6 months, Yearly, 3 Yearly — **only 6 months enabled and default**.
- **Total** for selected period and **100% discount** so **net payment = 0**.

---

## License

MIT