feat: tiktok changes to be in their terms and services
This commit is contained in:
Nevo David
parent
208f522f0d
commit
d83806350b
|
|
@ -16,7 +16,7 @@ export const useCustomProviderFunction = () => {
|
|||
}),
|
||||
});
|
||||
|
||||
if (load.status !== 200 && load.status !== 201) {
|
||||
if (load.status > 299 && load.status < 200) {
|
||||
throw new Error('Failed to fetch');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import { TikTokDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settin
|
|||
import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
|
||||
import { Select } from '@gitroom/react/form/select';
|
||||
import { useCustomProviderFunction } from '@gitroom/frontend/components/launches/helpers/use.custom.provider.function';
|
||||
import { Checkbox } from '@gitroom/react/form/checkbox';
|
||||
import clsx from 'clsx';
|
||||
|
||||
const privacyLevel = [
|
||||
{
|
||||
|
|
@ -103,13 +105,16 @@ const CheckTikTokValidity: FC<{ picture: string }> = (props) => {
|
|||
};
|
||||
|
||||
const TikTokSettings: FC<{ values?: any }> = (props) => {
|
||||
const { register, control } = useSettings();
|
||||
const { watch, register, formState, control } = useSettings();
|
||||
const disclose = watch('disclose');
|
||||
const brand_organic_toggle = watch('brand_organic_toggle');
|
||||
const brand_content_toggle = watch('brand_content_toggle');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<CheckTikTokValidity picture={props?.values?.[0]?.image?.[0]?.path} />
|
||||
<Select
|
||||
label="Privacy Level"
|
||||
label="Who can see this video?"
|
||||
{...register('privacy_level', {
|
||||
value: 'PUBLIC_TO_EVERYONE',
|
||||
})}
|
||||
|
|
@ -121,79 +126,115 @@ const TikTokSettings: FC<{ values?: any }> = (props) => {
|
|||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<Select
|
||||
label="Disable Duet"
|
||||
{...register('disable_duet', {
|
||||
value: 'false',
|
||||
setValueAs: (value) => value === 'true',
|
||||
})}
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{yesNo.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<Select
|
||||
label="Disable Stitch"
|
||||
{...register('disable_stitch', {
|
||||
value: 'false',
|
||||
setValueAs: (value) => value === 'true',
|
||||
})}
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{yesNo.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<hr className="mb-[15px] border-tableBorder" />
|
||||
<div className="text-[14px] mb-[10px]">Allow User To:</div>
|
||||
<div className="flex gap-[40px]">
|
||||
<Checkbox
|
||||
label="Duet"
|
||||
{...register('duet', {
|
||||
value: false,
|
||||
})}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Stitch"
|
||||
{...register('stitch', {
|
||||
value: false,
|
||||
})}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Comments"
|
||||
{...register('comment', {
|
||||
value: false,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<hr className="my-[15px] mb-[25px] border-tableBorder" />
|
||||
<div className="flex flex-col">
|
||||
<Checkbox
|
||||
label="Disclose Video Content"
|
||||
{...register('disclose', {
|
||||
value: false,
|
||||
})}
|
||||
/>
|
||||
{disclose && (
|
||||
<div className="bg-tableBorder p-[10px] mt-[10px] rounded-[10px] flex gap-[20px] items-center">
|
||||
<div>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M22.201 17.6335L14.0026 3.39569C13.7977 3.04687 13.5052 2.75764 13.1541 2.55668C12.803 2.35572 12.4055 2.25 12.001 2.25C11.5965 2.25 11.199 2.35572 10.8479 2.55668C10.4968 2.75764 10.2043 3.04687 9.99944 3.39569L1.80101 17.6335C1.60388 17.9709 1.5 18.3546 1.5 18.7454C1.5 19.1361 1.60388 19.5199 1.80101 19.8572C2.00325 20.2082 2.29523 20.499 2.64697 20.6998C2.99871 20.9006 3.39755 21.0043 3.80257 21.0001H20.1994C20.6041 21.0039 21.0026 20.9001 21.354 20.6993C21.7054 20.4985 21.997 20.2079 22.1991 19.8572C22.3965 19.52 22.5007 19.1364 22.5011 18.7456C22.5014 18.3549 22.3978 17.9711 22.201 17.6335ZM11.251 9.75006C11.251 9.55115 11.33 9.36038 11.4707 9.21973C11.6113 9.07908 11.8021 9.00006 12.001 9.00006C12.1999 9.00006 12.3907 9.07908 12.5313 9.21973C12.672 9.36038 12.751 9.55115 12.751 9.75006V13.5001C12.751 13.699 12.672 13.8897 12.5313 14.0304C12.3907 14.171 12.1999 14.2501 12.001 14.2501C11.8021 14.2501 11.6113 14.171 11.4707 14.0304C11.33 13.8897 11.251 13.699 11.251 13.5001V9.75006ZM12.001 18.0001C11.7785 18.0001 11.561 17.9341 11.376 17.8105C11.191 17.6868 11.0468 17.5111 10.9616 17.3056C10.8765 17.1 10.8542 16.8738 10.8976 16.6556C10.941 16.4374 11.0482 16.2369 11.2055 16.0796C11.3628 15.9222 11.5633 15.8151 11.7815 15.7717C11.9998 15.7283 12.226 15.7505 12.4315 15.8357C12.6371 15.9208 12.8128 16.065 12.9364 16.25C13.06 16.4351 13.126 16.6526 13.126 16.8751C13.126 17.1734 13.0075 17.4596 12.7965 17.6706C12.5855 17.8815 12.2994 18.0001 12.001 18.0001Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
Your video will be labeled {'"'}Promotional Content{'"'}.<br />
|
||||
This cannot be changed once your video is posted.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-[14px] my-[10px] text-balance">
|
||||
Turn on to disclose that this video promotes good or services in
|
||||
exchange for something of value. You video could promote yourself, a
|
||||
third party, or both.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
label="Disable Comments"
|
||||
{...register('disable_comment', {
|
||||
value: 'false',
|
||||
setValueAs: (value) => value === 'true',
|
||||
})}
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{yesNo.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
label="Is Partnership?"
|
||||
{...register('brand_content_toggle', {
|
||||
value: 'false',
|
||||
setValueAs: (value) => value === 'true',
|
||||
})}
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{yesNo.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
label="For my brand?"
|
||||
{...register('brand_organic_toggle', {
|
||||
value: 'true',
|
||||
setValueAs: (value) => value === 'true',
|
||||
})}
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{yesNo.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
<div className={clsx(!disclose && 'invisible')}>
|
||||
<Checkbox
|
||||
label="Your brand"
|
||||
{...register('brand_organic_toggle', {
|
||||
value: false,
|
||||
})}
|
||||
/>
|
||||
<div className="text-balance my-[10px] text-[14px]">
|
||||
You are promoting yourself or your own brand.
|
||||
<br />
|
||||
This video will be classified as Brand Organic.
|
||||
</div>
|
||||
<Checkbox
|
||||
label="Branded content"
|
||||
{...register('brand_content_toggle', {
|
||||
value: false,
|
||||
})}
|
||||
/>
|
||||
<div className="text-balance my-[10px] text-[14px]">
|
||||
You are promoting another brand or a third party.
|
||||
<br />
|
||||
This video will be classified as Branded Content.
|
||||
</div>
|
||||
{(brand_organic_toggle || brand_content_toggle) && (
|
||||
<div className="my-[10px] text-[14px] text-balance">
|
||||
By posting, you agree to TikTok{"'"}s{' '}
|
||||
{[
|
||||
brand_organic_toggle || brand_content_toggle ? (
|
||||
<a
|
||||
target="_blank"
|
||||
className="text-[#B69DEC] hover:underline"
|
||||
href="https://www.tiktok.com/legal/page/global/music-usage-confirmation/en"
|
||||
>
|
||||
Music Usage Confirmation
|
||||
</a>
|
||||
) : undefined,
|
||||
brand_content_toggle ? <> and </> : undefined,
|
||||
brand_content_toggle ? (
|
||||
<a
|
||||
target="_blank"
|
||||
className="text-[#B69DEC] hover:underline"
|
||||
href="https://www.tiktok.com/legal/page/global/bc-policy/en"
|
||||
>
|
||||
Branded Content Policy
|
||||
</a>
|
||||
) : undefined,
|
||||
].filter((f) => f)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@ export class TikTokDto {
|
|||
| 'SELF_ONLY';
|
||||
|
||||
@IsBoolean()
|
||||
disable_duet: boolean;
|
||||
duet: boolean;
|
||||
|
||||
@IsBoolean()
|
||||
disable_stitch: boolean;
|
||||
stitch: boolean;
|
||||
|
||||
@IsBoolean()
|
||||
disable_comment: boolean;
|
||||
comment: boolean;
|
||||
|
||||
@IsBoolean()
|
||||
brand_content_toggle: boolean;
|
||||
|
|
|
|||
|
|
@ -188,9 +188,9 @@ export class TiktokProvider extends SocialAbstract implements SocialProvider {
|
|||
post_info: {
|
||||
title: firstPost.message,
|
||||
privacy_level: firstPost.settings.privacy_level,
|
||||
disable_duet: firstPost.settings.disable_duet,
|
||||
disable_comment: firstPost.settings.disable_comment,
|
||||
disable_stitch: firstPost.settings.disable_stitch,
|
||||
disable_duet: !firstPost.settings.duet,
|
||||
disable_comment: !firstPost.settings.comment,
|
||||
disable_stitch: !firstPost.settings.stitch,
|
||||
brand_content_toggle: firstPost.settings.brand_content_toggle,
|
||||
brand_organic_toggle: firstPost.settings.brand_organic_toggle,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,63 +1,50 @@
|
|||
'use client';
|
||||
import { FC, forwardRef, useCallback, useState } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Image from 'next/image';
|
||||
import { useFormContext, useWatch } from 'react-hook-form';
|
||||
|
||||
export const Checkbox = forwardRef<null, {
|
||||
checked?: boolean;
|
||||
disableForm?: boolean;
|
||||
name?: string;
|
||||
className?: string;
|
||||
onChange?: (event: { target: { name?: string, value: boolean } }) => void;
|
||||
variant?: 'default' | 'hollow';
|
||||
}>((props, ref: any) => {
|
||||
const { checked, className, disableForm, variant } = props;
|
||||
import { DetailedHTMLProps, FC, InputHTMLAttributes, useMemo } from 'react';
|
||||
import { clsx } from 'clsx';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import interClass from '../helpers/inter.font';
|
||||
import { RegisterOptions } from 'react-hook-form/dist/types/validator';
|
||||
|
||||
export const Checkbox: FC<
|
||||
DetailedHTMLProps<
|
||||
InputHTMLAttributes<HTMLInputElement>,
|
||||
HTMLInputElement
|
||||
> & {
|
||||
error?: any;
|
||||
extraForm?: RegisterOptions<any>;
|
||||
disableForm?: boolean;
|
||||
label: string;
|
||||
name: string;
|
||||
hideErrors?: boolean;
|
||||
}
|
||||
> = (props) => {
|
||||
const {
|
||||
label,
|
||||
className,
|
||||
hideErrors,
|
||||
disableForm,
|
||||
error,
|
||||
extraForm,
|
||||
name,
|
||||
...rest
|
||||
} = props;
|
||||
const form = useFormContext();
|
||||
const register = disableForm ? {} : form.register(props.name!);
|
||||
|
||||
const watch = disableForm ? undefined : useWatch({
|
||||
name: props.name!,
|
||||
});
|
||||
|
||||
const [currentStatus, setCurrentStatus] = useState(watch || checked);
|
||||
const changeStatus = useCallback(() => {
|
||||
setCurrentStatus(!currentStatus);
|
||||
props?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
|
||||
if (!disableForm) {
|
||||
// @ts-ignore
|
||||
register?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
|
||||
}
|
||||
}, [currentStatus]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
{...register}
|
||||
onClick={changeStatus}
|
||||
className={clsx(
|
||||
'cursor-pointer rounded-[4px] select-none w-[24px] h-[24px] justify-center items-center flex',
|
||||
variant === 'default' || !variant ? ('bg-forth') : ('border-customColor1 border-2 bg-customColor2'),
|
||||
className
|
||||
)}
|
||||
>
|
||||
{currentStatus && (
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
<div className={clsx("flex flex-col", label ? 'gap-[6px]' : '')}>
|
||||
<label className="flex items-center gap-[8px]">
|
||||
<input
|
||||
type="checkbox"
|
||||
{...(disableForm ? {} : form.register(name, extraForm))}
|
||||
className={clsx(
|
||||
'bg-input outline-none border-fifth border rounded-[4px]',
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
<span className={`${interClass} text-[14px]`}>{label}</span>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue