Skip to content

Commit

Permalink
feat: vm cookie was replaced by native for the app
Browse files Browse the repository at this point in the history
  • Loading branch information
@matiasbenary
matiasbenary committed Oct 23, 2024
1 parent dd30f96 commit 73097f4
Show file tree
Hide file tree
Showing 4 changed files with 479 additions and 16 deletions.
130 changes: 125 additions & 5 deletions src/components/CookiePrompt.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Button, Dialog } from '@near-pagoda/ui';
import Link from 'next/link';
import { useState } from 'react';
import styled from 'styled-components';

import { useBosComponents } from '@/hooks/useBosComponents';
import { useCookieStore } from '@/stores/cookieData';

import { VmComponent } from './vm/VmComponent';
import { cookiePreferences, optOut } from '@/utils/analytics';

const Wrapper = styled.div`
position: fixed;
Expand All @@ -12,12 +13,131 @@ const Wrapper = styled.div`
right: 0;
`;

const Cookies = styled.div`
position: fixed;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 8px 48px rgba(0, 0, 0, 0.15);
background-color: white;
border-radius: 4px;
margin: 8px auto;
max-width: 100%;
width: 714px;
padding: 12px;
display: flex;
gap: 10px;
align-items: center;
font-size: 12px;
line-height: 18px;
font-weight: 400;
p {
margin-bottom: 0;
}
.buttons {
display: flex;
gap: 10px;
}
@media (max-width: 800px) {
flex-direction: column;
align-items: flex-start;
margin: 0;
border-radius: 0;
width: 100%;
}
`;

const CustomizeDialogContent = styled.div`
padding: 15px;
display: flex;
flex-direction: column;
gap: 50px;
font-size: 12px;
line-height: 18px;
font-weight: 400;
.info {
display: flex;
flex-direction: column;
gap: 20px;
h2 {
font-size: 16px;
}
}
`;

const ActionWrapper = styled.div`
display: flex;
gap: 12px;
justify-content: flex-end;
flex-wrap: wrap;
justify-content: center;
`;
export const CookiePrompt = () => {
const cookieData = useCookieStore((state) => state.cookieData);
const components = useBosComponents();
const [cookieAcceptance, setCookieAcceptance] = useState(false);

const [open, setOpen] = useState(false);
if (cookieData || cookieAcceptance) return null;

const onAccept = ({ all, onlyRequired = false }: { all?: boolean; onlyRequired?: boolean }) => {
setCookieAcceptance(true);
localStorage.setItem('cookiesAcknowledged', all ? cookiePreferences.all : cookiePreferences.onlyRequired);
optOut(onlyRequired);
};
return (
<Wrapper>
<VmComponent src={components.nearOrg.cookiePrompt} props={{ cookiesAcknowleged: cookieData }} />
<Dialog.Root open={open} onOpenChange={setOpen}>
<Dialog.Content title="Customize Cookies">
<CustomizeDialogContent>
<div className="info">
<div>
<h2>Necessary Cookies</h2>
<p>
These cookies are required for website functionality such as storing your settings and preferences, as
detailed <Link href="/cookies/details">here</Link>.
</p>
</div>
<div>
<h2>Marketing & Analytics Cookies</h2>
<p>
We recommend accepting these cookies, which include third-party cookies, for the improvement of user
experience and discoverability on the B.O.S. These cookies contribute to anonymized statistics which
are analyzed in aggregate.
</p>
</div>
<ActionWrapper>
<Button type="button" label="Accept All" size="small" onClick={() => onAccept({ all: true })} />
<Button
type="button"
label="Required Only"
fill="outline"
size="small"
onClick={() => onAccept({ onlyRequired: true })}
/>
</ActionWrapper>
</div>
</CustomizeDialogContent>
</Dialog.Content>
</Dialog.Root>
<Cookies>
<p>
We use our own and third-party cookies on our website to enhance your experience, analyze traffic, and for
marketing. For more information see our{' '}
<Link href="/cookies" target="_blank">
Cookie Policy
</Link>
.{' '}
</p>
<div className="buttons">
<Button type="button" label="Customize" fill="outline" size="small" onClick={() => setOpen(true)} />
<Button type="button" label="Accept" size="small" onClick={() => onAccept({ all: true })} />
</div>
</Cookies>
</Wrapper>
);
};
203 changes: 203 additions & 0 deletions src/pages/cookies/details.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
import { Card, Container, Flex, Section, SvgIcon, Table, Tabs, Text } from '@near-pagoda/ui';
import { Cookie, HandHeart } from '@phosphor-icons/react';
import { useRouter } from 'next/router';

import { MetaTags } from '@/components/MetaTags';
import { useDefaultLayout } from '@/hooks/useLayout';
import type { NextPageWithLayout } from '@/utils/types';

const ContactUsPage: NextPageWithLayout = () => {
const router = useRouter();
const selectedTab = (router.query.tab as string) || 'firstPartyCookies';
return (
<>
<MetaTags
title="Near.org Cookie Policy"
description="This Cookie Policy explains how Discovery Domain, Ltd. and its group companies use cookies and similar technologies when you visit our websites such as pagoda.co and other managed websites that link to this policy"
/>
<Section grow="available" style={{ background: 'var(--sand3)' }}>
<Container size="m" style={{ display: 'flex', justifyContent: 'center' }}>
<Flex stack gap="l">
<Text as="h1" size="text-2xl">
Cookies
</Text>

<Card style={{ paddingTop: 0 }}>
<Tabs.Root value={selectedTab}>
<Tabs.List style={{ marginBottom: 'var(--gap-m)' }}>
<Tabs.Trigger href="?tab=firstPartyCookies" value="firstPartyCookies">
<SvgIcon icon={<Cookie fill="bold" />} />
1st Party Cookies
</Tabs.Trigger>

<Tabs.Trigger href="?tab=thirdPartyCookies" value="thirdPartyCookies">
<SvgIcon icon={<HandHeart fill="bold" />} />
3rd Party Cookies
</Tabs.Trigger>
</Tabs.List>

<Tabs.Content value="firstPartyCookies">
<Table.Root>
<Table.Head>
<Table.Row>
<Table.HeaderCell>Identifer</Table.HeaderCell>
<Table.HeaderCell>Purpose</Table.HeaderCell>
<Table.HeaderCell>Provider</Table.HeaderCell>
<Table.HeaderCell>Domain</Table.HeaderCell>
<Table.HeaderCell>Details</Table.HeaderCell>
<Table.HeaderCell>Duration</Table.HeaderCell>
<Table.HeaderCell>Actual Purpose</Table.HeaderCell>
</Table.Row>
</Table.Head>

<Table.Body>
<Table.Row>
<Table.Cell>rl_user_id</Table.Cell>
<Table.Cell>product analytics</Table.Cell>
<Table.Cell>Rudderstack</Table.Cell>
<Table.Cell>.near.org</Table.Cell>
<Table.Cell>
<a href="https://cookiedatabase.org/?lang=en&s=rl_user_id" target="_blank">
Link
</a>
</Table.Cell>
<Table.Cell>1 year</Table.Cell>
<Table.Cell>to store a unique user ID.</Table.Cell>
</Table.Row>

<Table.Row>
<Table.Cell>rl_trait</Table.Cell>
<Table.Cell>product analytics</Table.Cell>
<Table.Cell>Rudderstack</Table.Cell>
<Table.Cell>.near.org</Table.Cell>
<Table.Cell>
<a href="https://cookiedatabase.org/?lang=en&s=rl_trait" target="_blank">
Link
</a>
</Table.Cell>
<Table.Cell>1 year</Table.Cell>
<Table.Cell>to store performed actions on the website.</Table.Cell>
</Table.Row>

<Table.Row>
<Table.Cell>rl_session</Table.Cell>
<Table.Cell>product analytics</Table.Cell>
<Table.Cell>Rudderstack</Table.Cell>
<Table.Cell>.near.org</Table.Cell>
<Table.Cell>
<a href="https://cookiedatabase.org/?lang=en&s=rl_session" target="_blank">
Link
</a>
</Table.Cell>
<Table.Cell>1 year</Table.Cell>
<Table.Cell>Stores the session-related information including the ID.</Table.Cell>
</Table.Row>

<Table.Row>
<Table.Cell>rl_page_init_referring_domain</Table.Cell>
<Table.Cell>product analytics</Table.Cell>
<Table.Cell>Rudderstack</Table.Cell>
<Table.Cell>.near.org</Table.Cell>
<Table.Cell>
<a href="https://cookiedatabase.org/?lang=en&s=rl_page_init_referring_domain" target="_blank">
Link
</a>
</Table.Cell>
<Table.Cell>1 year</Table.Cell>
<Table.Cell>to store referring website.</Table.Cell>
</Table.Row>

<Table.Row>
<Table.Cell>rl_page_init_referrer</Table.Cell>
<Table.Cell>product analytics</Table.Cell>
<Table.Cell>Rudderstack</Table.Cell>
<Table.Cell>.near.org</Table.Cell>
<Table.Cell>
<a href="https://cookiedatabase.org/?lang=en&s=rl_page_init_referrer" target="_blank">
Link
</a>
</Table.Cell>
<Table.Cell>1 year</Table.Cell>
<Table.Cell>to store referring website.</Table.Cell>
</Table.Row>

<Table.Row>
<Table.Cell>user-country-code</Table.Cell>
<Table.Cell>product analytics</Table.Cell>
<Table.Cell>Discovery Domain</Table.Cell>
<Table.Cell>.near.org</Table.Cell>
<Table.Cell>n/a</Table.Cell>
<Table.Cell>1 year</Table.Cell>
<Table.Cell>to store a visitor&apos;s country code</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Tabs.Content>

<Tabs.Content value="thirdPartyCookies">
<Table.Root>
<Table.Head>
<Table.Row>
<Table.HeaderCell>Identifer</Table.HeaderCell>
<Table.HeaderCell>Purpose</Table.HeaderCell>
<Table.HeaderCell>Provider</Table.HeaderCell>
<Table.HeaderCell>Domain</Table.HeaderCell>
<Table.HeaderCell>Duration</Table.HeaderCell>
</Table.Row>
</Table.Head>

<Table.Body>
<Table.Row>
<Table.Cell>aeb0-187febdb30e5R...1hgeca2o5.1hgeca2o6.9.0.9</Table.Cell>
<Table.Cell>Functional/Essential</Table.Cell>
<Table.Cell>Fractal iDOS</Table.Cell>
<Table.Cell>.idos.network</Table.Cell>
<Table.Cell>1 year</Table.Cell>
</Table.Row>

<Table.Row>
<Table.Cell>idOS-signer-public-key</Table.Cell>
<Table.Cell>Functional/Essential</Table.Cell>
<Table.Cell>Fractal iDOS</Table.Cell>
<Table.Cell>enclave.idos.network</Table.Cell>
<Table.Cell>1 year</Table.Cell>
</Table.Row>

<Table.Row>
<Table.Cell>idOS-signer-address</Table.Cell>
<Table.Cell>Functional/Essential</Table.Cell>
<Table.Cell>Fractal iDOS</Table.Cell>
<Table.Cell>enclave.idos.network</Table.Cell>
<Table.Cell>1 year</Table.Cell>
</Table.Row>

<Table.Row>
<Table.Cell>idOS-password</Table.Cell>
<Table.Cell>Functional/Essential</Table.Cell>
<Table.Cell>Fractal iDOS</Table.Cell>
<Table.Cell>enclave.idos.network</Table.Cell>
<Table.Cell>1 year</Table.Cell>
</Table.Row>

<Table.Row>
<Table.Cell>idOS-human-id</Table.Cell>
<Table.Cell>Functional/Essential</Table.Cell>
<Table.Cell>Fractal iDOS</Table.Cell>
<Table.Cell>enclave.idos.network</Table.Cell>
<Table.Cell>1 year</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Tabs.Content>
</Tabs.Root>
</Card>
</Flex>
</Container>
</Section>
</>
);
};

ContactUsPage.getLayout = useDefaultLayout;

export default ContactUsPage;
Loading

0 comments on commit 73097f4

Please sign in to comment.