Skip to content

Commit

Permalink
Language switcher
Browse files Browse the repository at this point in the history
  • Loading branch information
vietredweb committed Sep 19, 2024
1 parent f1ea425 commit 40ce52d
Show file tree
Hide file tree
Showing 7 changed files with 398 additions and 97 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"react-content-loader": "^7.0.0",
"react-device-detect": "^2.2.3",
"react-dom": "18",
"react-select": "^5.8.0",
"react-toastify": "^9.1.3",
"wagmi": "^1.3.2"
},
Expand Down
56 changes: 14 additions & 42 deletions src/Components/ConsentCustom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import { useAccount, useSignMessage } from 'wagmi';
import SSOEthereumProvider from './Ethereum';
import { getWeb3ID } from '../utils/Concordium';
import { trackEvent } from '../utils';
import ConsentHeader from './ConsentHeader';
declare global {
interface Window {
dataLayer: any;
Expand All @@ -69,6 +70,7 @@ const ConsentComponentCustom = ({
layout,
isOptInReplaceAnalytics,
customConsentText,
languageSwitcher,
}: any) => {
return (
<>
Expand All @@ -86,6 +88,7 @@ const ConsentComponentCustom = ({
gtmId={gtmId}
layout={layout}
customConsentText={customConsentText}
languageSwitcher={languageSwitcher}
/>
)}
</WithWalletConnector>
Expand Down Expand Up @@ -124,6 +127,7 @@ const ConsentComponentCustomWrapper = (props: any) => {
gtmId={props?.gtmId}
layout={props?.layout}
customConsentText={props?.customConsentText}
languageSwitcher={props?.languageSwitcher}
uuid={uuid}
level={level}
connection={connection}
Expand All @@ -150,6 +154,7 @@ const ConsentComponentCustomApp = (props: any) => {
gtmId,
layout,
customConsentText,
languageSwitcher,
activeConnectorType,
activeConnector,
activeConnectorError,
Expand Down Expand Up @@ -262,8 +267,7 @@ const ConsentComponentCustomApp = (props: any) => {
jwt,
'metamask',
gtagId,
gtmId,
layout
gtmId
);
sessionStorage.setItem('aesirx-analytics-uuid', uuid);
sessionStorage.setItem('aesirx-analytics-allow', '1');
Expand Down Expand Up @@ -363,8 +367,7 @@ const ConsentComponentCustomApp = (props: any) => {
jwt,
'concordium',
gtagId,
gtmId,
layout
gtmId
);
sessionStorage.setItem('aesirx-analytics-consent-type', 'concordium');
setUpgradeLayout(false);
Expand Down Expand Up @@ -402,8 +405,7 @@ const ConsentComponentCustomApp = (props: any) => {
null,
null,
gtagId,
gtmId,
layout
gtmId
);
} else if (
!!existConsent?.consent_uuid &&
Expand All @@ -421,8 +423,7 @@ const ConsentComponentCustomApp = (props: any) => {
null,
null,
gtagId,
gtmId,
layout
gtmId
);
}
});
Expand Down Expand Up @@ -492,8 +493,7 @@ const ConsentComponentCustomApp = (props: any) => {
response?.jwt,
'concordium',
gtagId,
gtmId,
layout
gtmId
);
setShow(false);
handleRevoke(true, level);
Expand Down Expand Up @@ -551,8 +551,7 @@ const ConsentComponentCustomApp = (props: any) => {
response?.jwt,
'concordium',
gtagId,
gtmId,
layout
gtmId
);
setShow(false);
handleRevoke(true, level);
Expand Down Expand Up @@ -853,36 +852,7 @@ const ConsentComponentCustomApp = (props: any) => {

{showExpandRevoke && (
<>
<div
className={`d-flex rounded-top align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap py-2 py-lg-3 px-4 header-consent-bg`}
style={{
borderBottom: '1px solid #DEDEDE',
}}
>
<div className="text-primary text-nowrap">
{(window as any)?.aesirx_analytics_translate?.txt_tracking_data_privacy ??
t('txt_tracking_data_privacy')}
</div>
<div className="d-flex align-items-center fs-14 text-primary">
<a
href="https://shield.aesirx.io/"
rel="noreferrer"
target="_blank"
className="minimize-shield-wrapper position-relative text-decoration-none"
>
<img
className="cover-img position-absolute h-100 w-100 object-fit-cover z-1"
src={bg}
alt="Background Image"
/>
<div className="minimize-shield position-relative z-2 py-2">
<img src={privacy} alt="SoP Icon" />
{(window as any)?.aesirx_analytics_translate?.txt_shield_of_privacy ??
t('txt_shield_of_privacy')}
</div>
</a>
</div>
</div>
<ConsentHeader languageSwitcher={languageSwitcher} />
<div
className="minimize-revoke"
onClick={() => {
Expand Down Expand Up @@ -1298,6 +1268,7 @@ const ConsentComponentCustomApp = (props: any) => {
isCustom={true}
layout={layout}
isRejectedLayout={true}
languageSwitcher={languageSwitcher}
>
<Form className="mb-0 w-100">
<Form.Check
Expand Down Expand Up @@ -1381,6 +1352,7 @@ const ConsentComponentCustomApp = (props: any) => {
isCustom={true}
layout={layout}
customConsentText={customConsentText}
languageSwitcher={languageSwitcher}
>
<Form className="mb-0 w-100">
<Form.Check
Expand Down
79 changes: 79 additions & 0 deletions src/Components/ConsentHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import React from 'react';
import bg from '../Assets/bg.png';
import privacy from '../Assets/privacy.svg';
import { useTranslation } from 'react-i18next';
import { useI18nextContext } from '../utils/I18nextProvider';
import Select, { StylesConfig } from 'react-select';
import i18n from 'i18next';

const ConsentHeader = ({ isRejectedLayout, languageSwitcher }: any) => {
const { t } = useTranslation();
const { listLanguages } = useI18nextContext();
const currentLanguage = listLanguages.filter(
(lang: any) => lang.value == i18n.language || i18n.language?.includes(lang.value)
);
const customStyles: StylesConfig = {
menuList: (base) => ({
...base,
maxHeight: '160px',
}),
};
return (
<div
className={`rounded-top align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap py-2 py-lg-3 px-lg-4 header-consent-bg ${
isRejectedLayout ? 'd-none' : 'd-flex'
}`}
style={{
borderBottom: '1px solid #DEDEDE',
}}
>
<div className="text-primary text-nowrap">
{(window as any)?.aesirx_analytics_translate?.txt_tracking_data_privacy ??
t('txt_tracking_data_privacy')}
</div>
{languageSwitcher ? (
<div className="language-switcher ms-auto me-2 d-flex align-items-center fs-14">
<Select
styles={customStyles}
components={{
IndicatorSeparator: () => null,
}}
isClearable={false}
isSearchable={false}
placeholder={t('txt_select')}
options={listLanguages}
className="shadow-none"
onChange={(data: any) => {
i18n.changeLanguage(data.value);
}}
defaultValue={
currentLanguage?.length ? currentLanguage : [{ label: 'English', value: 'en' }]
}
/>
</div>
) : (
<></>
)}
<div className="d-flex align-items-center fs-14 text-primary">
<a
href="https://shield.aesirx.io/"
rel="noreferrer"
target="_blank"
className="minimize-shield-wrapper position-relative text-decoration-none"
>
<img
className="cover-img position-absolute h-100 w-100 object-fit-cover z-1"
src={bg}
alt="Background Image"
/>
<div className="minimize-shield position-relative z-2 py-2">
<img src={privacy} alt="SoP Icon" />
{(window as any)?.aesirx_analytics_translate?.txt_shield_of_privacy ??
t('txt_shield_of_privacy')}
</div>
</a>
</div>
</div>
);
};
export default ConsentHeader;
56 changes: 7 additions & 49 deletions src/Components/Terms.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import arrow from '../Assets/arrow.svg';
import check_circle from '../Assets/check_circle.svg';
import { useTranslation } from 'react-i18next';
import { Tab, Tabs } from 'react-bootstrap';
import ConsentHeader from './ConsentHeader';

const terms = [
{
level: 1,
Expand Down Expand Up @@ -70,6 +72,7 @@ const TermsComponent = ({
layout,
isRejectedLayout,
customConsentText,
languageSwitcher,
}: any) => {
const { t } = useTranslation();
const handleReadmore = (status: boolean) => {
Expand All @@ -83,55 +86,10 @@ const TermsComponent = ({
(term, key) =>
term.level === level && (
<Fragment key={key}>
<div
className={`rounded-top align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap ${
isCustom
? 'py-2 py-lg-3 px-lg-4 header-consent-bg'
: 'p-2 p-lg-3 border-bottom bg-white'
} ${isRejectedLayout ? 'd-none' : 'd-flex'}`}
style={{
...(isCustom && {
borderBottom: '1px solid #DEDEDE',
}),
}}
>
<div className="text-primary text-nowrap">
{isCustom
? (window as any)?.aesirx_analytics_translate?.txt_tracking_data_privacy ??
t('txt_tracking_data_privacy')
: t(term.name)}
</div>
<div className="d-flex align-items-center fs-14 text-primary">
{isCustom ? (
<>
<a
href="https://shield.aesirx.io/"
rel="noreferrer"
target="_blank"
className="minimize-shield-wrapper position-relative text-decoration-none"
>
<img
className="cover-img position-absolute h-100 w-100 object-fit-cover z-1"
src={bg}
alt="Background Image"
/>
<div className="minimize-shield position-relative z-2 py-2">
<img src={privacy} alt="SoP Icon" />
{(window as any)?.aesirx_analytics_translate?.txt_shield_of_privacy ??
t('txt_shield_of_privacy')}
</div>
</a>
</>
) : (
<>
<div className={`status-tier tier-${term.level} rounded-circle`}></div>
<div className="status-tier-text">
{t(term.tier)} - {t(term.levelname)}
</div>
</>
)}
</div>
</div>
<ConsentHeader
isRejectedLayout={isRejectedLayout}
languageSwitcher={languageSwitcher}
/>
<div className={`pb-1 pb-lg-3 ${isCustom ? 'pt-0' : 'p-3'} bg-white`}>
{isCustom ? (
<>
Expand Down
1 change: 1 addition & 0 deletions src/analytics.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ const ConsentPopup = ({ visitor_uuid, event_uuid }: any) => {
endpoint={window['aesirx1stparty'] ?? ''}
networkEnv={window['concordiumNetwork'] ?? ''}
aesirXEndpoint={window['aesirxEndpoint'] ?? 'https://api.aesirx.io'}
languageSwitcher={window['languageSwitcher'] ?? ''}
gtagId={gtagId}
gtmId={gtmId}
layout={layout}
Expand Down
14 changes: 14 additions & 0 deletions src/styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -483,6 +483,20 @@ $dark: #222328;
padding: 13px 60px 13px 60px;
}
}
.language-switcher {
*::-webkit-scrollbar-track {
border-radius: 5px;
background-color: #e9e9e9;
}
*::-webkit-scrollbar {
width: 4px;
background-color: #e9e9e9;
}
*::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: $success;
}
}
}
body.modal-open,
body.modal-sso-open {
Expand Down
Loading

0 comments on commit 40ce52d

Please sign in to comment.