-
Notifications
You must be signed in to change notification settings - Fork 245
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'MI-746-gifting-plus' into fix-gift-feedback
- Loading branch information
Showing
69 changed files
with
1,564 additions
and
386 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
packages/shared/src/components/feeds/FeedSettings/components/SmartPrompts.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import React from 'react'; | ||
| import type { ReactElement } from 'react'; | ||
| import { | ||
| Typography, | ||
| TypographyColor, | ||
| TypographyTag, | ||
| TypographyType, | ||
| } from '../../../typography/Typography'; | ||
| import { PlusUser } from '../../../PlusUser'; | ||
| import { LogEvent, Origin, TargetId } from '../../../../lib/log'; | ||
| import { Button, ButtonSize, ButtonVariant } from '../../../buttons/Button'; | ||
| import { plusUrl } from '../../../../lib/constants'; | ||
| import { DevPlusIcon } from '../../../icons'; | ||
| import { usePlusSubscription, useToastNotification } from '../../../../hooks'; | ||
| import { usePromptsQuery } from '../../../../hooks/prompt/usePromptsQuery'; | ||
| import { FilterCheckbox } from '../../../fields/FilterCheckbox'; | ||
| import { useSettingsContext } from '../../../../contexts/SettingsContext'; | ||
| import { labels } from '../../../../lib'; | ||
| import { useLogContext } from '../../../../contexts/LogContext'; | ||
| import { useFeedSettingsEditContext } from '../FeedSettingsEditContext'; | ||
| import { SimpleTooltip } from '../../../tooltips'; | ||
| import ConditionalWrapper from '../../../ConditionalWrapper'; | ||
|
|
||
| export const SmartPrompts = (): ReactElement => { | ||
| const { editFeedSettings } = useFeedSettingsEditContext(); | ||
| const { isPlus, logSubscriptionEvent } = usePlusSubscription(); | ||
| const { displayToast } = useToastNotification(); | ||
| const { logEvent } = useLogContext(); | ||
| const { flags, updatePromptFlag } = useSettingsContext(); | ||
| const { prompt: promptFlags } = flags; | ||
| const { data: prompts, isLoading } = usePromptsQuery(); | ||
|
|
||
| return ( | ||
| <section className="flex flex-col gap-4" aria-busy={isLoading}> | ||
| <div className="flex flex-col"> | ||
| <div className="mb-1 flex items-center gap-2"> | ||
| <Typography | ||
| tag={TypographyTag.H3} | ||
| color={TypographyColor.Primary} | ||
| type={TypographyType.Body} | ||
| bold | ||
| > | ||
| Smart Prompts | ||
| </Typography> | ||
| <PlusUser /> | ||
| </div> | ||
| <Typography | ||
| className="pr-24" | ||
| color={TypographyColor.Tertiary} | ||
| type={TypographyType.Callout} | ||
| > | ||
| Level up how you interact with posts using AI-powered prompts. Extract | ||
| insights, refine content, or run custom instructions to get more out | ||
| of every post in one click. | ||
| </Typography> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col gap-2"> | ||
| {prompts?.map(({ id, label, description }) => ( | ||
| <ConditionalWrapper | ||
| condition={!isPlus} | ||
| key={`w-${id}`} | ||
| wrapper={(child) => { | ||
| return ( | ||
| <SimpleTooltip | ||
| container={{ | ||
| className: 'max-w-70 text-center typo-subhead', | ||
| }} | ||
| content="Upgrade to Plus to unlock Smart Prompts." | ||
| > | ||
| <div className="w-fit">{child as ReactElement}</div> | ||
| </SimpleTooltip> | ||
| ); | ||
| }} | ||
| > | ||
| <FilterCheckbox | ||
| key={id} | ||
| name={`prompt-${id}`} | ||
| checked={promptFlags?.[id] ?? true} | ||
| description={description} | ||
| disabled={!isPlus} | ||
| onToggleCallback={() => { | ||
| const newState = !promptFlags?.[id] || false; | ||
| editFeedSettings(() => updatePromptFlag(id, newState)); | ||
| displayToast( | ||
| labels.feed.settings.globalPreferenceNotice.smartPrompt, | ||
| ); | ||
|
|
||
| logEvent({ | ||
| event_name: LogEvent.ToggleSmartPrompts, | ||
| target_type: id, | ||
| target_id: newState ? TargetId.On : TargetId.Off, | ||
| extra: JSON.stringify({ | ||
| origin: Origin.Settings, | ||
| }), | ||
| }); | ||
| }} | ||
| descriptionClassName="text-text-tertiary" | ||
| > | ||
| <Typography bold>{label}</Typography> | ||
| </FilterCheckbox> | ||
| </ConditionalWrapper> | ||
| ))} | ||
| </div> | ||
| {!isPlus && ( | ||
| <Button | ||
| className="w-fit" | ||
| tag="a" | ||
| type="button" | ||
| variant={ButtonVariant.Primary} | ||
| size={ButtonSize.Medium} | ||
| href={plusUrl} | ||
| icon={<DevPlusIcon className="text-action-plus-default" />} | ||
| onClick={() => { | ||
| logSubscriptionEvent({ | ||
| event_name: LogEvent.UpgradeSubscription, | ||
| target_id: TargetId.ClickbaitShield, | ||
| }); | ||
| }} | ||
| > | ||
| Upgrade to Plus | ||
| </Button> | ||
| )} | ||
| </section> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
packages/shared/src/components/icons/CustomPrompt/filled.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions
10
packages/shared/src/components/icons/CustomPrompt/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import type { ReactElement } from 'react'; | ||
| import React from 'react'; | ||
| import type { IconProps } from '../../Icon'; | ||
| import Icon from '../../Icon'; | ||
| import OutlinedIcon from './outlined.svg'; | ||
| import FilledIcon from './filled.svg'; | ||
|
|
||
| export const CustomPromptIcon = (props: IconProps): ReactElement => ( | ||
| <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} /> | ||
| ); |
10 changes: 10 additions & 0 deletions
10
packages/shared/src/components/icons/CustomPrompt/outlined.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import type { ReactElement } from 'react'; | ||
| import React from 'react'; | ||
| import type { IconProps } from '../../Icon'; | ||
| import Icon from '../../Icon'; | ||
| import OutlinedIcon from './outlined.svg'; | ||
| import FilledIcon from './filled.svg'; | ||
|
|
||
| export const EditPromptIcon = (props: IconProps): ReactElement => ( | ||
| <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} /> | ||
| ); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.