## React TypeScript

First, run `npm i @paycargo/js-react` in your Command Line Interface. Afterwards, the following dependency will be found in the `package.json`. The ellipses (...) represent the presence of other possible code.

```
. . .
{
   "dependencies": {
      . . .
      "@paycargo/js-react": "^0.0.2"
      . . .
}
. . .
```

Next, import React into the file, set up the `useState`, and define `handleOnClick`. We have included some dummy transaction information to fully illustrate what this implementation would look like.

```
import React, { useState, ChangeEvent} from "react";
import "./styles.css";

export default function App() {
  const [selectedTransactions, setSelectedTransactions] = useState<any[]>([]);
  const transactions = [
    {
      number: "2123190692",
      departureDate: "2023-11-17T00:00:00.000Z",
      arrivalDate: "2023-11-29T00:00:00.000Z",
      paymentDueDate: "2023-11-22T00:00:00.000Z",
      hasArrived: "N",
      total: 45.38,
      direction: "Inbound",
      customerRefNumber: "29338586",
      parent: "HLCUDUB231004840",
      notes: "4716747",
      type: "Invoice",
      index: 0,
      vendorId: 281573,
    },
    {
      number: "2123190470",
      departureDate: "2023-10-10T00:00:00.000Z",
      arrivalDate: "2023-11-26T00:00:00.000Z",
      paymentDueDate: "2023-11-22T00:00:00.000Z",
      total: 6395.04,
      direction: "Inbound",
      customerRefNumber: "23686246",
      parent: "HLCUBKK231007945",
      batchId: 344788,
      notes: "4716734",
      type: "Invoice",
      index: 1,
      vendorId: 281573,
    },
    {
      number: "2123190469",
      departureDate: "2023-10-10T00:00:00.000Z",
      arrivalDate: "2023-11-26T00:00:00.000Z",
      paymentDueDate: "2023-11-22T00:00:00.000Z",
      hasArrived: "N",
      total: 6595.04,
      customerRefNumber: "23686246",
      parent: "HLCUBKK231007945",
      notes: "4716733",
      type: "Invoice",
      index: 2,
      vendorId: 281573,
    },
  ];

  function handleOnClick(event: ChangeEvent<HTMLInputElement>) {
    const { target } = event;
    const { value, checked } = target;
    if (checked) {
      setSelectedTransactions((state) => [
        ...state,
        transactions[Number(value)],
      ]);
    } else {
      setSelectedTransactions((state) => {
        const newState = state.filter((trans) => trans.index !== Number(value));
        return newState;
      });
    }
  }
```

Now, the PayCargo Checkout button must be loaded by importing and defining `defineCustomElements` as well as importing the PayCargo Checkout component itself and passing Options into it.

```
import React, { useState, ChangeEvent, useEffect, useRef } from "react";
import { defineCustomElements, PaycargoCheckout } from "@paycargo/js-react";
import "./styles.css";

defineCustomElements();

// OPTIONS that will be passed as a prop to the PaycargoCheckout Component
const options = {
  env: "dev", // PROD , TEST, DEV
  code: "odex", // Provied by PayCargo
  brand: "odex", // Provied By PayCargo
  originURL: "https://d566dp.csb.app", // URL to whitelist
};

. . .

      <div style={{ border: "1px solid black", marginBottom: "10px" }} />
      <div id="paycargo-button-container" className="text-center">
        <PaycargoCheckout
          options={options}
          pcTransactions={selectedTransactions}
        />
      </div>
```

***

###  Event Listeners

We want to listen to two types of events: (1) when the transaction is being closed to see if any action was taken, and (2) when a payment has been attempted or successfully approved. To do this, we need to implement `useEffect` and add event listeners to the PayCargo Checkout component.

```
import React, { useState, ChangeEvent, useEffect, useRef } from "react";

. . .

export default function App() {
  . . . 
  const paycargoRef = useRef<HTMLPaycargoCheckoutElement | null>(null);
  . . .

. . .

  useEffect(() => {
    const listener = (event: any) => {
      console.log("PaycargoCheckout Event", event.detail);
    };

    paycargoRef?.current?.addEventListener("close", listener);
    paycargoRef?.current?.addEventListener("paymentResponse", listener);

    return () => {
      paycargoRef?.current?.removeEventListener("close", listener);
      paycargoRef?.current?.removeEventListener("paymentResponse", listener);
    };
  }, [paycargoRef]);

  return ( . . .

        <PaycargoCheckout
          ref={paycargoRef}
          options={options}
          pcTransactions={selectedTransactions}
        />
. . .
```
***
### How to Pass Data to the PayCargo Checkout Component
### _Properties_


