# Cross-Selling Component

{% tabs %}
{% tab title="Overview" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2F7VrmAAUsFb2KKvAE1kSd%2Fcross_selling.png?alt=media&#x26;token=c307d553-ed68-4909-940d-570750f04413" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FhjyRHnZ5z3hT7KqWu1mu%2FExpansion%20Components%20-%20Cross-selling%20%20temp1.png?alt=media&#x26;token=544d4d23-f088-4a14-b9e9-4effb789bc09" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FuW6yM3KiTItDrY8svmya%2FExpansion%20Components%20-%20Cross-selling%20%20%20temp2.png?alt=media&#x26;token=25243fa5-e32c-4741-8cfa-ebc447dc8151" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

## Installation

To install the `Quest react-sdk` into your project, follow these steps:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```jsx
npm install @questlabs/react-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

***

## Usage

To integrate the `Cross-Selling` component into your React application, follow these steps

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `Tutorial`, import the CSS styles for the component. This ensures that the component's styling is applied correctly.

```jsx
import '@questlabs/react-sdk/dist/style.css'
```

* **Import the TutorialComponent**: Import the `CrossSelling` component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

```jsx
import { QuestProvider, CrossSelling } from '@questlabs/react-sdk';
```

* **Pass the Required Props**:  Pass the required props to the `QuestProvider`. The required props are `apiKey`,  and `entityId`. and required props for the `CrossSelling` component are `userId, questId, token`

{% hint style="info" %}
Replace `"your-api-key"` and `"your-entity-id"` with your actual Quest API credentials&#x20;
{% endhint %}

{% hint style="info" %}
Replace `"your-token"`, `"your-user-id", "your-questId"` with your actual configuration details.
{% endhint %}

## Code & Steps

{% tabs %}
{% tab title="QuestProvider" %}

```jsx
import { QuestProvider, CrossSelling } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
      <CrossSelling> </CrossSelling>
      </QuestProvider>
  );
}

export default App;
```

{% endtab %}

{% tab title="CrossSelling" %}

```jsx
  <CrossSelling
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
    // children
</CrossSelling>
```

{% endtab %}

{% tab title="Header" %}

```jsx
<CrossSelling.Header />
```

{% endtab %}

{% tab title="MainContent" %}

```
<CrossSelling.MainContent >
    <CrossSelling.Icon 
        type=""
    />
    <CrossSelling.Timer />
    <CrossSelling.EmailInput />
    <CrossSelling.ActionButtons />
</CrossSelling.MainContent>
```

{% endtab %}

{% tab title="Preview" %}

<pre class="language-jsx"><code class="lang-jsx">&#x3C;QuestProvider
    apiKey="your-apikey"
    entityId="your-entity-Id" 
    apiType= "PRODUCTION" // STAGING 
>
<strong>  &#x3C;CrossSelling
</strong>      userId=""
      questId=""
      token=""
      uniqueUserId="your-unique-user-id"
   >
     &#x3C;CrossSelling.Header  />
     &#x3C;CrossSelling.Content />
     &#x3C;CrossSelling.MainContent >
       &#x3C;CrossSelling.Icon />
       &#x3C;CrossSelling.Timer />
       &#x3C;CrossSelling.EmailInput />
       &#x3C;CrossSelling.ActionButtons />
     &#x3C;/CrossSelling.MainContent>
   &#x3C;/CrossSelling>
&#x3C;/QuestProvider>
</code></pre>

{% endtab %}
{% endtabs %}

***

## **Example Usage**

Here's an example of how to use the `Tutorial`component within your React application

{% tabs %}
{% tab title="CrossSelling" %}

```jsx
import { QuestProvider, CrossSelling } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
    <div>
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
        <CrossSelling
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
           <CrossSelling.Header  />
           <CrossSelling.Content />
           <CrossSelling.MainContent >
             <CrossSelling.Icon />
             <CrossSelling.Timer />
             <CrossSelling.EmailInput />
             <CrossSelling.ActionButtons />
           </CrossSelling.MainContent>
         </CrossSelling>
      </QuestProvider>   
      </div>
  );
}

export default App;
```

{% endtab %}

{% tab title="CrossSellingPreview" %}

```jsx
import { QuestProvider, CrossSellingWrapper } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
    <div>
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id"
        apiType= "PRODUCTION" // STAGING 
      >
       <CrossSellingWrapper
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
          styleConfig={{
              Timer: {
                  TimerCard: {},
                  backgroundColor: "",
                  primaryColor: "",
                  secondaryColor: ""
              },
              BackgroundWrapper: {},
              Description: {},
              EmailError: {
                  errorStyle: {},
                  text: ""
              },
              Footer: {
                  FooterIcon: {},
                  FooterStyle: {},
                  FooterTextStyle: {},
                  FooterText: ""
              },
              Form: {},
              gradientDescription: {},
              gradientHeading: {},
              Heading: {},
              Icon: {},
              Input: {},
              Label: {},
              PrimaryButton: {},
              SecondaryButton: {},
          }}
          showFooter={false}
        />
      </QuestProvider>
    </div>
  );
}

export default App;
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
The above example uses all the props.
{% endhint %}

## Props of Cross-Selling Component

The **`Cross-Selling`**  component accepts the following props

<table><thead><tr><th width="208">Prop Name</th><th width="95">Type</th><th width="128">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong>heading</strong></td><td>string</td><td>optional</td><td>The title or heading of the Cross-Selling</td></tr><tr><td><strong>headingColor</strong></td><td>string</td><td>optional</td><td>for heading color</td></tr><tr><td><strong>color</strong></td><td>string</td><td>optional</td><td>for text or descirption color</td></tr><tr><td><strong>userId</strong></td><td>string</td><td>required </td><td>The unique identifier of the user.</td></tr><tr><td><strong>description</strong></td><td>string</td><td>optional</td><td>A brief description  for the Cross-Selling</td></tr><tr><td><strong>iconColor</strong></td><td>string</td><td>optional</td><td>set icon color</td></tr><tr><td><strong>primaryHeading</strong></td><td>string</td><td>optional</td><td>main heading that's show on top of the component</td></tr><tr><td><strong>token</strong></td><td>string</td><td>required</td><td>An authentication token or API key necessary for accessing Cross-Selling or quest data.</td></tr><tr><td><strong>questId</strong></td><td>string</td><td>required</td><td>The unique identifier for the Cross-Selling or quest.</td></tr><tr><td><strong>shareButtonText</strong></td><td>string</td><td>optional</td><td>The text of the Avail Now.</td></tr><tr><td><strong>gradientBackground</strong></td><td>boolean</td><td>optional</td><td>This gives gradient background to the component.</td></tr><tr><td><strong>primaryDescription</strong></td><td>boolean</td><td>optional</td><td>The description when gradientBackround is true.</td></tr><tr><td><strong>primartHeading</strong></td><td>string</td><td>optonal</td><td>The text or heading when gradientBackround is true.</td></tr><tr><td><strong>showDays</strong></td><td>boolean</td><td>optional</td><td>To show the days in Timer .</td></tr><tr><td><strong>expiryDate</strong></td><td>number</td><td>optional</td><td>To set expiry Date to Cross-Selling component.</td></tr><tr><td><strong>claimRewardHandler</strong></td><td>function</td><td>optional</td><td>Function triggered on claiming the reward.</td></tr><tr><td><strong>backButtonTrigger</strong></td><td>function</td><td>optional</td><td>Function triggered on clicking the back button.</td></tr><tr><td><strong>uniqueEmailId</strong></td><td>string</td><td>optional</td><td>Unique email ID.</td></tr><tr><td><strong>uniqueUserId</strong></td><td>string</td><td>optional</td><td>Unique user ID.</td></tr><tr><td><strong>showFooter</strong></td><td>boolean</td><td>optional</td><td>true: show quest footer<br>fasle: hide footer</td></tr><tr><td><strong>variation</strong></td><td>string</td><td>optional</td><td>for creating different-2 variation</td></tr><tr><td>styleConfig</td><td>object</td><td>optional</td><td>An object containing CSS properties for styling various components within the cross selling process, including form, headings, descriptions, buttons,timer and footer.</td></tr></tbody></table>

```jsx
styleConfig = {{
    Timer: {
        TimerCard: { },
        backgroundColor: "",
            primaryColor: "",
                secondaryColor: ""
    },
    BackgroundWrapper: { },
    Description: { },
    EmailError: {
        errorStyle: { },
        text: ""
    },
    Footer: {
        FooterIcon: { },
        FooterStyle: { },
        FooterTextStyle: { },
        FooterText: ""
    },
    Form: { },
    gradientDescription: { },
    gradientHeading: { },
    Heading: { },
    Icon: { },
    Input: { },
    Label: { },
    PrimaryButton: { },
    SecondaryButton: { },
}}
```

## Features

* **Responsive Interface:** LIT offers a user-friendly and adaptive interface, ensuring a seamless and enjoyable user experience across various devices.
* **Real-time Collaboration:** Enable effective teamwork with LIT's real-time collaboration features, allowing users to work together on projects and documents simultaneously.

You can customize the UI with type of styleConfig would be