import AccordianItem from './accordian-item' import { Col, InputGroup, Row, Form as BootstrapForm, Badge } from 'react-bootstrap' import { Checkbox, CheckboxGroup, Form, Input, MarkdownInput } from './form' import FeeButton, { FeeButtonProvider } from './fee-button' import { gql, useApolloClient, useMutation } from '@apollo/client' import { useCallback, useMemo, useState } from 'react' import { useRouter } from 'next/router' import { MAX_TERRITORY_DESC_LENGTH, POST_TYPES, TERRITORY_BILLING_OPTIONS, TERRITORY_PERIOD_COST } from '../lib/constants' import { territorySchema } from '../lib/validate' import { useMe } from './me' import Info from './info' import { abbrNum } from '../lib/format' import { purchasedType } from '../lib/territory' export default function TerritoryForm ({ sub }) { const router = useRouter() const client = useApolloClient() const me = useMe() const [upsertSub] = useMutation( gql` mutation upsertSub($oldName: String, $name: String!, $desc: String, $baseCost: Int!, $postTypes: [String!]!, $allowFreebies: Boolean!, $billingType: String!, $billingAutoRenew: Boolean!, $moderated: Boolean!, $hash: String, $hmac: String, $nsfw: Boolean!) { upsertSub(oldName: $oldName, name: $name, desc: $desc, baseCost: $baseCost, postTypes: $postTypes, allowFreebies: $allowFreebies, billingType: $billingType, billingAutoRenew: $billingAutoRenew, moderated: $moderated, hash: $hash, hmac: $hmac, nsfw: $nsfw) { name } }` ) const onSubmit = useCallback( async ({ ...variables }) => { const { error } = await upsertSub({ variables: { oldName: sub?.name, ...variables } }) if (error) { throw new Error({ message: error.toString() }) } // modify graphql cache to include new sub client.cache.modify({ fields: { subs (existing = []) { const filtered = existing.filter(s => s.name !== variables.name && s.name !== sub?.name) return [ ...filtered, { __typename: 'Sub', name: variables.name }] } } }) await router.push(`/~${variables.name}`) }, [client, upsertSub, router] ) const [billing, setBilling] = useState((sub?.billingType || 'MONTHLY').toLowerCase()) const lineItems = useMemo(() => { const lines = { territory: TERRITORY_BILLING_OPTIONS('first')[billing] } if (!sub) return lines // we are changing billing type so prorate the change if (sub?.billingType?.toLowerCase() !== billing) { const alreadyBilled = TERRITORY_PERIOD_COST(purchasedType(sub)) lines.paid = { term: `- ${abbrNum(alreadyBilled)} sats`, label: 'already paid', modifier: cost => cost - alreadyBilled } return lines } }, [sub, billing]) return (
~} /> sats} /> {sub?.billingType !== 'ONCE' && <> billing {sub && sub.billingType !== 'ONCE' && You will be credited what you paid for your current billing period when you change your billing period to a longer duration. If you change from yearly to monthly, when your year ends, your monthly billing will begin. } } name='billing' groupClassName={billing !== 'once' ? 'mb-0' : ''} > checked && setBilling('monthly')} groupClassName='ms-1 mb-0' /> checked && setBilling('yearly')} groupClassName='ms-1 mb-0' /> checked && setBilling('once')} groupClassName='ms-1 mb-0' /> {billing !== 'once' && } } options} body={ <> moderation enable moderation
  1. Outlaw posts and comments with a click
  2. Your territory will get a moderated badge
} name='moderated' groupClassName='ms-1' /> nsfw mark as nsfw
  1. Let stackers know that your territory may contain explicit content
  2. Your territory will get a nsfw badge
} name='nsfw' groupClassName='ms-1' /> } />
) }