// Dependencies import { linkClasses } from '@freesewing/utils' // Hooks import React, { useState } from 'react' /** * A component to ask people to support FreeSewing financially * * This component will pass down all props to the Subscribe component * * @component * @param {object} props - All component props * @param {boolean} [props.dense = undefined] - Whether to render a more dense view * @param {object} [props.js = undefined] - An optional Javascript Object to highlight * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set * @returns {JSX.Element} */ export const PleaseSubscribe = (props = {}) => (

Support FreeSewing

) /** * A component that shows a plea for financial support * * @component * @param {object} props - All component props * @returns {JSX.Element} */ export const Plea = () => (

Hi friend 👋

{[ 'My name is Joost De Cock. I am the founder and maintainer of FreeSewing.', 'I am here to ask your help. Or more accurately, your support. Which we really need.', 'If you think FreeSewing is worthwhile, and if you can spare a few coins each month without hardship, please support our work.', 'Thanks in advance for considering it.', 'love', ].map((txt, i) => (

{txt}

))}
) const PaypalFormBody = ({ amount, period, currency }) => ( <> {[ ...Object.entries(paypalConfig.vars[period === 'x' ? 'donate' : 'subscribe']), ...Object.entries(paypalConfig.vars.shared), ].map(([name, value]) => ( ))} {period === 'x' ? ( <> ) : ( <> )} ) /** * A component to set up a finciancial subscription to FreeSewing, also can handle one-time donations * * @component * @param {object} props - All component props * @param {string} [props.color = secondary] - One of the DaisyUI colors * @param {boolean} [props.subscribeOnly = undefined] - Set this to true to remove the option to make a one-time donation * @param {number} [props.amountPreset = 25] - The amount to preset * @param {number} [props.periodPreset = m] - The period to preset * @returns {JSX.Element} */ export const Subscribe = ({ color = 'secondary', subscribeOnly, amountPreset = '25', periodPreset = 'm', }) => { const [amount, setAmount] = useState(amountPreset) const [currency, setCurrency] = useState('eur') const [period, setPeriod] = useState(periodPreset) const { amounts, currencies } = paypalConfig const periods = subscribeOnly ? paypalConfig.periods.filter((p) => p !== 'x') : paypalConfig.periods return (
setAmount(evt.target.value)} />
{periods.map((val) => (
))}

Don't have a PayPal account? Ko-fi.com/FreeSewing

) } /** * A component that renders the signed name for joost, the FreeSewing maintainer, as SVG * * @component * @param {object} props - All component props * @param {string} [props.className = 'tw:w-32'] - Allows you to override the styling, including the size * @param {number} [props.stroke = 0] - An optional stroke width * @returns {JSX.Element} */ export const Joost = ({ className = 'tw:w-32', stroke = 0 }) => ( ) const paypalConfig = { /* * This is the plan ID for FreeSewing Patron Subscriptions. * Note that to maximize flexibility, and have a sort of pay-what-you-wnat * system, we have only 1 plan: 1 euro/month. * * But we use quantity pricing. So if a person selects a 15/month plan, * we subscribe them to the 1/month plan but set the quantity to 15. */ planId: 'P-41W64036N5201172WMTEKMIA', /* * List of amounts we display * (users can also enter their own amount, which we'll floor to an int) */ amounts: [5, 10, 15, 25, 50, 75, 100], /* * Currencies supported by PayPal that we use * https://developer.paypal.com/api/nvp-soap/currency-codes#paypal */ currencies: ['aud', 'cad', 'eur', 'usd'], /* * Periods for recurring payments * x means donation, not subscription */ periods: ['w', 'm', '3m', '6m', 'y', 'x'], periodLabels: { w: 'Weekly', m: 'Monthly', '3m': 'Quarterly', '6m': 'Half-yearly', y: 'Yearly', x: 'One time only', }, /* * Variables to set in the form * https://developer.paypal.com/api/nvp-soap/paypal-payments-standard/integration-guide/Appx-websitestandard-htmlvariables/ */ vars: { // Subscribe form subscribe: { /* * This value indicates it is a subscribe button that was clicked */ cmd: '_xclick-subscriptions', /* * Item name as shown to the user * * Will be replaced with the translated value at run time, but this is * here as a safe default. */ item_name: 'FreeSewing Patron Subscription', /* * Return URL the user will be redirected to after completion * of the payment. */ return: 'https://freesewing.org/patrons/thanks', /* * This needs to be set to 1 to indicate that recurring * payments should be collected. */ src: 1, }, // Donate form donate: { /* * This value indicates it is a donate button that was clicked */ cmd: '_donations', /* * Item name as shown to the user * * Will be replaced with the translated value at run time, but this is * here as a safe default. */ item_name: 'FreeSewing Donation', /* * Return URL the user will be redirected to after completion * of the payment. */ return: 'https://freesewing.org/donate/thanks', }, // Included in both forms shared: { /* * This is required. It is the email address tied to FreeSewing's PayPal account. */ business: 'info@freesewing.org', /* * Do not let users include a note. It just clutters up the UI. */ no_note: 1, /* * This setting means the user will be redirected using GET * without any payment variables included. It's the cleanest UI. */ rm: 1, /* * Image to display on the PayPal checkkout page * Should be 150x50 pixels (which is small) */ image_url: 'https://data.freesewing.org/static/img/paypal-logo.png', }, }, }