| Property Name |         Values           |           Type             |      Required      |                    Description                           |
|---------------|--------------------------|----------------------------|--------------------|----------------------------------------------------------|
| options       |                          | `object`                   | :heavy_check_mark: | Passing necessary options into the component             |
|               |  env                     | `string`                   | :heavy_check_mark: | Options: `local`, `dev`, `test`, `prod`                  |
|               |  code                    | `string`                   | :heavy_check_mark: | PayCargo `integration` code                              |
|               |  originURL               | `string`                   | :heavy_check_mark: | Host URL where component is loaded                       |
|               |  brand                   | `string`                   |                    |                                                          |
|               |  size                    | `string`                   |                    | Options: `full`, `lg`, `md` where the default size is `md`                                                        |
| visible       |  true / false            | `boolean`                  | :heavy_check_mark: | To make PayCargo Checkout component visible or hidden    |
| pcTransactions|                          | `object[]`                   | :heavy_check_mark: | PayCargo transaction object                              |
|               |  type                    | `string`                   | :heavy_check_mark: | Transaction type (example: `Invoice`, `Terminal Fee`, etc)|
|               |  vendorId                | `number` / `null`          | :heavy_check_mark: |                                                          |
|               |  number                  | `string`                   | :heavy_check_mark: |                                                          |
|               |  direction               | `'Inbound'` / `'Outbound'` | :heavy_check_mark: |                                                          |
|               |  total                   | `number`                   | :heavy_check_mark: | Amount of total transaction. If transaction lines are present, then the total should equal the sum of all transaction line amounts|
|               |  arrivalDate             | `string` / `date`          |                    |                                                          |
|               |  hasArrived              | `'Y'` / `'N'`              | :heavy_check_mark: |                                                          |
|               |  bolLink                 | `string`                   |		     |                                                          |
|               |  parent                  | `string`                   |	     	     |                                                          |
|               |  shipperRefNumber        | `string`                   |                    |                                                          |
|               |  customerRefNumber       | `string`                   |                    |                                                          |
|               |  subcategory             | `string`                   |                    |                                                          |
|               |  paymentDueDate          | `date`                     |                    |                                                          |
|               |  notes                   | `string` / `null`          |                    |                                                          |
|               |  transactionLines        | `array`                    |                    |                                                          |


***


### _Transaction Lines_
| Property Name |         Values           |           Type             |      Required      |                    Description                           |
|---------------|--------------------------|----------------------------|--------------------|----------------------------------------------------------|
| transactionLines|                        | `object`                   |                    | Passing necessary options into the component. Note: these property names are case sensitive           |
|               |  AMOUNT                  | `number`                   | :heavy_check_mark: | Amount for transaction line                              |
|               |  DESCRIPTION             | `string`                   | :heavy_check_mark: |                                                          |
|               |  START_DATE              | `string` / `date`          |                    |                                                          |
|               |  END_DATE                | `string` / `date`          |                    |                                                          |
|               |  QUANTITY                | `number`                   |                    |                                                          |
|               |  UNIT_PRICE              | `number`                   |                    |                                                          |
|               |  containerNumber         | `string`                   |                    | OSRA: container number                                   |   
|               |  availabilityDate        | `string` / `date`          |                    | OSRA: first available date                               |
|               |  pod                     | `string`                   |                    | OSRA: port of discharge                                  |
|               |  sfd                     | `string`                   |                    | OSRA: start free day                                     |
|               |  lfd                     | `string`                   |                    | OSRA: last free day                                      |
|               |  freeTimeDays            | `string`                   |                    | OSRA: free time days                                     |
|               |  ddr                     | `string`                   |                    | OSRA: demurrage detention rule                           |
|               |  feeContact              | `string`                   |                    | OSRA: mitigation contact                                 |
|               |  complianceStatement     | `string`                   |                    | OSRA: compliance statement                               |
|               |  commonCarrierStatement  | `string`                   |                    | OSRA: common carrier statement                           |

***