diff --git a/AppExamples/CleverDeal.React/src/Components/ContentDistribution/ContentDistribution.js b/AppExamples/CleverDeal.React/src/Components/ContentDistribution/ContentDistribution.js index 93e1c61..0c1e30c 100644 --- a/AppExamples/CleverDeal.React/src/Components/ContentDistribution/ContentDistribution.js +++ b/AppExamples/CleverDeal.React/src/Components/ContentDistribution/ContentDistribution.js @@ -1,8 +1,10 @@ +import React, { useState, useEffect } from 'react'; import { Menu, Search, TrendingDown, TrendingUp } from 'lucide-react'; import { Link, Route, Routes, useLocation } from "react-router-dom"; import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; import MarketFeed from './MarketFeed'; import MarketFlow from './MarketFlow'; +import InvestorRelations from './Investors'; import logo from './img/marketflow-logo.png'; import help_gif from './img/marketflow-help.gif'; @@ -39,6 +41,7 @@ const getNavItems = () => [ { name: 'Market Feed', path: '/content/feed' }, { name: 'News', path: '/content/news' }, { name: 'Brokers', path: '/content/brokers' }, + { name: 'Investor Relations', path: '/content/investor' }, { name: 'Help', path: '/content/help' }, { name: 'Clever Deal', path: '/' }, ]; @@ -50,6 +53,7 @@ export const ContentDistribution = withTailwindCSS(() => } /> } /> } /> + } /> } /> } /> @@ -292,6 +296,49 @@ function Brokers() { ); } +function Investor() { + const location = useLocation(); + const navItems = getNavItems(); + + return ( +
+
+
+ Market Flow Logo + Market Flow + +
+
+
+ + +
+ +
+
+ +

+ Investor Relations +

+ +
+ ); +} + function Help() { const location = useLocation(); const navItems = getNavItems(); diff --git a/AppExamples/CleverDeal.React/src/Components/ContentDistribution/Investors.js b/AppExamples/CleverDeal.React/src/Components/ContentDistribution/Investors.js new file mode 100644 index 0000000..3f5c26c --- /dev/null +++ b/AppExamples/CleverDeal.React/src/Components/ContentDistribution/Investors.js @@ -0,0 +1,233 @@ +import React, { useState } from 'react'; +import logo from './img/marketflow-logo.png'; +import { withTailwindCSS } from '../../Utils/hooks'; + +const InvestorRelations = () => { + const [showForm, setShowForm] = useState(false); + const [formData, setFormData] = useState({ + firstName: '', + lastName: '', + company: '', + phone: '', + countryCode: '' + }); + const [formError, setFormError] = useState(''); + const [submissionStatus, setSubmissionStatus] = useState(null); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleFormChange = (e) => { + const { name, value } = e.target; + setFormData((prevData) => ({ ...prevData, [name]: value })); + }; + + const handleFormSubmit = async () => { + if (!formData.firstName || !formData.phone || !formData.countryCode) { + setFormError('All fields are required except "Company".'); + setSubmissionStatus('error'); + return; + } + + setIsSubmitting(true); + + // Remove leading zero from phone number if present + const formattedPhone = formData.phone.startsWith('0') + ? formData.phone.slice(1) + : formData.phone; + + const payload = { + companyName: formData.company || '', + emailAddress: '', // Not required + externalNetwork: 'WHATSAPP', + firstName: formData.firstName, + lastName: formData.lastName, + onboarderEmailAddress: 'investorrelations@marketflowllc.com', + phoneNumber: `${formData.countryCode}${formattedPhone}`, + advisorSymphonyIds: null, + advisorEmailAddresses: null + }; + + console.log('Payload:', payload); // Log the payload for debugging + + try { + const response = await fetch('https://poc.symphonymarket.solutions/onboard_user', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(payload) + }); + + if (response.ok) { + setFormError(''); + setSubmissionStatus('success'); + } else { + setFormError('Failed to submit the form. Please try again.'); + setSubmissionStatus('error'); + } + } catch (error) { + setFormError('An error occurred. Please check your network and try again.'); + setSubmissionStatus('error'); + } finally { + setIsSubmitting(false); + } + + // Keep the modal open briefly to show the status + setTimeout(() => { + setShowForm(false); + setSubmissionStatus(null); + }, 3000); + }; + + const openForm = () => { + setFormData({ + firstName: '', + lastName: '', + company: '', + phone: '', + countryCode: '' + }); + setFormError(''); + setShowForm(true); + setSubmissionStatus(null); + }; + + return ( +
+
+
+

Key insights and resources for Market Flow investors.

+
+
+ Investor Relations +
+
+
+

Company Overview

+

+ Market Flow is a leading innovator in content distribution technology, leveraging advanced networks to connect users and businesses in real time. Founded in 2020, Market Flow has rapidly expanded its global footprint with partnerships spanning finance, tech, and media sectors. +

+
+
+

Key Financial Highlights

+
    +
  • 2023 Revenue: $150M (30% YoY growth)
    • +
  • Net Income: $25M
    • +
  • Global User Base: 1.2M active users
    • +
  • Partnerships with 200+ leading organizations
    • +
+
+
+

Contact Investor Relations

+ + {showForm && ( +
+
+

Contact via WhatsApp

+
+ {formError &&

{formError}

} + {submissionStatus === 'success' &&

Form submitted successfully!

} +
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+
+
+ {isSubmitting && ( +
+ + Submitting... +
+ )} + {!isSubmitting && ( + + )} + +
+
+
+ )} +
+
+
+ +
+ ); +}; + +export default withTailwindCSS(InvestorRelations); \ No newline at end of file diff --git a/AppExamples/CleverDeal.React/src/Theme/default.json b/AppExamples/CleverDeal.React/src/Theme/default.json index 8892688..127e20d 100644 --- a/AppExamples/CleverDeal.React/src/Theme/default.json +++ b/AppExamples/CleverDeal.React/src/Theme/default.json @@ -9,8 +9,8 @@ "error": "#C51162", "background": "#FFFFFF", "surface": "#F6F6FC", - "onPrimary": "#FFFFFF", - "onSecondary": "#000000", + "onPrimary": "#000000", + "onSecondary": "#FFFFFF", "onBackground": "#000000", "onSurface": "#000000", "onError": "#FFFFFF",