- )
-}
-
-LandingPage.propTypes = {
- classes: PropTypes.object.isRequired,
-}
-
-export default LandingPage
diff --git a/frontend/src/components/areas/public/features/welcome/legacy/messages.js b/frontend/src/components/areas/public/features/welcome/legacy/messages.js
deleted file mode 100644
index 4cb5bf6ee..000000000
--- a/frontend/src/components/areas/public/features/welcome/legacy/messages.js
+++ /dev/null
@@ -1,292 +0,0 @@
-import { defineMessages } from 'react-intl'
-
-export default defineMessages({
- welcomeFreelancersItemOnePrimary: {
- id: 'welcome.main.item.one.primary',
- defaultMessage: 'Get paid by contributing with Open Source'
- },
- welcomeFreelancersItemOneSecondary: {
- id: 'welcome.main.item.one.secondary',
- defaultMessage: 'Contribute with Open Source projects and receive rewards in bounties'
- },
- welcomeFreelancersItemTwoPrimary: {
- id: 'welcome.main.item.two.primary',
- defaultMessage: 'Work with on-demand projects as a freelancer using a development workflow'
- },
- welcomeFreelancersItemTwoSecondary: {
- id: 'welcome.main.item.two.secondary',
- defaultMessage: 'We use a Git Workflow to facilitate the process of delivery tasks on demand'
- },
- welcomeFreelancersItemThreePrimary: {
- id: 'welcome.main.item.three.primary',
- defaultMessage: 'Contribute with projects, get paid, receive tailored feedbacks and get your code into production'
- },
- welcomeFreelancersItemThreeSecondary: {
- id: 'welcome.main.item.three.secondary',
- defaultMessage: 'We use a very effective agile process to delivery tasks using Git, and we provide support to learn and improve your skills'
- },
- welcomeCompaniesItemOnePrimary: {
- id: 'welcome.companies.item.one.primary',
- defaultMessage: 'Maintainers of Open Source projects can use Gitpay to outsource the development'
- },
- welcomeCompaniesItemOneSecondary: {
- id: 'welcome.companies.item.one.secondary',
- defaultMessage: 'Import issues from Git, add bounties, then pay contributors when the related Pull Request is merged'
- },
- welcomeCompaniesItemTwoPrimary: {
- id: 'welcome.companies.item.two.primary',
- defaultMessage: 'Organizations can use Gitpay to develop tasks on demand, using a development workflow'
- },
- welcomeCompaniesItemTwoSecondary: {
- id: 'welcome.companies.item.two.secondary',
- defaultMessage: 'Pay for on-demand freelancer work using an integrated workflow and get issues from your project solved'
- },
- welcomeCompaniesItemThreePrimary: {
- id: 'welcome.companies.item.three.primary',
- defaultMessage: 'Funding your Open Source project'
- },
- welcomeCompaniesItemThreeSecondary: {
- id: 'welcome.companies.item.three.secondary',
- defaultMessage: 'You can crowdfunding your Open Source projects on Gitpay, and get funding by inviting sponsor to add bounties'
- },
- welcomeHowToItemOnePrimary: {
- id: 'welcome.howto.item.one.primary',
- defaultMessage: 'Import an issue from a Git repository'
- },
- welcomeHowToItemOneSecondary: {
- id: 'welcome.howto.item.one.secondary',
- defaultMessage: 'Import an issue to be solved, then you can set deadlines, add bounties and we will send to our community'
- },
- welcomeHowToItemTwoPrimary: {
- id: 'welcome.howto.item.two.primary',
- defaultMessage: 'Contributors and freelancers can apply to solve your issue'
- },
- welcomeHowToItemTwoSecondary: {
- id: 'welcome.howto.item.two.secondary',
- defaultMessage: 'The users can send offers and the ones who applied can be assigned to complete the work'
- },
- welcomeHowToItemThreePrimary: {
- id: 'welcome.howto.item.three.primary',
- defaultMessage: 'When the solution is ready, you can review, and once approved, you can merge and send the payment to the peer'
- },
- welcomeHowToItemThreeSecondary: {
- id: 'welcome.howto.item.three.secondary',
- defaultMessage: 'An easy way to have your work integrated with development tools approved by the development community'
- },
- welcomeHowToItemFourPrimary: {
- id: 'welcome.howto.item.four.primary',
- defaultMessage: 'Your issue was solved, and the contributor received the payment'
- },
- welcomeHowToItemFourSecondary: {
- id: 'welcome.howto.item.four.secondary',
- defaultMessage: 'We support payments with Credit Card or Paypal and the bounties are transfered directly to your bank account'
- },
- consultingItemPrimary: {
- id: 'welcome.how.item.primary',
- defaultMessage: 'Create an account on Gitpay'
- },
- consultingItemSecondary: {
- id: 'welcome.how.item.secondary',
- defaultMessage: 'When you create an account, you can setup payment methods to receive bounties, setup your preferences and explore tasks. You can receive issues funded according to your preferences'
- },
- consultingItemTwoPrimary: {
- id: 'welcome.how.item.two.primary',
- defaultMessage: 'Solve issues'
- },
- consultingItemTwoSecondary: {
- id: 'welcome.how.item.two.secondary',
- defaultMessage: 'You can apply to solve issues and receive the payment for a bounty, or even apply for learning purposes, to improve your skills'
- },
- consultingItemThreePrimary: {
- id: 'welcome.how.item.three.primary',
- defaultMessage: 'Receive payments with direct transfer or Paypal'
- },
- consultingItemThreeSecondary: {
- id: 'welcome.how.item.three.secondary',
- defaultMessage: 'Once your changes are merged into the code base and the issue was solved, you will receive the payment in your bank account'
- },
- communityItemPrimary: {
- id: 'welcome.community.item.primary',
- defaultMessage: '8% fee to receive payments for the issues solved'
- },
- communityItemSecondary: {
- id: 'welcome.community.item.secondary',
- defaultMessage: 'We accept direct transfer to your bank account registered on Gitpay or using your Paypal account'
- },
- communityItemTwoPrimary: {
- id: 'welcome.community.item.two.primary',
- defaultMessage: 'A place for opportunities'
- },
- communityItemTwoSecondary: {
- id: 'welcome.community.item.two.secondary',
- defaultMessage: 'You may become one of our top talents and there is chances that you can be hired by partner companies'
- },
- communityItemThreePrimary: {
- id: 'welcome.community.item.three.primary',
- defaultMessage: 'A great workflow that helps you to focus in what matter'
- },
- communityItemThreeSecondary: {
- id: 'welcome.community.item.three.secondary',
- defaultMessage: 'We follow git good practices to automate your delivery using git, and now you can work with tools you love and you will be supported with collaboration to solve issues'
- },
- companiesHowItWorksItemPrimary: {
- id: 'welcome.howitworks.companies.item.primary',
- defaultMessage: 'Import git issues to Gitpay'
- },
- companiesHowItWorksItemSecondary: {
- id: 'welcome.howitworks.companies.item.secondary',
- defaultMessage: 'Import issues from your Github or Bitbucket projects using git to be able to add bounties and manage fundings, and set deadlines and workflows for payments'
- },
- companiesHowItWorksItemTwoPrimary: {
- id: 'welcome.howitworks.companies.item.two.primary',
- defaultMessage: 'Assign contributors to solve'
- },
- companiesHowItWorksItemTwoSecondary: {
- id: 'welcome.howitworks.companies.item.two.secondary',
- defaultMessage: 'Contributors can apply for interest and make offers and you can approve their offers to solve your issues'
- },
- companiesHowItWorksItemThreePrimary: {
- id: 'welcome.howitworks.companies.item.three.primary',
- defaultMessage: 'Receive a change proposal using Pull Requests'
- },
- companiesHowItWorksItemThreeSecondary: {
- id: 'welcome.howitworks.companies.item.three.secondary',
- defaultMessage: 'The change request will be send directly to your approval, and once approved, the change is merged and the payment will be send to the peer'
- },
- companiesItemPrimary: {
- id: 'welcome.which.companies.item.primary',
- defaultMessage: 'For any company'
- },
- companiesItemSecondary: {
- id: 'welcome.which.companies.item.secondary',
- defaultMessage: 'The distributed colaboration helps company grows and provide a great solution to have the tasks solved using agile process and colaboration throught development'
- },
- companiesItemTwoSecondary: {
- id: 'welcome.which.companies.item.two.secondary',
- defaultMessage: 'Companies will be able to use Open Source if they want to create colaborative tools that will help other companies and contribute with the OSS ecosystem'
- },
- companiesItemThreePrimary: {
- id: 'welcome.which.companies.item.three.primary',
- defaultMessage: 'We validate your business integration process'
- },
- companiesItemThreeSecondary: {
- id: 'welcome.which.companies.item.three.secondary',
- defaultMessage: 'We will help to fit in agile process to have your tasks concluded in an independent way and according to your business'
- },
- companiesItemPrimary1: {
- id: 'welcome.companies.item.primary',
- defaultMessage: '8% for Open Source projects'
- },
- companiesItemSecondary1: {
- id: 'welcome.companies.item.secondary',
- defaultMessage: '8% fee for Open Source Projects'
- },
- companiesItemTwoPrimary1: {
- id: 'welcome.companies.item.two.primary.alt',
- defaultMessage: '18% for private projects'
- },
- companiesItemTwoSecondary1: {
- id: 'welcome.companies.item.two.secondary.alt',
- defaultMessage: '18% fee for private projects'
- },
- companiesItemThreePrimary1: {
- id: 'welcome.companies.item.three.primary.alt',
- defaultMessage: 'The fees are not refundable'
- },
- companiesItemThreeSecondary1: {
- id: 'welcome.companies.item.three.secondary.alt',
- defaultMessage: 'You can refund your payment, or transfer to another issue, but the fees are not refundable'
- },
- workflowItemPrimary: {
- id: 'welcome.workflow.item.primary',
- defaultMessage: 'Use of personal information'
- },
- workflowItemSecondary: {
- id: 'welcome.workflow.item.secondary',
- defaultMessage: 'The company may use personal information for the following purposes: login and signup for Gitpay service, email notifications when enabled, and statistic data when authorized'
- },
- workflowItemTwoPrimary: {
- id: 'welcome.workflow.item.two.primary',
- defaultMessage: 'Integration with third party'
- },
- workflowItemTwoSecondary: {
- id: 'welcome.workflow.item.two.secondary',
- defaultMessage: 'We never provide access to your data to a third party without your previous consent'
- },
- workflowItemThreePrimary: {
- id: 'welcome.workflow.item.three.primary',
- defaultMessage: 'Use of Cookies'
- },
- workflowItemThreeSecondary: {
- id: 'welcome.workflow.item.three.secondary',
- defaultMessage: 'We use cookies to help to improve your experience with Gitpay, providing a custom experience according with your needs'
- },
- termsItemOnePrimary: {
- id: 'welcome.terms.item.one.primary',
- defaultMessage: 'Terms'
- },
- termsItemOneSecondary: {
- id: 'welcome.terms.item.one.secondary',
- defaultMessage: 'THIS IS A LEGALLY BINDING AGREEMENT between you and Work n Enjoy Inc., former company of Gitpay. By using gitpay.me website ("Site") or any of the Gitpay services and integrations ("Services"), you agree to all the terms and conditions of this Terms of Service ("Agreement"). If you are entering into this Agreement on behalf of a company or other legal entity, you represent that you have the authority to bind such entity to these terms and conditions, in which case the terms "you" or "your" shall refer to such entity. If you do not have such authority, or if you do not agree with these terms and conditions, you must not proceed with the registration process or use our Site or Service.'
- },
- welcomeCollabItemOnePrimary: {
- id: 'welcome.collab.item.one.primary',
- defaultMessage: 'By developers, for developers'
- },
- welcomeCollabItemOneSecondary: {
- id: 'welcome.collab.item.one.secondary',
- defaultMessage: 'We use tools like Git, and integrations with Github and Gitlab to automate the freelancer process'
- },
- welcomeCollabItemTwoPrimary: {
- id: 'welcome.collab.item.two.primary',
- defaultMessage: 'We are fully Open Source'
- },
- welcomeCollabItemTwoSecondary: {
- id: 'welcome.collab.item.two.secondary',
- defaultMessage: 'We are a open source project made by contributors, and we help our community of contributors to shift their careers to the next level'
- },
- welcomeCollabItemThreePrimary: {
- id: 'welcome.collab.item.three.primary',
- defaultMessage: 'Collaborate from anywhere, empowering development communities'
- },
- welcomeCollabItemThreeSecondary: {
- id: 'welcome.collab.item.three.secondary',
- defaultMessage: 'We use collaborative remote tools like Slack and discuss and review code on Github or Bitbucket, and we do payments for bounties and freelancer work worldwide'
- },
- topMenu1: {
- id: 'welcome.menu.item.one',
- defaultMessage: 'Intro'
- },
- topMenu2: {
- id: 'welcome.menu.item.two',
- defaultMessage: 'For contributors'
- },
- topMenu3: {
- id: 'welcome.menu.item.three',
- defaultMessage: 'For organizations'
- },
- topMenu4: {
- id: 'welcome.menu.item.four',
- defaultMessage: 'Community'
- },
- topMenu5: {
- id: 'welcome.menu.item.five',
- defaultMessage: 'How it works'
- },
- topMenu6: {
- id: 'welcome.menu.item.six',
- defaultMessage: 'Fees'
- },
- topMenu7: {
- id: 'welcome.menu.item.seven',
- defaultMessage: 'Integrations'
- },
- topMenu8: {
- id: 'welcome.menu.item.eight',
- defaultMessage: 'Get started'
- },
- topMenu9: {
- id: 'welcome.menu.item.nine',
- defaultMessage: 'Who is using Gitpay'
- }
-})
diff --git a/frontend/src/components/areas/public/features/welcome/legacy/terms-of-service-company.js b/frontend/src/components/areas/public/features/welcome/legacy/terms-of-service-company.js
deleted file mode 100644
index bfbfa478f..000000000
--- a/frontend/src/components/areas/public/features/welcome/legacy/terms-of-service-company.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { injectIntl, FormattedMessage } from 'react-intl'
-
-import {
- List,
- ListItem,
- ListItemText,
- ListItemIcon,
- Dialog,
- AppBar,
- Toolbar,
- IconButton,
- Typography,
- Avatar,
-} from '@mui/material'
-import {
- Apps,
- Close
-} from '@mui/icons-material'
-
-import Transition from 'design-library/atoms/transitions/transition'
-import messages from './messages'
-
-import { InfoList, MainTitle } from '../components/CommonStyles'
-
-class TermsOfServiceCompany extends Component {
- constructor (props) {
- super(props)
- this.state = {
- open: false
- }
- this.handleClickOpen = this.handleClickOpen.bind(this)
- this.handleClose = this.handleClose.bind(this)
- }
-
- componentDidMount () {
-
- }
-
- handleClickOpen () {
- this.setState({ open: true })
- }
-
- handleClose () {
- this.setState({ open: false })
- }
-
- render () {
- const { classes } = this.props
-
- return (
-
-
-
- { (msg) => (
-
- ) }
-
-
-
-
- )
- }
-}
-
-TermsOfServiceCompany.propTypes = {
- classes: PropTypes.object.isRequired,
-}
-
-export default injectIntl(TermsOfServiceCompany)
diff --git a/frontend/src/components/areas/public/features/welcome/legacy/terms-of-service-people.js b/frontend/src/components/areas/public/features/welcome/legacy/terms-of-service-people.js
deleted file mode 100644
index 475900ec2..000000000
--- a/frontend/src/components/areas/public/features/welcome/legacy/terms-of-service-people.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { injectIntl, FormattedMessage } from 'react-intl'
-
-import {
- List,
- ListItem,
- ListItemText,
- ListItemIcon,
- Dialog,
- AppBar,
- Toolbar,
- IconButton,
- Typography,
- Avatar,
-} from '@mui/material'
-import {
- Apps,
- Close
-} from '@mui/icons-material'
-
-import Transition from 'design-library/atoms/transitions/transition'
-import messages from './messages'
-
-import { InfoList, MainTitle } from '../components/CommonStyles'
-
-class TermsOfServicePeople extends Component {
- constructor (props) {
- super(props)
- this.state = {
- open: false
- }
- this.handleClickOpen = this.handleClickOpen.bind(this)
- this.handleClose = this.handleClose.bind(this)
- }
-
- componentDidMount () {
-
- }
-
- handleClickOpen () {
- this.setState({ open: true })
- }
-
- handleClose () {
- this.setState({ open: false })
- }
-
- render () {
- const { classes } = this.props
-
- return (
-
-
-
- { (msg) => (
-
- ) }
-
-
-
-
- )
- }
-}
-
-TermsOfServicePeople.propTypes = {
- classes: PropTypes.object.isRequired,
-}
-
-export default injectIntl(TermsOfServicePeople)
diff --git a/frontend/src/components/areas/public/features/welcome/legacy/welcome.js b/frontend/src/components/areas/public/features/welcome/legacy/welcome.js
deleted file mode 100644
index 5e0474aa0..000000000
--- a/frontend/src/components/areas/public/features/welcome/legacy/welcome.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import React, { useRef } from 'react'
-import PropTypes from 'prop-types'
-import { Grid, Typography, List, ListItem, ListItemText, ListItemIcon, Avatar, Container } from '@mui/material'
-import { AccountBalanceWallet, Work, Apps, Assignment, GroupWork } from '@mui/icons-material'
-import { injectIntl, FormattedMessage } from 'react-intl'
-import TopBarContainer from '../../../../../../containers/topbar'
-import Bottom from 'design-library/organisms/layouts/bottom-bar-layouts/bottom-bar-layout/bottom-bar-layout'
-import messages from './messages'
-// removed withStyles/theme styles usage
-import freelancerImage from 'images/collections/collection-flat-community.svg'
-import companiesImage from 'images/collections/collection-flat-companies.svg'
-import teamImage from 'images/welcome-teamwork.png'
-
-import {
- MainTitle,
- MainList,
- ResponsiveImage,
- Section
-} from '../components/CommonStyles'
-
-// legacy styles removed
-
-const Welcome = (props) => {
- const ref = useRef(null)
- const [value, setValue] = React.useState(0)
-
- React.useEffect(() => {
- // componentDidMount() equivalent
- }, [])
-
- React.useEffect(() => {
- // componentWillUnmount() equivalent
- return () => {
- // Clean up code
- }
- }, [])
-
- const { } = props
-
- return (
-
+
+ );
+};
+
+export default SpotCard;
\ No newline at end of file
diff --git a/frontend/src/components/design-library/molecules/content/privacy-policy/privacy-policy.stories.tsx b/frontend/src/components/design-library/molecules/content/privacy-policy/privacy-policy.stories.tsx
deleted file mode 100644
index 854518728..000000000
--- a/frontend/src/components/design-library/molecules/content/privacy-policy/privacy-policy.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import PrivacyPolicy from './privacy-policy';
-
-export default {
- title: 'Design Library/Molecules/Content/PrivacyPolicy',
- component: PrivacyPolicy
-};
-
-const Template = (args) => ;
-
-export const Default = Template.bind({});
-Default.args = {};
\ No newline at end of file
diff --git a/frontend/src/components/design-library/molecules/content/terms-of-service/terms-of-service.stories.tsx b/frontend/src/components/design-library/molecules/content/terms-of-service/terms-of-service.stories.tsx
deleted file mode 100644
index 4fd2a25c9..000000000
--- a/frontend/src/components/design-library/molecules/content/terms-of-service/terms-of-service.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import TermsOfService from './terms-of-service';
-
-export default {
- title: 'Design Library/Molecules/Content/TermsOfService',
- component: TermsOfService
-};
-
-const Template = (args) => ;
-
-export const Default = Template.bind({});
-Default.args = {
- // Add default props here if any
-};
\ No newline at end of file
diff --git a/frontend/src/components/design-library/molecules/content/terms/base-terms/base-terms.stories.tsx b/frontend/src/components/design-library/molecules/content/terms/base-terms/base-terms.stories.tsx
new file mode 100644
index 000000000..15c82f358
--- /dev/null
+++ b/frontend/src/components/design-library/molecules/content/terms/base-terms/base-terms.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import BaseTerms from "./base-terms";
+
+const meta: Meta = {
+ title: "Design Library/Molecules/Content/Terms/BaseTerms",
+ component: BaseTerms,
+ parameters: {
+ layout: "centered"
+ }
+};
+export default meta;
+
+type Story = StoryObj;
+
+const baseArgs = {
+ title: "Terms of Service",
+ subtitle: "Please read these terms carefully before using our service.",
+ updated: "Last updated: Jan 1, 2025",
+ content:
+ "By accessing or using the service you agree to be bound by these Terms. If you disagree with any part of the terms then you may not access the service."
+ // extraStyles defaults to true in the component
+};
+
+export const Default: Story = {
+ args: {
+ ...baseArgs
+ }
+};
+
+export const WithActions: Story = {
+ args: {
+ ...baseArgs,
+ onArrowBack: action("onArrowBack"),
+ onAgreeTerms: action("onAgreeTerms")
+ }
+};
+
+export const NoHeader: Story = {
+ args: {
+ ...baseArgs,
+ noHeader: true
+ }
+};
+
+export const WithoutExtraStyles: Story = {
+ args: {
+ ...baseArgs,
+ extraStyles: false
+ }
+};
+
+export const LongContent: Story = {
+ args: {
+ ...baseArgs,
+ content:
+ "These terms apply to all visitors, users and others who access or use the service. " +
+ "You are responsible for safeguarding the password that you use to access the service. " +
+ "You agree not to disclose your password to any third party. " +
+ "Accounts may be terminated for violations of these terms. " +
+ "We may terminate or suspend access to our service immediately, without prior notice or liability, " +
+ "for any reason whatsoever, including without limitation if you breach the terms. " +
+ "The service and its original content, features and functionality are and will remain the exclusive " +
+ "property of the company and its licensors. " +
+ "We reserve the right, at our sole discretion, to modify or replace these terms at any time."
+ }
+};
diff --git a/frontend/src/components/design-library/molecules/content/terms/base-terms/base-terms.styles.ts b/frontend/src/components/design-library/molecules/content/terms/base-terms/base-terms.styles.ts
new file mode 100644
index 000000000..fd69dead7
--- /dev/null
+++ b/frontend/src/components/design-library/molecules/content/terms/base-terms/base-terms.styles.ts
@@ -0,0 +1,44 @@
+import { styled } from "@mui/material/styles";
+import { Paper, Button } from "@mui/material";
+
+type TermsContainerProps = {
+ extraStyles?: boolean;
+};
+
+export const TermsContainer = styled("div")(({ extraStyles }) => ({
+ ...(extraStyles
+ ? {
+ padding: 20,
+ textAlign: "left",
+ position: "absolute",
+ top: 0,
+ left: 0,
+ width: "100%",
+ background: "white"
+ }
+ : {})
+}));
+
+export const Header = styled("div")({
+ marginBottom: 10
+});
+
+export const ContentArea = styled("div")({
+ overflow: "scroll",
+ height: "calc(100vh - 200px)"
+});
+
+export const ActionsBar = styled(Paper)({
+ position: "absolute",
+ bottom: 20,
+ left: 0,
+ height: 80,
+ width: "100%",
+ background: "white"
+});
+
+export const ActionButton = styled(Button)({
+ float: "right",
+ marginRight: 20,
+ marginTop: 20
+});
diff --git a/frontend/src/components/design-library/molecules/content/terms/base-terms/base-terms.tsx b/frontend/src/components/design-library/molecules/content/terms/base-terms/base-terms.tsx
new file mode 100644
index 000000000..de6c0eeb6
--- /dev/null
+++ b/frontend/src/components/design-library/molecules/content/terms/base-terms/base-terms.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import { Typography } from "@mui/material";
+import { ArrowBack } from "@mui/icons-material"
+import { FormattedMessage } from "react-intl";
+import { TermsContainer, Header, ContentArea, ActionsBar, ActionButton } from "./base-terms.styles";
+
+type BaseTermsProps = {
+ title: React.ReactNode | string;
+ subtitle: React.ReactNode | string;
+ updated: React.ReactNode | string;
+ content: React.ReactNode | string;
+ onArrowBack?: () => void;
+ onAgreeTerms?: () => void;
+ noHeader?: boolean;
+ extraStyles?: boolean;
+};
+
+
+const BaseTerms = ({
+ title,
+ subtitle,
+ updated,
+ content,
+ onArrowBack,
+ onAgreeTerms,
+ noHeader,
+ extraStyles = true
+}:BaseTermsProps) => {
+
+ return (
+ <>
+
+ { noHeader ? null : (
+ <>
+
+ { onArrowBack && (
+
+
+
+ )}
+
+ {title}
+
+
+ {updated}
+
+
+
+ {subtitle}
+
+
+ )}
+
+
+ {content}
+
+
+ { onAgreeTerms && (
+
+
+
+
+
+ )}
+
+
+ )
+}
+
+export default BaseTerms;
diff --git a/frontend/src/components/design-library/molecules/content/terms/cookie-policy/cookie-policy.stories.tsx b/frontend/src/components/design-library/molecules/content/terms/cookie-policy/cookie-policy.stories.tsx
new file mode 100644
index 000000000..77fb09b74
--- /dev/null
+++ b/frontend/src/components/design-library/molecules/content/terms/cookie-policy/cookie-policy.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CookiePolicy from './cookie-policy';
+
+const meta: Meta = {
+ title: 'Design Library/Molecules/Content/Terms/CookiePolicy',
+ component: CookiePolicy,
+ args: {
+ extraStyles: true
+ },
+ argTypes: {
+ extraStyles: { control: 'boolean' }
+ }
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: { extraStyles: true }
+};
+
+export const NoExtraStyles: Story = {
+ args: { extraStyles: false }
+};
diff --git a/frontend/src/components/design-library/molecules/content/terms/cookie-policy/cookie-policy.tsx b/frontend/src/components/design-library/molecules/content/terms/cookie-policy/cookie-policy.tsx
new file mode 100644
index 000000000..e424cd898
--- /dev/null
+++ b/frontend/src/components/design-library/molecules/content/terms/cookie-policy/cookie-policy.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import BaseTerms from "../base-terms/base-terms";
+
+
+const CookiePolicy = ({ extraStyles = true }) => {
+
+ const content = `
+ {br}
+ Introduction
+ {br}
+Welcome to Gitpay! This Cookie Policy explains how we use cookies, similar tracking technologies, and your choices regarding such technologies when you visit our website.
+{br}
+{br}
+What are cookies?
+Cookies are small text files that are stored on your device (computer, tablet, or mobile) when you visit a website. They enable the website to remember your actions and preferences (such as login details, language, font size, and other display preferences) over a period of time, so you don't have to keep re-entering them whenever you come back to the site or browse from one page to another.
+{br}
+{br}
+Types of cookies we use
+We use the following types of cookies on Gitpay:
+{br}
+{br}
+a) Essential cookies:
+These cookies are necessary for the operation of our website and enable you to navigate the site and use its features. Without these cookies, certain functionalities may be unavailable.
+{br}
+{br}
+b) Analytical cookies:
+Analytical cookies help us understand how visitors interact with our website by collecting information anonymously. This data helps us analyze and improve the performance and usability of our website.
+{br}
+{br}
+c) Functional cookies:
+Functional cookies allow us to remember your preferences and provide enhanced functionality and personalization. These cookies may be set by us or by third-party providers whose services we have added to our pages.
+{br}
+{br}
+d) Advertising cookies:
+Advertising cookies are used to deliver relevant advertisements to you. They track your browsing habits and help us display personalized ads based on your interests. These cookies may be set by us or by third-party advertising networks.
+{br}{br}
+
+Third-party cookies
+We may also use cookies from third-party services, such as Google Analytics, to track and analyze website usage. These third-party cookies are subject to the respective third parties' privacy policies.
+{br}{br}
+Cookie management{br}
+You can manage and control cookies in various ways. You can set your browser to refuse all or some cookies, or to alert you when websites set or access cookies. Please note that if you disable or refuse cookies, some parts of our website may become inaccessible or not function properly.
+{br}{br}
+To manage your cookie preferences, you can modify the settings in your browser. Each browser has different procedures for managing cookies, so please refer to the instructions provided by your browser.
+{br}{br}
+Updates to this Cookie Policy{br}
+We may update this Cookie Policy from time to time to reflect changes in our practices or legal requirements. We will post any revised version on this page with an updated effective date.
+{br}{br}
+Contact us
+{br}{br}
+If you have any questions or concerns about this Cookie Policy or our use of cookies on Gitpay, please contact us at contact@gitpay.me.
+{br}
+Please note that this Cookie Policy should be read in conjunction with our Privacy Policy, which provides further information on how we collect, use, and disclose your personal data.
+ `
+
+ return (
+ <>
+ }
+ subtitle={}
+ updated={}
+ content={ }} />}
+ extraStyles={extraStyles}
+ />
+
+ )
+}
+
+export default CookiePolicy;
diff --git a/frontend/src/components/design-library/molecules/content/terms/privacy-policy/privacy-policy.stories.tsx b/frontend/src/components/design-library/molecules/content/terms/privacy-policy/privacy-policy.stories.tsx
new file mode 100644
index 000000000..602d8398d
--- /dev/null
+++ b/frontend/src/components/design-library/molecules/content/terms/privacy-policy/privacy-policy.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import PrivacyPolicy from './privacy-policy';
+
+export default {
+ title: 'Design Library/Molecules/Content/Terms/PrivacyPolicy',
+ component: PrivacyPolicy
+};
+
+const Template = (args) => ;
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithoutHeader = Template.bind({});
+WithoutHeader.args = {
+ noHeader: true
+};
+
+export const WithAgreeButton = Template.bind({});
+WithAgreeButton.args = {
+ onAgreeTerms: () => alert('Agreed to Privacy Policy')
+};
+
+export const WithExtraStyles = Template.bind({});
+WithExtraStyles.args = {
+ extraStyles: true
+};
+
+export const WithArrowBack = Template.bind({});
+WithArrowBack.args = {
+ onArrowBack: () => alert('Arrow back clicked')
+};
diff --git a/frontend/src/components/design-library/molecules/content/privacy-policy/privacy-policy.tsx b/frontend/src/components/design-library/molecules/content/terms/privacy-policy/privacy-policy.tsx
similarity index 62%
rename from frontend/src/components/design-library/molecules/content/privacy-policy/privacy-policy.tsx
rename to frontend/src/components/design-library/molecules/content/terms/privacy-policy/privacy-policy.tsx
index 57135944c..ecc691c29 100644
--- a/frontend/src/components/design-library/molecules/content/privacy-policy/privacy-policy.tsx
+++ b/frontend/src/components/design-library/molecules/content/terms/privacy-policy/privacy-policy.tsx
@@ -1,8 +1,6 @@
import React from "react";
-import { Typography } from "@mui/material";
-import { ArrowBack } from "@mui/icons-material"
import { FormattedMessage } from "react-intl";
-import { Button, Paper } from "@mui/material";
+import BaseTerms from "../base-terms/base-terms";
type PrivacyPolicyProps = {
onArrowBack?: () => void;
@@ -47,40 +45,16 @@ If you have any questions or concerns about our privacy policy, please contact u
return (
<>
-
-
-
-
-
-