-
- {secondButtonLabel && (
-
);
diff --git a/src/components/common/CountryPickerModal.async.tsx b/src/components/common/CountryPickerModal.async.tsx
new file mode 100644
index 000000000..9d34243ad
--- /dev/null
+++ b/src/components/common/CountryPickerModal.async.tsx
@@ -0,0 +1,18 @@
+import type { FC } from '../../lib/teact/teact';
+import React from '../../lib/teact/teact';
+
+import type { OwnProps } from './CountryPickerModal';
+
+import { Bundles } from '../../util/moduleLoader';
+
+import useModuleLoader from '../../hooks/useModuleLoader';
+
+const CountryPickerModalAsync: FC
+
+
+
+
+
+
+ + {lang('BoostingSelectCountry')} +
+
+
+
+
+
+
+ {country.defaultName}
;
+ } else if (isUserId(id)) {
+ return
{isSearchable && (
@@ -194,11 +218,7 @@ const Picker: FC = ({
ripple
>
{!isRoundCheckbox ? renderCheckbox() : undefined}
- {isUserId(id) ? (
- = (props) => {
+ const { isOpen } = props;
+ const AppendEntityPickerModal = useModuleLoader(Bundles.Extra, 'AppendEntityPickerModal', !isOpen);
+
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return AppendEntityPickerModal ? ;
+ userStatusesById: Record;
+ channelList?: (ApiChat | undefined)[] | undefined;
+ isChannel?: boolean;
+ currentUserId?: string | undefined;
+}
+
+const AppendEntityPickerModal: FC = ({
+ chatId,
+ isOpen,
+ onClose,
+ members,
+ adminMembersById,
+ userStatusesById,
+ entityType,
+ isChannel,
+ onSubmit,
+ currentUserId,
+ selectionLimit,
+}) => {
+ const { showNotification } = getActions();
+
+ const lang = useLang();
+ const [isConfirmModalOpen, openConfirmModal, closeConfirmModal] = useFlag();
+
+ const [selectedChannelIds, setSelectedChannelIds] = useState([]);
+ const [selectedMemberIds, setSelectedMemberIds] = useState([]);
+ const [pendingChannelId, setPendingChannelId] = useState(undefined);
+ const [searchQuery, setSearchQuery] = useState('');
+
+ const channelsIds = useMemo(() => {
+ const chatsById = getGlobal().chats.byId;
+ const activeChatIds = getGlobal().chats.listIds.active;
+
+ return activeChatIds!.map((id) => chatsById[id])
+ .filter((chat) => chat && isChatChannel(chat) && chat.id !== chatId)
+ .map((chat) => chat!.id);
+ }, [chatId]);
+
+ const adminIds = useMemo(() => {
+ return adminMembersById && Object.keys(adminMembersById);
+ }, [adminMembersById]);
+
+ const memberIds = useMemo(() => {
+ const usersById = getGlobal().users.byId;
+ if (!members || !usersById) {
+ return [];
+ }
+
+ const userIds = sortUserIds(
+ members.map(({ userId }) => userId),
+ usersById,
+ userStatusesById,
+ );
+
+ return adminIds ? userIds.filter((userId) => userId !== currentUserId) : userIds;
+ }, [adminIds, currentUserId, members, userStatusesById]);
+
+ const displayedMembersIds = useMemo(() => {
+ const usersById = getGlobal().users.byId;
+ const filteredContactIds = memberIds ? filterUsersByName(memberIds, usersById, searchQuery) : [];
+
+ return sortChatIds(unique(filteredContactIds).filter((userId) => {
+ const user = usersById[userId];
+ if (!user) {
+ return true;
+ }
+
+ return !isUserBot(user);
+ }));
+ }, [memberIds, searchQuery]);
+
+ const displayedChannelIds = useMemo(() => {
+ const chatsById = getGlobal().chats.byId;
+ const foundChannelIds = channelsIds ? filterChatsByName(lang, channelsIds, chatsById, searchQuery) : [];
+
+ return sortChatIds(unique(foundChannelIds).filter((contactId) => {
+ const chat = chatsById[contactId];
+ if (!chat) {
+ return true;
+ }
+
+ return isChannel;
+ }),
+ false,
+ selectedChannelIds);
+ }, [channelsIds, lang, searchQuery, selectedChannelIds, isChannel]);
+
+ const handleCloseButtonClick = useLastCallback(() => {
+ onSubmit([]);
+ onClose();
+ });
+
+ const handleSendIdList = useLastCallback(() => {
+ onSubmit(entityType === 'members' ? selectedMemberIds : selectedChannelIds);
+ onClose();
+ });
+
+ const confirmPrivateLinkChannelSelection = useLastCallback(() => {
+ if (pendingChannelId) {
+ setSelectedChannelIds((prevIds) => unique([...prevIds, pendingChannelId]));
+ }
+ closeConfirmModal();
+ });
+
+ const handleSelectedMembersChange = useLastCallback((newSelectedIds: string[]) => {
+ if (newSelectedIds.length > selectionLimit) {
+ showNotification({
+ message: lang('BoostingSelectUpToWarningUsers', selectionLimit),
+ });
+ return;
+ }
+ setSelectedMemberIds(newSelectedIds);
+ });
+
+ const handleSelectedChannelIdsChange = useLastCallback((newSelectedIds: string[]) => {
+ const chatsById = getGlobal().chats.byId;
+ const newlyAddedIds = newSelectedIds.filter((id) => !selectedChannelIds.includes(id));
+ const privateLinkChannelId = newlyAddedIds.find((id) => {
+ const chat = chatsById[id];
+ return chat && !isChatPublic(chat);
+ });
+
+ if (selectedChannelIds?.length >= selectionLimit) {
+ showNotification({
+ message: lang('BoostingSelectUpToWarningChannelsPlural', selectionLimit),
+ });
+ return;
+ }
+
+ if (privateLinkChannelId) {
+ setPendingChannelId(privateLinkChannelId);
+ openConfirmModal();
+ } else {
+ setSelectedChannelIds(newSelectedIds);
+ }
+ });
+
+ const handleClose = useLastCallback(() => {
+ onSubmit([]);
+ onClose();
+ });
+
+ function renderSearchField() {
+ return (
+
+
+ );
+};
+
+export default memo(withGlobal((global, { chatId, entityType }): StateProps => {
+ const { statusesById: userStatusesById } = global.users;
+ let isChannel;
+ let members: ApiChatMember[] | undefined;
+ let adminMembersById: Record | undefined;
+ let currentUserId: string | undefined;
+
+ if (entityType === 'members') {
+ currentUserId = global.currentUserId;
+ const chatFullInfo = chatId ? selectChatFullInfo(global, chatId) : undefined;
+ if (chatFullInfo) {
+ members = chatFullInfo.members;
+ adminMembersById = chatFullInfo.adminMembersById;
+ }
+ } else if (entityType === 'channels') {
+ const chat = chatId ? selectChat(global, chatId) : undefined;
+ if (chat) {
+ isChannel = isChatChannel(chat);
+ }
+ }
+
+ return {
+ chatId,
+ members,
+ adminMembersById,
+ userStatusesById,
+ isChannel,
+ currentUserId,
+ };
+})(AppendEntityPickerModal));
diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
index ec22420d1..ae83b08c5 100644
--- a/src/components/main/Main.tsx
+++ b/src/components/main/Main.tsx
@@ -101,6 +101,7 @@ import InviteViaLinkModal from './InviteViaLinkModal.async';
import NewContactModal from './NewContactModal.async';
import Notifications from './Notifications.async';
import PremiumLimitReachedModal from './premium/common/PremiumLimitReachedModal.async';
+import GiveawayModal from './premium/GiveawayModal.async';
import PremiumMainModal from './premium/PremiumMainModal.async';
import SafeLinkModal from './SafeLinkModal.async';
@@ -156,6 +157,8 @@ type StateProps = {
isPaymentModalOpen?: boolean;
isReceiptModalOpen?: boolean;
isReactionPickerOpen: boolean;
+ isAppendModalOpen?: boolean;
+ isGiveawayModalOpen?: boolean;
isCurrentUserPremium?: boolean;
chatlistModal?: TabState['chatlistModal'];
boostModal?: TabState['boostModal'];
@@ -214,6 +217,7 @@ const Main: FC = ({
currentUserName,
urlAuth,
isPremiumModalOpen,
+ isGiveawayModalOpen,
isPaymentModalOpen,
isReceiptModalOpen,
isReactionPickerOpen,
@@ -595,7 +599,8 @@ const Main: FC = ({
(
newContact,
ratingPhoneCall,
premiumModal,
+ giveawayModal,
isMasterTab,
payment,
limitReachedModal,
@@ -703,6 +709,7 @@ export default memo(withGlobal(
urlAuth,
isCurrentUserPremium: selectIsCurrentUserPremium(global),
isPremiumModalOpen: premiumModal?.isOpen,
+ isGiveawayModalOpen: giveawayModal?.isOpen,
limitReached: limitReachedModal?.limit,
isPaymentModalOpen: payment.isPaymentModalOpen,
isReceiptModalOpen: Boolean(payment.receipt),
diff --git a/src/components/main/premium/GiftPremiumModal.tsx b/src/components/main/premium/GiftPremiumModal.tsx
index 9c5c2f8aa..d556cb7b2 100644
--- a/src/components/main/premium/GiftPremiumModal.tsx
+++ b/src/components/main/premium/GiftPremiumModal.tsx
@@ -15,7 +15,6 @@ import {
import { formatCurrency } from '../../../util/formatCurrency';
import renderText from '../../common/helpers/renderText';
-import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
import useLang from '../../../hooks/useLang';
import Avatar from '../../common/Avatar';
@@ -45,31 +44,28 @@ const GiftPremiumModal: FC = ({
const { openPremiumModal, closeGiftPremiumModal, openUrl } = getActions();
const lang = useLang();
- const renderedUser = useCurrentOrPrev(user, true);
- const renderedGifts = useCurrentOrPrev(gifts, true);
const [selectedOption, setSelectedOption] = useState();
- const firstGift = renderedGifts?.[0];
const fullMonthlyAmount = useMemo(() => {
- if (!renderedGifts || renderedGifts.length === 0 || !firstGift) {
+ if (!gifts?.length) {
return undefined;
}
- const basicGift = renderedGifts.reduce((acc, gift) => {
- return gift.months < firstGift.months ? gift : firstGift;
- }, firstGift);
+ const basicGift = gifts.reduce((acc, gift) => {
+ return gift.months < acc.months ? gift : acc;
+ });
return Math.floor(basicGift.amount / basicGift.months);
- }, [firstGift, renderedGifts]);
+ }, [gifts]);
useEffect(() => {
- if (isOpen) {
- setSelectedOption(firstGift?.months);
+ if (isOpen && gifts?.length) {
+ setSelectedOption(gifts[0].months);
}
- }, [firstGift?.months, isOpen]);
+ }, [gifts, isOpen]);
const selectedGift = useMemo(() => {
- return renderedGifts?.find((gift) => gift.months === selectedOption);
- }, [renderedGifts, selectedOption]);
+ return gifts?.find((gift) => gift.months === selectedOption);
+ }, [gifts, selectedOption]);
const handleSubmit = useCallback(() => {
if (!selectedGift) {
@@ -121,7 +117,7 @@ const GiftPremiumModal: FC = ({
= ({
+
+
+ );
+ }
+
+ return (
+ {lang(entityType === 'channels' + ? 'RequestPeer.ChooseChannelTitle' : 'BoostingAwardSpecificUsers')} +
+
+ {renderSearchField()}
+
+
+
+
+
+
+ {renderText( - lang('GiftTelegramPremiumDescription', getUserFirstOrLastName(renderedUser)), + lang('GiftTelegramPremiumDescription', getUserFirstOrLastName(user)), ['emoji', 'simple_markdown'], )}
- {renderedGifts?.map((gift) => (
+ {gifts?.map((gift) => (
= (props) => {
+ const { isOpen } = props;
+ const GiveawayModal = useModuleLoader(Bundles.Extra, 'GiveawayModal', !isOpen);
+
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return GiveawayModal ? = ({
+ chatId,
+ gifts,
+ isOpen,
+ selectedMemberList,
+ selectedChannelList,
+ giveawayBoostPerPremiumLimit = GIVEAWAY_BOOST_PER_PREMIUM,
+ countryList,
+ prepaidGiveaway,
+ countrySelectionLimit = GIVEAWAY_MAX_ADDITIONAL_COUNTRIES,
+ userSelectionLimit = GIVEAWAY_MAX_ADDITIONAL_USERS,
+}) => {
+ // eslint-disable-next-line no-null/no-null
+ const dialogRef = useRef(null);
+ const {
+ closeGiveawayModal, openInvoice, openPremiumModal,
+ launchPrepaidGiveaway,
+ } = getActions();
+
+ const lang = useLang();
+ const [isCalendarOpened, openCalendar, closeCalendar] = useFlag();
+ const [isCountryPickerModalOpen, openCountryPickerModal, closeCountryPickerModal] = useFlag();
+ const [isConfirmModalOpen, openConfirmModal, closeConfirmModal] = useFlag();
+ const [isEntityPickerModalOpen, openEntityPickerModal, closeEntityPickerModal] = useFlag();
+ const [entityType, setEntityType] = useState<'members' | 'channels' | undefined>(undefined);
+
+ const TYPE_OPTIONS: TypeOption[] = [{
+ name: 'BoostingCreateGiveaway',
+ text: 'BoostingWinnersRandomly',
+ value: 'random_users',
+ img: GiftBlueRound,
+ actions: 'createRandomlyUsers',
+ isLink: false,
+ }, {
+ name: 'BoostingAwardSpecificUsers',
+ text: 'BoostingSelectRecipients',
+ value: 'specific_users',
+ img: GiveawayUsersRound,
+ actions: 'createSpecificUsers',
+ isLink: true,
+ onClickAction: () => {
+ openEntityPickerModal();
+ setEntityType('members');
+ },
+ }];
+
+ const [customExpireDate, setCustomExpireDate] = useState(Date.now() + DEFAULT_CUSTOM_EXPIRE_DATE);
+ const [isHeaderHidden, setHeaderHidden] = useState(true);
+ const [selectedUserCount, setSelectedUserCount] = useState(DEFAULT_BOOST_COUNT);
+ const [selectedGiveawayOption, setGiveawayOption] = useState(TYPE_OPTIONS[0].value);
+ const [selectedSubscriberOption, setSelectedSubscriberOption] = useState('all');
+ const [selectedMonthOption, setSelectedMonthOption] = useState();
+ const [selectedUserIds, setSelectedUserIds] = useState([]);
+ const [selectedChannelIds, setSelectedChannelIds] = useState([]);
+ const [selectedCountriesIds, setSelectedCountriesIds] = useState([]);
+ const [shouldShowWinners, setShouldShowWinners] = useState(false);
+ const [shouldShowPrizes, setShouldShowPrizes] = useState(false);
+ const [prizeDescription, setPrizeDescription] = useState(undefined);
+ const [dataPrepaidGiveaway, setDataPrepaidGiveaway] = useState(undefined);
+ const boostQuantity = selectedUserCount * giveawayBoostPerPremiumLimit;
+ const isRandomUsers = selectedGiveawayOption === 'random_users';
+
+ const SUBSCRIBER_OPTIONS = useMemo(() => [
+ {
+ value: 'all',
+ label: lang('BoostingAllSubscribers'),
+ subLabel: selectedCountriesIds && selectedCountriesIds.length > 0
+ ? lang('Giveaway.ReceiverType.Countries', selectedCountriesIds.length)
+ : lang('BoostingFromAllCountries'),
+ },
+ {
+ value: 'new',
+ label: lang('BoostingNewSubscribers'),
+ subLabel: selectedCountriesIds && selectedCountriesIds.length > 0
+ ? lang('Giveaway.ReceiverType.Countries', selectedCountriesIds.length)
+ : lang('BoostingFromAllCountries'),
+ },
+ ], [lang, selectedCountriesIds]);
+
+ const monthQuantity = lang('Months', selectedMonthOption);
+
+ const selectedGift = useMemo(() => {
+ return gifts!.find((gift) => gift.months === selectedMonthOption && gift.users === selectedUserCount);
+ }, [gifts, selectedMonthOption, selectedUserCount]);
+
+ const filteredGifts = useMemo(() => {
+ return gifts?.filter((gift) => gift.users
+ === (selectedUserIds?.length ? selectedUserIds?.length : selectedUserCount));
+ }, [gifts, selectedUserIds, selectedUserCount]);
+
+ const fullMonthlyAmount = useMemo(() => {
+ if (!filteredGifts?.length) {
+ return undefined;
+ }
+
+ const basicGift = filteredGifts.reduce((acc, gift) => {
+ return gift.amount < acc.amount ? gift : acc;
+ });
+
+ return Math.floor(basicGift.amount / basicGift.months);
+ }, [filteredGifts]);
+
+ const userCountOptions = useMemo(() => {
+ const uniqueUserCounts = new Set(gifts?.map((gift) => gift.users));
+ return Array.from(uniqueUserCounts).sort((a, b) => a - b);
+ }, [gifts]);
+
+ useEffect(() => {
+ if (isOpen) {
+ setSelectedMonthOption(prepaidGiveaway ? prepaidGiveaway.months : gifts?.[0].months);
+ }
+ }, [gifts, isOpen, prepaidGiveaway]);
+
+ useEffect(() => {
+ if (prepaidGiveaway) {
+ setSelectedUserCount(prepaidGiveaway.quantity);
+ setDataPrepaidGiveaway(prepaidGiveaway);
+ }
+ }, [prepaidGiveaway]);
+
+ useEffect(() => {
+ if (selectedMemberList) {
+ setSelectedUserIds(selectedMemberList);
+ }
+ }, [selectedMemberList]);
+
+ useEffect(() => {
+ if (selectedChannelList) {
+ setSelectedChannelIds(selectedChannelList);
+ }
+ }, [selectedChannelList]);
+
+ const handlePremiumClick = useLastCallback(() => {
+ openPremiumModal();
+ });
+
+ const handleClick = useLastCallback(() => {
+ if (selectedUserIds?.length) {
+ openInvoice({
+ type: 'giftcode',
+ boostChannelId: chatId!,
+ userIds: selectedUserIds,
+ currency: selectedGift!.currency,
+ amount: selectedGift!.amount,
+ option: selectedGift!,
+ });
+ } else {
+ openInvoice({
+ type: 'giveaway',
+ chatId: chatId!,
+ additionalChannelIds: selectedChannelIds,
+ isOnlyForNewSubscribers: selectedSubscriberOption === 'new',
+ countries: selectedCountriesIds,
+ areWinnersVisible: shouldShowWinners,
+ prizeDescription,
+ untilDate: customExpireDate / 1000,
+ currency: selectedGift!.currency,
+ amount: selectedGift!.amount,
+ option: selectedGift!,
+ });
+ }
+
+ closeGiveawayModal();
+ });
+
+ const confirmLaunchPrepaidGiveaway = useLastCallback(() => {
+ launchPrepaidGiveaway({
+ chatId: chatId!,
+ giveawayId: dataPrepaidGiveaway!.id,
+ paymentPurpose: {
+ additionalChannelIds: selectedChannelIds,
+ countries: selectedCountriesIds,
+ prizeDescription,
+ areWinnersVisible: shouldShowWinners,
+ untilDate: customExpireDate / 1000,
+ currency: selectedGift!.currency,
+ amount: selectedGift!.amount,
+ },
+ });
+
+ closeConfirmModal();
+ closeGiveawayModal();
+ });
+
+ const handleUserCountChange = useLastCallback((newValue) => {
+ setSelectedUserCount(newValue);
+ });
+
+ const handlePrizeDescriptionChange = useLastCallback((e: ChangeEvent) => {
+ setPrizeDescription(e.target.value);
+ });
+
+ const userNames = useMemo(() => {
+ const usersById = getGlobal().users.byId;
+ return selectedUserIds?.map((userId) => getUserFullName(usersById[userId])).join(', ');
+ }, [selectedUserIds]);
+
+ const handleAdd = useLastCallback(() => {
+ openEntityPickerModal();
+ setEntityType('channels');
+ });
+
+ function handleScroll(e: React.UIEvent) {
+ const { scrollTop } = e.currentTarget;
+
+ setHeaderHidden(scrollTop <= 150);
+ }
+
+ const handleChangeSubscriberOption = useLastCallback((value) => {
+ setSelectedSubscriberOption(value);
+ });
+
+ const handleChangeTypeOption = useLastCallback((value: ApiGiveawayType) => {
+ setGiveawayOption(value);
+ setSelectedUserIds([]);
+ });
+
+ const handleExpireDateChange = useLastCallback((date: Date) => {
+ setCustomExpireDate(date.getTime());
+ closeCalendar();
+ });
+
+ const handleSetCountriesListChange = useLastCallback((value: string[]) => {
+ setSelectedCountriesIds(value);
+ });
+
+ const handleSetIdsListChange = useLastCallback((value: string[]) => {
+ return entityType === 'members'
+ ? (value?.length ? setSelectedUserIds(value) : setGiveawayOption('random_users'))
+ : setSelectedChannelIds(value);
+ });
+
+ const handleClose = useLastCallback(() => {
+ closeGiveawayModal();
+ });
+
+ const handleShouldShowWinnersChange = useLastCallback((e: ChangeEvent) => {
+ setShouldShowWinners(e.target.checked);
+ });
+
+ const handleShouldShowPrizesChange = useLastCallback((e: ChangeEvent) => {
+ setShouldShowPrizes(e.target.checked);
+ });
+
+ const onClickActionHandler = useLastCallback(() => {
+ openCountryPickerModal();
+ });
+
+ if (!gifts) return undefined;
+
+ function renderTypeOptions() {
+ return (
+
+
+ );
+};
+
+export default memo(withGlobal((global): StateProps => {
+ const {
+ giveawayModal,
+ } = selectTabState(global);
+
+ return {
+ chatId: giveawayModal?.chatId,
+ gifts: giveawayModal?.gifts,
+ selectedMemberList: giveawayModal?.selectedMemberIds,
+ selectedChannelList: giveawayModal?.selectedChannelIds,
+ giveawayBoostPerPremiumLimit: global.appConfig?.giveawayBoostsPerPremium,
+ userSelectionLimit: global.appConfig?.giveawayAddPeersMax,
+ countrySelectionLimit: global.appConfig?.giveawayCountriesMax,
+ countryList: global.countryList.general,
+ prepaidGiveaway: giveawayModal?.prepaidGiveaway,
+ };
+})(GiveawayModal));
diff --git a/src/components/main/premium/GiveawayTypeOption.module.scss b/src/components/main/premium/GiveawayTypeOption.module.scss
new file mode 100644
index 000000000..ff1120062
--- /dev/null
+++ b/src/components/main/premium/GiveawayTypeOption.module.scss
@@ -0,0 +1,99 @@
+.wrapper {
+ position: relative;
+ display: block;
+ padding-inline: 3.5rem 1rem;
+ border: none;
+ margin-bottom: 0;
+
+ cursor: var(--custom-cursor, pointer);
+
+ line-height: 1.5rem;
+}
+
+.input {
+ position: absolute;
+ z-index: var(--z-below);
+ opacity: 0;
+ &:checked ~ .content {
+ &::before {
+ border-color: var(--color-primary);
+ }
+
+ &::after {
+ opacity: 1;
+ }
+ }
+}
+
+.input:not(:checked) ~ .content.notChecked::before,
+.input:not(:checked) ~ .content.notChecked::after {
+ border-color: transparent;
+ opacity: 0;
+}
+
+.content {
+ display: flex;
+ align-items: center;
+ padding: 0.5rem 0;
+ gap: 1.25rem;
+
+ &::before,
+ &::after {
+ content: "";
+ display: block;
+ position: absolute;
+ inset-inline-start: 1.0625rem;
+ top: 50%;
+ width: 1.25rem;
+ height: 1.25rem;
+ transform: translateY(-50%);
+ }
+
+ &::before {
+ border: 2px solid var(--color-borders-input);
+ border-radius: 50%;
+ background-color: var(--color-background);
+ opacity: 1;
+ transition: border-color 0.1s ease, opacity 0.1s ease;
+ }
+
+ &::after {
+ inset-inline-start: 1.375rem;
+ width: 0.625rem;
+ height: 0.625rem;
+ border-radius: 50%;
+ background: var(--color-primary);
+ opacity: 0;
+ transition: opacity 0.1s ease;
+ }
+}
+
+.giveaway {
+ display: flex;
+ flex-direction: column;
+ font-size: 0.875rem;
+ color: var(--color-text-secondary);
+}
+
+.title {
+ color: var(--color-text);
+ margin-bottom: 0;
+}
+
+.link {
+ display: flex;
+ align-items: center;
+
+ color: var(--color-links);
+}
+
+.optionImg {
+ width: 2.75rem;
+ height: 2.75rem;
+}
+
+@media (max-width: 450px) {
+ .contentText {
+ line-height: 1rem;
+ }
+}
diff --git a/src/components/main/premium/GiveawayTypeOption.tsx b/src/components/main/premium/GiveawayTypeOption.tsx
new file mode 100644
index 000000000..db6eb7c31
--- /dev/null
+++ b/src/components/main/premium/GiveawayTypeOption.tsx
@@ -0,0 +1,90 @@
+import type { ChangeEvent } from 'react';
+import type { FC } from '../../../lib/teact/teact';
+import React, { memo } from '../../../lib/teact/teact';
+
+import buildClassName from '../../../util/buildClassName';
+
+import useLang from '../../../hooks/useLang';
+import useLastCallback from '../../../hooks/useLastCallback';
+
+import Icon from '../../common/Icon';
+
+import styles from './GiveawayTypeOption.module.scss';
+
+type ApiGiveawayType = 'random_users' | 'specific_users';
+
+type OwnProps = {
+ option: ApiGiveawayType;
+ name: string;
+ text: string;
+ img: string;
+ checked?: boolean;
+ isLink: boolean;
+ className?: string;
+ onChange: (value: ApiGiveawayType) => void;
+ onClickAction?: () => void;
+ userNames?: string;
+ selectedMemberIds?: string[];
+};
+
+const GiveawayTypeOption: FC = ({
+ option, checked,
+ name, text, img,
+ isLink, onChange, onClickAction, className,
+ userNames, selectedMemberIds,
+}) => {
+ const lang = useLang();
+
+ let displayText: string | undefined = lang(text);
+ if (isLink && selectedMemberIds?.length) {
+ displayText = selectedMemberIds.length > 2 ? `${selectedMemberIds.length}` : userNames;
+ }
+
+ const handleChange = useLastCallback((e: ChangeEvent) => {
+ if (e.target.checked) {
+ onChange(option);
+ }
+ });
+
+ const handleClick = useLastCallback(() => {
+ onClickAction?.();
+ });
+
+ return (
+
+ );
+};
+
+export default memo(GiveawayTypeOption);
diff --git a/src/components/main/premium/PremiumMainModal.tsx b/src/components/main/premium/PremiumMainModal.tsx
index fab84f77a..f04a9efc4 100644
--- a/src/components/main/premium/PremiumMainModal.tsx
+++ b/src/components/main/premium/PremiumMainModal.tsx
@@ -166,6 +166,7 @@ const PremiumMainModal: FC = ({
if (premiumSlug) {
openInvoice({
+ type: 'slug',
slug: premiumSlug,
});
} else if (premiumBotUsername) {
diff --git a/src/components/main/premium/PremiumSubscriptionOption.module.scss b/src/components/main/premium/PremiumSubscriptionOption.module.scss
index ac70a1067..7c55417e0 100644
--- a/src/components/main/premium/PremiumSubscriptionOption.module.scss
+++ b/src/components/main/premium/PremiumSubscriptionOption.module.scss
@@ -12,6 +12,16 @@
line-height: 1.5rem;
}
+.giveawayWrapper {
+ position: relative;
+ display: block;
+ padding-inline: 3.6875rem 1rem;
+
+ cursor: var(--custom-cursor, pointer);
+
+ line-height: 1.5rem;
+}
+
.active {
box-shadow: 0 0 0 0.125rem var(--color-primary);
}
@@ -108,3 +118,10 @@
margin-inline-end: 0.5rem;
align-self: baseline;
}
+
+.giveawayDiscount {
+ font-size: 0.8125rem;
+ font-weight: 500;
+ border-radius: 0.375rem;
+ padding: 0.1875rem;
+}
diff --git a/src/components/main/premium/PremiumSubscriptionOption.tsx b/src/components/main/premium/PremiumSubscriptionOption.tsx
index 7f510e11b..7f510ac50 100644
--- a/src/components/main/premium/PremiumSubscriptionOption.tsx
+++ b/src/components/main/premium/PremiumSubscriptionOption.tsx
@@ -2,6 +2,8 @@ import type { ChangeEvent } from 'react';
import type { FC } from '../../../lib/teact/teact';
import React, { memo, useCallback, useMemo } from '../../../lib/teact/teact';
+import type { ApiPremiumGiftCodeOption, ApiPremiumGiftOption } from '../../../api/types';
+
import buildClassName from '../../../util/buildClassName';
import { formatCurrency } from '../../../util/formatCurrency';
@@ -10,11 +12,9 @@ import useLang from '../../../hooks/useLang';
import styles from './PremiumSubscriptionOption.module.scss';
type OwnProps = {
- option: {
- months: number;
- currency: string;
- amount: number;
- };
+ option: ApiPremiumGiftOption | ApiPremiumGiftCodeOption;
+ isGiveaway?: boolean;
+ userCount?: number;
checked?: boolean;
fullMonthlyAmount?: number;
className?: string;
@@ -22,11 +22,14 @@ type OwnProps = {
};
const PremiumSubscriptionOption: FC = ({
- option, checked, fullMonthlyAmount, onChange, className,
+ option, checked, fullMonthlyAmount,
+ onChange, className, isGiveaway, userCount,
}) => {
const lang = useLang();
- const { months, amount, currency } = option;
+ const {
+ months, amount, currency,
+ } = option;
const perMonth = Math.floor(amount / months);
const discount = useMemo(() => {
@@ -44,8 +47,8 @@ const PremiumSubscriptionOption: FC = ({
return (
diff --git a/src/components/ui/RadioGroup.module.scss b/src/components/ui/RadioGroup.module.scss
new file mode 100644
index 000000000..c60a23e51
--- /dev/null
+++ b/src/components/ui/RadioGroup.module.scss
@@ -0,0 +1,10 @@
+.wrapper {
+ position: relative;
+ display: block;
+ border: none;
+ margin-bottom: 0;
+
+ cursor: var(--custom-cursor, pointer);
+
+ line-height: 1.5rem;
+}
diff --git a/src/components/ui/RadioGroup.tsx b/src/components/ui/RadioGroup.tsx
index a19ee6e30..416b7e864 100644
--- a/src/components/ui/RadioGroup.tsx
+++ b/src/components/ui/RadioGroup.tsx
@@ -2,12 +2,14 @@ import type { ChangeEvent } from 'react';
import type { FC, TeactNode } from '../../lib/teact/teact';
import React, { memo, useCallback } from '../../lib/teact/teact';
+import useLastCallback from '../../hooks/useLastCallback';
+
import Radio from './Radio';
-export type IRadioOption = {
+export type IRadioOption = {
label: TeactNode;
subLabel?: string;
- value: string;
+ value: T;
hidden?: boolean;
className?: string;
};
@@ -20,6 +22,10 @@ type OwnProps = {
disabled?: boolean;
loadingOption?: string;
onChange: (value: string, event: ChangeEvent) => void;
+ onClickAction?: (value: string) => void;
+ isLink?: boolean;
+ subLabelClassName?: string;
+ subLabel?: string | undefined;
};
const RadioGroup: FC = ({
@@ -30,19 +36,28 @@ const RadioGroup: FC = ({
disabled,
loadingOption,
onChange,
+ onClickAction,
+ subLabelClassName,
+ isLink,
+ subLabel,
}) => {
const handleChange = useCallback((event: ChangeEvent) => {
const { value } = event.currentTarget;
onChange(value, event);
}, [onChange]);
+ const onSubLabelClick = useLastCallback((value: string) => () => {
+ onClickAction?.(value);
+ });
+
return (
= ({ marks, onChange, rangeCount }) => {
+ // eslint-disable-next-line no-null/no-null
+ const sliderRef = useRef(null);
+
+ const fillPercentage = useMemo(() => {
+ return ((marks.indexOf(rangeCount) / (marks.length - 1)) * 100).toFixed(2);
+ }, [marks, rangeCount]);
+
+ const rangeCountIndex = useMemo(() => marks.indexOf(rangeCount), [marks, rangeCount]);
+
+ const rangeValue = useMemo(() => {
+ return marks.indexOf(rangeCount).toString();
+ }, [marks, rangeCount]);
+
+ useLayoutEffect(() => {
+ sliderRef.current!.style.setProperty('--fill-percentage', `${fillPercentage}%`);
+ }, [fillPercentage]);
+
+ const handleChange = (event: ChangeEvent) => {
+ const index = parseInt(event.target.value, 10);
+ const newValue = marks[index];
+ onChange(newValue);
+ };
+
+ return (
+ => {
- const { tabId = getCurrentTabId() } = payload;
- let invoice: ApiInvoice | undefined;
- if ('slug' in payload) {
- invoice = await getPaymentForm(global, { slug: payload.slug }, tabId);
- } else {
- const chat = selectChat(global, payload.chatId);
- if (!chat) {
- return;
- }
+ const { tabId = getCurrentTabId(), ...inputInvoice } = payload;
- invoice = await getPaymentForm(global, {
- chat,
- messageId: payload.messageId,
- }, tabId);
+ const requestInputInvoice = getRequestInputInvoice(global, inputInvoice);
+ if (!requestInputInvoice) {
+ return;
}
+ const invoice = await getPaymentForm(global, requestInputInvoice, tabId);
+
if (!invoice) {
return;
}
@@ -200,21 +188,9 @@ addActionHandler('sendPaymentForm', async (global, actions, payload): Promise => {
+ const {
+ chatId, prepaidGiveaway,
+ tabId = getCurrentTabId(),
+ } = payload;
+
+ const chat = selectChat(global, chatId);
+ if (!chat) return;
+
+ const result = await callApi('getPremiumGiftCodeOptions', {
+ chat,
+ });
+
+ if (!result) {
+ return;
+ }
+
+ global = getGlobal();
+
+ const isOpen = Boolean(chatId);
+
+ global = updateTabState(global, {
+ giveawayModal: {
+ chatId,
+ gifts: result,
+ isOpen,
+ prepaidGiveaway,
+ },
+ }, tabId);
+ setGlobal(global);
+});
+
+addActionHandler('closeGiveawayModal', (global, actions, payload): ActionReturnType => {
+ const { tabId = getCurrentTabId() } = payload || {};
+
+ return updateTabState(global, {
+ giveawayModal: undefined,
+ }, tabId);
+});
+
addActionHandler('openGiftPremiumModal', async (global, actions, payload): Promise => {
const { forUserId, tabId = getCurrentTabId() } = payload || {};
const result = await callApi('fetchPremiumPromo');
@@ -484,7 +500,7 @@ addActionHandler('openBoostModal', async (global, actions, payload): Promise => {
+ const {
+ chatId, giveawayId, paymentPurpose, tabId = getCurrentTabId(),
+ } = payload;
+
+ const chat = selectChat(global, chatId);
+ if (!chat) return;
+
+ const additionalChannels = paymentPurpose?.additionalChannelIds?.map((id) => selectChat(global, id)).filter(Boolean);
+
+ const result = await callApi('launchPrepaidGiveaway', {
+ chat,
+ giveawayId,
+ paymentPurpose: {
+ type: 'giveaway',
+ chat,
+ areWinnersVisible: paymentPurpose?.areWinnersVisible,
+ additionalChannels,
+ countries: paymentPurpose?.countries,
+ prizeDescription: paymentPurpose.prizeDescription,
+ untilDate: paymentPurpose.untilDate,
+ currency: paymentPurpose.currency,
+ amount: paymentPurpose.amount,
+ },
+ });
+
+ if (!result) {
+ return;
+ }
+
+ actions.openBoostStatistics({ chatId, tabId });
+});
diff --git a/src/global/helpers/index.ts b/src/global/helpers/index.ts
index f9c672caf..d1e940697 100644
--- a/src/global/helpers/index.ts
+++ b/src/global/helpers/index.ts
@@ -4,7 +4,6 @@ export * from './messages';
export * from './messageSummary';
export * from './messageMedia';
export * from './localSearch';
-export * from './payments';
export * from './reactions';
export * from './bots';
export * from './media';
diff --git a/src/global/helpers/payments.ts b/src/global/helpers/payments.ts
index fe8c20b4f..fb2077a90 100644
--- a/src/global/helpers/payments.ts
+++ b/src/global/helpers/payments.ts
@@ -1,51 +1,73 @@
-import type { ApiFieldError } from '../../api/types';
+import type { ApiInputInvoice, ApiRequestInputInvoice } from '../../api/types';
+import type { GlobalState } from '../types';
-const STRIPE_ERRORS: Record = {
- missing_payment_information: {
- field: 'cardNumber',
- message: 'Incorrect card number',
- },
- invalid_number: {
- field: 'cardNumber',
- message: 'Incorrect card number',
- },
- number: {
- field: 'cardNumber',
- message: 'Incorrect card number',
- },
- exp_year: {
- field: 'expiry',
- message: 'Incorrect year',
- },
- exp_month: {
- field: 'expiry',
- message: 'Incorrect month',
- },
- invalid_expiry_year: {
- field: 'expiry',
- message: 'Incorrect year',
- },
- invalid_expiry_month: {
- field: 'expiry',
- message: 'Incorrect month',
- },
- cvc: {
- field: 'cvv',
- message: 'Incorrect CVV',
- },
- invalid_cvc: {
- field: 'cvv',
- message: 'Incorrect CVV',
- },
-};
+import { selectChat, selectUser } from '../selectors';
-export function getStripeError(error: {
- code: string;
- message: string;
- param?: string;
-}) {
- const { message: description, code, param } = error;
- const { field, message } = param ? STRIPE_ERRORS[param] : STRIPE_ERRORS[code];
+export function getRequestInputInvoice(
+ global: T, inputInvoice: ApiInputInvoice,
+): ApiRequestInputInvoice | undefined {
+ if (inputInvoice.type === 'slug') return inputInvoice;
- return { field, message, description };
+ if (inputInvoice.type === 'message') {
+ const chat = selectChat(global, inputInvoice.chatId);
+ if (!chat) {
+ return undefined;
+ }
+ return {
+ type: 'message',
+ chat,
+ messageId: inputInvoice.messageId,
+ };
+ }
+
+ if (inputInvoice.type === 'giftcode') {
+ const {
+ userIds, boostChannelId, amount, currency, option,
+ } = inputInvoice;
+ const users = userIds.map((id) => selectUser(global, id)).filter(Boolean);
+ const boostChannel = boostChannelId ? selectChat(global, boostChannelId) : undefined;
+
+ return {
+ type: 'giveaway',
+ option,
+ purpose: {
+ type: 'giftcode',
+ amount,
+ currency,
+ users,
+ boostChannel,
+ },
+ };
+ }
+
+ if (inputInvoice.type === 'giveaway') {
+ const {
+ chatId, additionalChannelIds, amount, currency, option, untilDate, areWinnersVisible, countries,
+ isOnlyForNewSubscribers, prizeDescription,
+ } = inputInvoice;
+ const chat = selectChat(global, chatId);
+ if (!chat) {
+ return undefined;
+ }
+ const additionalChannels = additionalChannelIds?.map((id) => selectChat(global, id)).filter(Boolean);
+
+ return {
+ type: 'giveaway',
+ option,
+ purpose: {
+ type: 'giveaway',
+ amount,
+ currency,
+ chat,
+ additionalChannels,
+ untilDate,
+ areWinnersVisible,
+ countries,
+ isOnlyForNewSubscribers,
+ prizeDescription,
+ },
+ };
+ }
+
+ return undefined;
}
diff --git a/src/global/selectors/localSearch.ts b/src/global/selectors/localSearch.ts
index 22cf452f4..b108850bf 100644
--- a/src/global/selectors/localSearch.ts
+++ b/src/global/selectors/localSearch.ts
@@ -1,7 +1,7 @@
import type { GlobalState, TabArgs } from '../types';
import { getCurrentTabId } from '../../util/establishMultitabRole';
-import { buildChatThreadKey } from '../helpers';
+import { buildChatThreadKey } from '../helpers/localSearch';
import { selectCurrentMessageList } from './messages';
import { selectTabState } from './tabs';
diff --git a/src/global/selectors/ui.ts b/src/global/selectors/ui.ts
index 4c3d77ed2..ee2d66bd2 100644
--- a/src/global/selectors/ui.ts
+++ b/src/global/selectors/ui.ts
@@ -4,7 +4,7 @@ import type { GlobalState, TabArgs } from '../types';
import { NewChatMembersProgress, RightColumnContent } from '../../types';
import { getCurrentTabId } from '../../util/establishMultitabRole';
-import { getMessageVideo, getMessageWebPageVideo } from '../helpers';
+import { getMessageVideo, getMessageWebPageVideo } from '../helpers/messageMedia';
import { selectCurrentTextSearch } from './localSearch';
import { selectCurrentManagement } from './management';
import { selectIsStatisticsShown } from './statistics';
diff --git a/src/global/selectors/users.ts b/src/global/selectors/users.ts
index f46205071..a16f0115c 100644
--- a/src/global/selectors/users.ts
+++ b/src/global/selectors/users.ts
@@ -31,6 +31,10 @@ export function selectIsPremiumPurchaseBlocked(global: T)
return global.appConfig?.isPremiumPurchaseBlocked ?? true;
}
+export function selectIsGiveawayGiftsPurchaseAvailable(global: T) {
+ return global.appConfig?.isGiveawayGiftsPurchaseAvailable ?? true;
+}
+
// Slow, not to be used in `withGlobal`
export function selectUserByPhoneNumber(global: T, phoneNumber: string) {
const phoneNumberCleaned = phoneNumber.replace(/[^0-9]/g, '');
diff --git a/src/global/types.ts b/src/global/types.ts
index a1dde2388..c25f75bce 100644
--- a/src/global/types.ts
+++ b/src/global/types.ts
@@ -44,7 +44,9 @@ import type {
ApiPhoneCall,
ApiPhoto,
ApiPostStatistics,
+ ApiPremiumGiftCodeOption,
ApiPremiumPromo,
+ ApiPrepaidGiveaway,
ApiQuickReply,
ApiReaction,
ApiReactionKey,
@@ -625,6 +627,15 @@ export type TabState = {
isSuccess?: boolean;
};
+ giveawayModal?: {
+ chatId: string;
+ isOpen?: boolean;
+ gifts?: ApiPremiumGiftCodeOption[];
+ selectedMemberIds?: string[];
+ selectedChannelIds?: string[];
+ prepaidGiveaway?: ApiPrepaidGiveaway;
+ };
+
giftPremiumModal?: {
isOpen?: boolean;
forUserId?: string;
@@ -1989,6 +2000,20 @@ export interface ActionPayloads {
} & WithTabId;
closeGiftCodeModal: WithTabId | undefined;
+ launchPrepaidGiveaway: {
+ chatId: string;
+ giveawayId: string;
+ paymentPurpose: {
+ additionalChannelIds?: string[];
+ areWinnersVisible?: boolean;
+ countries?: string[];
+ prizeDescription?: string;
+ untilDate: number;
+ currency: string;
+ amount: number;
+ };
+ } & WithTabId;
+
checkChatlistInvite: {
slug: string;
} & WithTabId;
@@ -2914,6 +2939,13 @@ export interface ActionPayloads {
} & WithTabId) | undefined;
closePremiumModal: WithTabId | undefined;
+ openGiveawayModal: ({
+ chatId: string;
+ gifts?: number[] | undefined;
+ prepaidGiveaway?: ApiPrepaidGiveaway | undefined;
+ } & WithTabId);
+ closeGiveawayModal: WithTabId | undefined;
+
transcribeAudio: {
chatId: string;
messageId: number;
diff --git a/src/lib/gramjs/tl/apiTl.js b/src/lib/gramjs/tl/apiTl.js
index 8fddbf65e..e54dee53c 100644
--- a/src/lib/gramjs/tl/apiTl.js
+++ b/src/lib/gramjs/tl/apiTl.js
@@ -1525,9 +1525,11 @@ payments.getPaymentReceipt#2478d1cc peer:InputPeer msg_id:int = payments.Payment
payments.validateRequestedInfo#b6c8f12b flags:# save:flags.0?true invoice:InputInvoice info:PaymentRequestedInfo = payments.ValidatedRequestedInfo;
payments.sendPaymentForm#2d03522f flags:# form_id:long invoice:InputInvoice requested_info_id:flags.0?string shipping_option_id:flags.1?string credentials:InputPaymentCredentials tip_amount:flags.2?long = payments.PaymentResult;
payments.getSavedInfo#227d824b = payments.SavedInfo;
+payments.getPremiumGiftCodeOptions#2757ba54 flags:# boost_peer:flags.0?InputPeer = Vector;
payments.checkGiftCode#8e51b4c1 slug:string = payments.CheckedGiftCode;
payments.applyGiftCode#f6e26854 slug:string = Updates;
payments.getGiveawayInfo#f4239425 peer:InputPeer msg_id:int = payments.GiveawayInfo;
+payments.launchPrepaidGiveaway#5ff58f20 peer:InputPeer giveaway_id:long purpose:InputStorePaymentPurpose = Updates;
phone.requestCall#42ff96ed flags:# video:flags.0?true user_id:InputUser random_id:int g_a_hash:bytes protocol:PhoneCallProtocol = phone.PhoneCall;
phone.acceptCall#3bd2b4a0 peer:InputPhoneCall g_b:bytes protocol:PhoneCallProtocol = phone.PhoneCall;
phone.confirmCall#2efe1722 peer:InputPhoneCall g_a:bytes key_fingerprint:long protocol:PhoneCallProtocol = phone.PhoneCall;
diff --git a/src/lib/gramjs/tl/static/api.json b/src/lib/gramjs/tl/static/api.json
index b064cc861..3283f6f85 100644
--- a/src/lib/gramjs/tl/static/api.json
+++ b/src/lib/gramjs/tl/static/api.json
@@ -343,5 +343,7 @@
"premium.getBoostsList",
"payments.checkGiftCode",
"payments.applyGiftCode",
- "payments.getGiveawayInfo"
+ "payments.getGiveawayInfo",
+ "payments.getPremiumGiftCodeOptions",
+ "payments.launchPrepaidGiveaway"
]
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 398c3e475..14d690522 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -101,8 +101,8 @@ $color-message-story-mention-to: #74bcff;
--color-primary-shade: #{color.mix($color-primary, $color-black, 92%)};
--color-primary-shade-darker: #{color.mix($color-primary, $color-black, 84%)};
--color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))};
- --color-primary-opacity: rgba(var(--color-primary), 0.25);
- --color-primary-opacity-hover: rgba(var(--color-primary), 0.15);
+ --color-primary-opacity: rgba(var(--color-primary), 0.15);
+ --color-primary-opacity-hover: rgba(var(--color-primary), 0.25);
--color-primary-tint: rgba(var(--color-primary), 0.1);
--color-green: #{$color-green};
--color-green-darker: #{color.mix($color-green, $color-black, 84%)};
diff --git a/src/styles/themes.json b/src/styles/themes.json
index cc06e0c43..081f4f5d1 100644
--- a/src/styles/themes.json
+++ b/src/styles/themes.json
@@ -1,7 +1,7 @@
{
"--color-primary": ["#3390EC", "#8774E1"],
- "--color-primary-opacity": ["#50A2E940", "#8378DB80"],
- "--color-primary-opacity-hover": ["#50A2E926", "#8378DBA0"],
+ "--color-primary-opacity": ["#50A2E91E", "#8378DB1E"],
+ "--color-primary-opacity-hover": ["#50A2E940", "#8378DB40"],
"--color-primary-tint": ["#3390ec1a", "#8774e11a"],
"--color-primary-shade": ["#4a95d6", "#7b71c6"],
"--color-background": ["#FFFFFF", "#212121"],
diff --git a/src/util/deeplink.ts b/src/util/deeplink.ts
index dccf11317..f519174da 100644
--- a/src/util/deeplink.ts
+++ b/src/util/deeplink.ts
@@ -150,7 +150,7 @@ export const processDeepLink = (url: string): boolean => {
case 'invoice': {
const { slug } = params;
- openInvoice({ slug });
+ openInvoice({ type: 'slug', slug });
break;
}
diff --git a/src/util/payments/stripe.ts b/src/util/payments/stripe.ts
new file mode 100644
index 000000000..fe8c20b4f
--- /dev/null
+++ b/src/util/payments/stripe.ts
@@ -0,0 +1,51 @@
+import type { ApiFieldError } from '../../api/types';
+
+const STRIPE_ERRORS: Record = {
+ missing_payment_information: {
+ field: 'cardNumber',
+ message: 'Incorrect card number',
+ },
+ invalid_number: {
+ field: 'cardNumber',
+ message: 'Incorrect card number',
+ },
+ number: {
+ field: 'cardNumber',
+ message: 'Incorrect card number',
+ },
+ exp_year: {
+ field: 'expiry',
+ message: 'Incorrect year',
+ },
+ exp_month: {
+ field: 'expiry',
+ message: 'Incorrect month',
+ },
+ invalid_expiry_year: {
+ field: 'expiry',
+ message: 'Incorrect year',
+ },
+ invalid_expiry_month: {
+ field: 'expiry',
+ message: 'Incorrect month',
+ },
+ cvc: {
+ field: 'cvv',
+ message: 'Incorrect CVV',
+ },
+ invalid_cvc: {
+ field: 'cvv',
+ message: 'Incorrect CVV',
+ },
+};
+
+export function getStripeError(error: {
+ code: string;
+ message: string;
+ param?: string;
+}) {
+ const { message: description, code, param } = error;
+ const { field, message } = param ? STRIPE_ERRORS[param] : STRIPE_ERRORS[code];
+
+ return { field, message, description };
+}
+ {TYPE_OPTIONS.map((option) => {
+ return (
+
+ );
+ }
+
+ function renderSubscribersOptions() {
+ return (
+
+
+ );
+ }
+
+ function renderSubscriptionOptions() {
+ return (
+
+ {filteredGifts?.map((gift) => (
+
+ );
+ }
+
+ function renderPremiumFeaturesLink() {
+ const info = lang('GiftPremiumListFeaturesAndTerms');
+ const parts = info.match(/([^*]*)\*([^*]+)\*(.*)/);
+
+ if (!parts || parts.length < 4) {
+ return undefined;
+ }
+
+ return (
+ + {parts[1]} + {parts[2]} + {parts[3]} +
+ ); + } + + function deleteParticipantsHandler(id: string) { + const filteredChannelIds = selectedChannelIds.filter((channelId) => channelId !== id); + setSelectedChannelIds(filteredChannelIds); + } + + return ( +
+
+ 
+
+ + {renderText(lang('BoostingBoostsViaGifts'))} +
+
+ {renderText(lang('BoostingGetMoreBoost'))}
+
+
+
+ {dataPrepaidGiveaway ? (
+ + {lang('BoostingBoostsViaGifts')} +
+
+
+ ) : (
+
+ 
+
+
+
+ + {lang('BoostingTelegramPremiumCountPlural', dataPrepaidGiveaway.quantity)} +
+{lang('PrepaidGiveawayMonths', dataPrepaidGiveaway.months)}
+
+
+
+
+
+ {dataPrepaidGiveaway.quantity * (giveawayBoostPerPremiumLimit ?? GIVEAWAY_BOOST_PER_PREMIUM)}
+
+
+ {renderTypeOptions()}
+
+ )}
+
+ {isRandomUsers && (
+ <>
+ {!dataPrepaidGiveaway && (
+ <>
+
+
+
+
+
+
+ + {lang('BoostingQuantityPrizes')} +
+
+
+
+ {boostQuantity}
+
+
+ {renderText(lang('BoostingChooseHowMany'))}
+
+
+ )}
+
+
+
+
+
+ {selectedChannelIds?.map((channelId) => {
+ return (
+ deleteParticipantsHandler(channelId)}
+ rightElement={(
+ );
+ })}
+
+ {selectedChannelIds.length < MAX_ADDITIONAL_CHANNELS && (
+
+ {lang('BoostingAddChannel')}
+
+ )}
+
+
+ + {lang('BoostingChannelsIncludedGiveaway')} +
+ +
+
+
+ + {lang('BoostingEligibleUsers')} +
+ + {renderSubscribersOptions()} +
+ {renderText(lang('BoostGift.LimitSubscribersInfo'))}
+
+
+
+
+
+ {shouldShowPrizes ? (
+
+
+
+ {shouldShowPrizes && (
+ + {lang('BoostingGiveawayAdditionalPrizes')} +
+ +
+
+ )}
+ + {dataPrepaidGiveaway ? dataPrepaidGiveaway.quantity : selectedUserCount} +
+
+ {prizeDescription?.length ? renderText(lang('BoostingGiveawayAdditionPrizeCountNameHint',
+ dataPrepaidGiveaway
+ ? [dataPrepaidGiveaway.quantity, prizeDescription, monthQuantity]
+ : [selectedUserCount, prizeDescription, monthQuantity],
+ undefined,
+ selectedMonthOption), ['simple_markdown']) : renderText(lang('BoostingGiveawayAdditionPrizeCountHint',
+ dataPrepaidGiveaway
+ ? [dataPrepaidGiveaway.quantity, monthQuantity]
+ : [selectedUserCount, monthQuantity],
+ undefined,
+ selectedMonthOption), ['simple_markdown'])}
+
+ ) : (
+
+ {renderText(lang('BoostingGiveawayAdditionPrizeHint'))}
+
+ )}
+
+
+
+
+
+
+ + {lang('BoostingGiveawayShowWinners')} +
+ +
+ {renderText(lang('BoostingGiveawayShowWinnersHint'))}
+
+
+
+
+
+ )}
+
+ {!dataPrepaidGiveaway && (
+ <>
+ + {lang('BoostingDateWhenGiveawayEnds')} +
+ + +
+
+
+ + {lang('BoostingDurationOfPremium')} +
+ + {renderSubscriptionOptions()} +
+ {renderPremiumFeaturesLink()}
+
+
+ )}
+
+ {selectedGiveawayOption && (
+
+
+
+ )}
+
{options.map((option) => (
= ({
isLoading={loadingOption ? loadingOption === option.value : undefined}
className={option.className}
onChange={handleChange}
+ onSubLabelClick={onSubLabelClick(option.value)}
+ isLink={isLink}
/>
))}
diff --git a/src/components/ui/RangeSliderWithMarks.module.scss b/src/components/ui/RangeSliderWithMarks.module.scss
new file mode 100644
index 000000000..4fe04bee9
--- /dev/null
+++ b/src/components/ui/RangeSliderWithMarks.module.scss
@@ -0,0 +1,132 @@
+@use '../../styles/mixins';
+
+@mixin thumb-styles() {
+ border: none;
+ width: 1rem;
+ height: 1rem;
+ background: var(--color-links);
+ border-radius: 50%;
+ cursor: var(--custom-cursor, pointer);
+ transform: scale(1);
+ transition: transform 0.30s ease-in-out;
+ z-index: 2;
+ -webkit-appearance: none;
+ appearance: none;
+
+ &:hover {
+ transform: scale(1.5);
+ }
+}
+
+.dotWrapper {
+ width: 90%;
+ margin-left: 1rem;
+ padding: 1rem 0 0;
+}
+
+.sliderContainer {
+ --fill-percentage: 0%;
+ position: relative;
+ width: 100%;
+}
+
+.marksContainer {
+ width: 100%;
+ pointer-events: none;
+ display: flex;
+ justify-content: space-between;
+}
+
+.mark {
+ font-size: 0.8125rem;
+ font-weight: 700;
+ color: var(--color-text-secondary);
+ position: relative;
+ display: flex;
+ justify-content: center;
+ width: 0.1875rem;
+}
+
+.active {
+ color: var(--color-links);
+}
+
+.slider {
+ position: relative;
+ -webkit-appearance: none;
+ width: 100%;
+ height: 0.1875rem;
+ outline: none;
+ transition: opacity 0.2s;
+ z-index: 1;
+
+ background: linear-gradient(to right,
+ var(--color-links) 0%,
+ var(--color-links) var(--fill-percentage),
+ var(--color-text-secondary) var(--fill-percentage),
+ var(--color-text-secondary) 100%);
+}
+
+.slider::before,
+.slider::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ height: 100%;
+ transition: transform 0.2s ease;
+ z-index: -1;
+ transform-origin: left;
+}
+
+.slider::before {
+ left: 0;
+ background-color: var(--color-links);
+ transform: scaleX(var(--fill-percentage-before));
+}
+
+.slider::after {
+ right: 0;
+ background: var(--color-text-secondary);
+ transform: scaleX(var(--fill-percentage-after));
+ transform-origin: right;
+}
+
+.slider::-webkit-slider-thumb {
+ @include thumb-styles();
+}
+
+.slider::-moz-range-thumb {
+ @include thumb-styles();
+}
+
+.slider::-ms-thumb {
+ @include thumb-styles();
+}
+
+.tickMarks {
+ position: absolute;
+ top: 2rem;
+ left: 0;
+ right: 0;
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.tick {
+ position: relative;
+ width: 0.25rem;
+ height: 0.5rem;
+ background-color: var(--color-text-secondary);
+ border-radius: 0.1875rem;
+}
+
+.filled {
+ background-color: var(--color-links);
+}
+
+.tickUnfilled {
+ background-color: var(--color-text-secondary);
+}
diff --git a/src/components/ui/RangeSliderWithMarks.tsx b/src/components/ui/RangeSliderWithMarks.tsx
new file mode 100644
index 000000000..3d9135002
--- /dev/null
+++ b/src/components/ui/RangeSliderWithMarks.tsx
@@ -0,0 +1,85 @@
+import type { ChangeEvent } from 'react';
+import type { FC } from '../../lib/teact/teact';
+import React, {
+ memo, useLayoutEffect, useMemo, useRef,
+} from '../../lib/teact/teact';
+
+import buildClassName from '../../util/buildClassName';
+
+import styles from './RangeSliderWithMarks.module.scss';
+
+export type OwnProps = {
+ marks: number[];
+ onChange: (value: number) => void;
+ rangeCount: number;
+};
+
+const RangeSliderWithMarks: FC
+
+
+ );
+};
+
+export default memo(RangeSliderWithMarks);
diff --git a/src/config.ts b/src/config.ts
index b349e5aca..4126d9fee 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -312,6 +312,10 @@ export const GENERAL_TOPIC_ID = 1;
export const STORY_EXPIRE_PERIOD = 86400; // 1 day
export const STORY_VIEWERS_EXPIRE_PERIOD = 86400; // 1 day
export const FRESH_AUTH_PERIOD = 86400; // 1 day
+export const GIVEAWAY_BOOST_PER_PREMIUM = 4;
+export const GIVEAWAY_MAX_ADDITIONAL_CHANNELS = 10;
+export const GIVEAWAY_MAX_ADDITIONAL_USERS = 10;
+export const GIVEAWAY_MAX_ADDITIONAL_COUNTRIES = 10;
export const LIGHT_THEME_BG_COLOR = '#99BA92';
export const DARK_THEME_BG_COLOR = '#0F0F0F';
diff --git a/src/global/actions/api/bots.ts b/src/global/actions/api/bots.ts
index ef8365491..e9e0c3d98 100644
--- a/src/global/actions/api/bots.ts
+++ b/src/global/actions/api/bots.ts
@@ -104,6 +104,7 @@ addActionHandler('clickBotInlineButton', (global, actions, payload): ActionRetur
return;
}
actions.openInvoice({
+ type: 'message',
chatId: chat.id,
messageId,
tabId,
diff --git a/src/global/actions/api/chats.ts b/src/global/actions/api/chats.ts
index 529cb1205..32e46090c 100644
--- a/src/global/actions/api/chats.ts
+++ b/src/global/actions/api/chats.ts
@@ -1403,11 +1403,13 @@ addActionHandler('openTelegramLink', (global, actions, payload): ActionReturnTyp
});
} else if (part1.startsWith('$')) {
openInvoice({
+ type: 'slug',
slug: part1.substring(1),
tabId,
});
} else if (part1 === 'invoice') {
openInvoice({
+ type: 'slug',
slug: part2,
tabId,
});
diff --git a/src/global/actions/api/payments.ts b/src/global/actions/api/payments.ts
index 8ee5d161c..93e8f6ae0 100644
--- a/src/global/actions/api/payments.ts
+++ b/src/global/actions/api/payments.ts
@@ -7,9 +7,11 @@ import { DEBUG_PAYMENT_SMART_GLOCAL } from '../../../config';
import { getCurrentTabId } from '../../../util/establishMultitabRole';
import { buildCollectionByKey, unique } from '../../../util/iteratees';
import * as langProvider from '../../../util/langProvider';
+import { getStripeError } from '../../../util/payments/stripe';
import { buildQueryString } from '../../../util/requestQuery';
import { callApi } from '../../../api/gramjs';
-import { getStripeError, isChatChannel, isChatSuperGroup } from '../../helpers';
+import { isChatChannel, isChatSuperGroup } from '../../helpers';
+import { getRequestInputInvoice } from '../../helpers/payments';
import { addActionHandler, getGlobal, setGlobal } from '../../index';
import {
addChats,
@@ -48,38 +50,24 @@ addActionHandler('validateRequestedInfo', (global, actions, payload): ActionRetu
return;
}
- if ('slug' in inputInvoice) {
- void validateRequestedInfo(global, inputInvoice, requestInfo, saveInfo, tabId);
- } else {
- const chat = selectChat(global, inputInvoice.chatId);
- if (!chat) {
- return;
- }
-
- void validateRequestedInfo(global, {
- chat,
- messageId: inputInvoice.messageId,
- }, requestInfo, saveInfo, tabId);
+ const requestInputInvoice = getRequestInputInvoice(global, inputInvoice);
+ if (!requestInputInvoice) {
+ return;
}
+
+ validateRequestedInfo(global, requestInputInvoice, requestInfo, saveInfo, tabId);
});
addActionHandler('openInvoice', async (global, actions, payload): Promise