[FEATURE]: Popup BTA acquisition Competitions and Presale

[jonsnowpt]

Does a duplicate issue exist?

• [X] I have searched the existing issues

🤔 Is feature request related to a problem? Please describe the problem.

No response

📝 Feature Request Description

Task Overview: We need to implement a popup that provides users with two options when they click the "Buy BTA" button. This popup should appear on desktop, tablet, and mobile versions of the platform and offer the following options:

1. Buy tokens to participate in Betarena competitions.
2. Buy tokens to invest in the Betarena presale.

The relevant information for these options should be fetched from the betarena_prod.userguide.data table in Hasura.

Technical Requirements:

• Integrate with the existing Hasura setup in the frontend to fetch data.
• Ensure that the popup contains translations for multiple languages as provided in the betarena_prod.userguide.data table.
• The popup should be triggered by the "Buy BTA" button across the platform.
• Ensure pixel-perfect design consistency across all device types (desktop, tablet, mobile).

Steps to Implement:

1. Fetch Data from Hasura:

   • Use Hasura to query the betarena_prod.userguide.data table to retrieve the necessary information for the popup content, including translations and links.

2. Create Popup Component:

   • Develop a reusable popup component that can be triggered by the "Buy BTA" button.
   • Ensure the component supports multiple languages and dynamically displays the appropriate content based on the user’s language settings.

3. Popup Content Structure:

   • Option 1: Buy tokens to participate in Betarena competitions.
     • Info text: info_competitions
     • Link: link_competitions
   • Option 2: Buy tokens to invest in the Betarena presale.
     • Info text: info_presale
     • Link: link_presale

4. Trigger Popup:

   • Ensure the popup is triggered when the "Buy BTA" button is clicked.
   • The popup should be available and functional across all instances of the "Buy BTA" button on the platform.

5. Design and Responsive Implementation:

   • Ensure the popup design matches the pixel-perfect design specifications.
   • Implement responsive design to ensure the popup looks good on desktop, tablet, and mobile devices.

6. Testing:

   • Test the popup across all device types to ensure it works as expected.
   • Verify that the popup displays the correct translations and links for all supported languages.

Example Hasura Query:

query GetPopupContent {
  betarena_prod_userguide_data {
    lang {
      br {
        presale
        competitions
        info_presale
        link_presale
        info_competitions
        link_competitions
      }
      en {
        presale
        competitions
        info_presale
        link_presale
        info_competitions
        link_competitions
      }
      es {
        presale
        competitions
        info_presale
        link_presale
        info_competitions
        link_competitions
      }
      # Include other languages as needed
    }
  }
}

Frontend Implementation Example:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const BuyBTAPopup = ({ language }) => {
  const [content, setContent] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.post('/hasura-endpoint', {
        query: `query {
          betarena_prod_userguide_data {
            lang {
              ${language} {
                presale
                competitions
                info_presale
                link_presale
                info_competitions
                link_competitions
              }
            }
          }
        }`
      });
      setContent(result.data.data.betarena_prod_userguide_data.lang[language]);
    };

    fetchData();
  }, [language]);

  if (!content) {
    return null;
  }

  return (
    <div className="buy-bta-popup">
      <div className="option">
        <h3>{content.competitions}</h3>
        <p>{content.info_competitions}</p>
        <a href={content.link_competitions} target="_blank" rel="noopener noreferrer">Buy Now</a>
      </div>
      <div className="option">
        <h3>{content.presale}</h3>
        <p>{content.info_presale}</p>
        <a href={content.link_presale} target="_blank" rel="noopener noreferrer">Invest Now</a>
      </div>
    </div>
  );
};

export default BuyBTAPopup;

Acceptance Criteria:

• [x] Popup is triggered on all "Buy BTA" CTA clicks.
• [x] Popup design is pixel-perfect and consistent across all devices.
• [x] Popup content is accurately displayed in multiple languages.
• [x] Popup is available on all variations and themes.

FIGMA design:

https://www.figma.com/design/thLKCrDNpVADLdkau4WxCy/BTA-Design-Scores-Mobile?m=dev&node-id=124-196812

[jonsnowpt]

• [ ] 1. Mobile CSS issues, the Button is out of the design and the options are not correctly respecting the Figma design;
• [x] 2. Same issue on the options position on the tablet;

1.

[Izobov]

@jonsnowpt it's something strange. I don't have issues with css in local but it appears in deploy

And I already know why this happens. In our code we have :global(svg) {width: 100%} It makes all SVG images in our application 100% wide. We need to take a closer look at this issue and refactor

[jonsnowpt]

@Izobov

The Button position still has issues:

[jonsnowpt]

@Izobov

Here the options should feel the width: