WP Telegram | Add link preview options

.changeset/sweet-plums-give.md

@@ -0,0 +1,5 @@
+---
+"wptelegram": minor
+---
+
+Added link preview options

config/wpdev.base.project.js

@@ -20,7 +20,7 @@ export const getBundleConfig = ({ slug, key, version, textDomain }) => {
 					requirements: {
 						requiresPHP: '7.4',
 						requiresAtLeast: '6.2',
-						testedUpTo: '6.4.1',
+						testedUpTo: '6.4.3',
 					},
 					target: {
 						files: [
@@ -60,6 +60,17 @@ export const getBundleConfig = ({ slug, key, version, textDomain }) => {
 							},
 						],
 					},
+					{
+						// Replace 'x.y.z' everywhere with the new version
+						type: 'general',
+						files: ['**/*.php'],
+						textPatterns: [
+							{
+								pattern: `'(x.y.z)'`,
+								flags: 'gi',
+							},
+						],
+					},
 				],
 			},
 			{

packages/js/form/render/RenderField.tsx

@@ -70,6 +70,7 @@ export const RenderField: TRenderField = forwardRef<
 			isDisabled={rest.isDisabled}
 			isInvalid={Boolean(error)}
 			isRequired={isRequired}
+			opacity={props.isDisabled ? 0.5 : undefined}
 		>
 			{label ? (
 				<FormLabel

packages/js/shared/wptelegram-ui/components/LinkPreviewOptions.tsx

@@ -0,0 +1,65 @@
+import { Code, FeildStack, FeildStackItem } from '@wpsocio/components';
+import { FormField, useWatch } from '@wpsocio/form';
+import { __, sprintf } from '@wpsocio/i18n';
+import { createInterpolateElement, prefixName } from '@wpsocio/utilities';
+
+import { getFieldLabel } from '../services';
+import type { CommonProps } from './types';
+
+export const LinkPreviewOptions: React.FC<CommonProps> = ({ prefix }) => {
+	const link_preview_disabled = useWatch({
+		name: prefixName('link_preview_disabled', prefix),
+	});
+
+	return (
+		<FeildStack>
+			<FeildStackItem>
+				<FormField
+					name={prefixName('link_preview_disabled', prefix)}
+					fieldType="switch"
+					label={getFieldLabel('link_preview_disabled')}
+					description={__('Disables previews for links in the messages.')}
+					controlClassName="no-flex"
+				/>
+			</FeildStackItem>
+			<FeildStackItem>
+				<FormField
+					name={prefixName('link_preview_url', prefix)}
+					fieldType="text"
+					label={getFieldLabel('link_preview_url')}
+					isDisabled={link_preview_disabled}
+					description={
+						<>
+							{__('URL to use for the link preview.')}
+							&nbsp;
+							{createInterpolateElement(
+								sprintf(
+									/* translators: %s code example */
+									__('For example %s'),
+									'<Ex />',
+								),
+								{
+									Ex: <Code>{'{full_url}'}</Code>,
+								},
+							)}
+						</>
+					}
+					controlClassName="no-flex"
+					placeholder="{full_url}"
+				/>
+			</FeildStackItem>
+			<FeildStackItem>
+				<FormField
+					name={prefixName('link_preview_above_text', prefix)}
+					fieldType="switch"
+					label={getFieldLabel('link_preview_above_text')}
+					isDisabled={link_preview_disabled}
+					description={__(
+						'Whether the link preview must be shown above the message text.',
+					)}
+					controlClassName="no-flex"
+				/>
+			</FeildStackItem>
+		</FeildStack>
+	);
+};

packages/js/shared/wptelegram-ui/components/MiscMessageSettings.tsx

@@ -1,11 +1,12 @@
-import { __ } from '@wpsocio/i18n';
-import { FormField } from '@wpsocio/form';
 import { FeildStack, FeildStackItem } from '@wpsocio/components';
+import { FormField } from '@wpsocio/form';
+import { __ } from '@wpsocio/i18n';
 import { prefixName } from '@wpsocio/utilities';
 
+import { Link } from '@wpsocio/adapters';
 import { getFieldLabel } from '../services';
-import type { CommonProps } from './types';
 import { ParseModeField } from './ParseModeField';
+import type { CommonProps } from './types';
 
 export const MiscMessageSettings: React.FC<CommonProps> = ({ prefix }) => {
 	return (
@@ -24,10 +25,22 @@ export const MiscMessageSettings: React.FC<CommonProps> = ({ prefix }) => {
 			</FeildStackItem>
 			<FeildStackItem>
 				<FormField
-					name={prefixName('disable_web_page_preview', prefix)}
+					after={
+						<Link
+							color="blue.500"
+							href="https://telegram.org/blog/protected-content-delete-by-date-and-more#protected-content-in-groups-and-channels"
+							isExternal
+							mt="0.3em"
+						>
+							{__('Learn more')}
+						</Link>
+					}
+					description={__(
+						'Protects the contents of sent messages from forwarding and saving.',
+					)}
 					fieldType="switch"
-					label={getFieldLabel('disable_web_page_preview')}
-					description={__('Disables previews for links in the messages.')}
+					label={getFieldLabel('protect_content')}
+					name={prefixName('protect_content', prefix)}
 					controlClassName="no-flex"
 				/>
 			</FeildStackItem>

packages/js/shared/wptelegram-ui/components/SingleMessage.tsx

@@ -1,6 +1,6 @@
-import { __, sprintf, isRTL } from '@wpsocio/i18n';
-import { Text, List, ListItem } from '@wpsocio/adapters';
+import { List, ListItem, Text } from '@wpsocio/adapters';
 import { FormField, useWatch } from '@wpsocio/form';
+import { __, isRTL, sprintf } from '@wpsocio/i18n';
 import { createInterpolateElement, prefixName } from '@wpsocio/utilities';
 
 import { getFieldLabel } from '../services';
@@ -14,10 +14,10 @@ export const SingleMessage: React.FC<SingleMessageProps> = ({
 	isDisabled,
 	prefix,
 }) => {
-	const [disable_preview, image_position, parse_mode, single_message] =
+	const [link_preview_disabled, image_position, parse_mode, single_message] =
 		useWatch({
 			name: [
-				prefixName('disable_web_page_preview', prefix),
+				prefixName('link_preview_disabled', prefix),
 				prefixName('image_position', prefix),
 				prefixName('parse_mode', prefix),
 				prefixName('single_message', prefix),
@@ -27,7 +27,7 @@ export const SingleMessage: React.FC<SingleMessageProps> = ({
 	const showWarning =
 		single_message &&
 		image_position === 'after' &&
-		(parse_mode === 'none' || disable_preview);
+		(parse_mode === 'none' || link_preview_disabled);
 
 	return (
 		<FormField
@@ -72,7 +72,7 @@ export const SingleMessage: React.FC<SingleMessageProps> = ({
 									)}
 								</ListItem>
 							)}
-							{disable_preview && (
+							{link_preview_disabled && (
 								<ListItem color="red.500">
 									{createInterpolateElement(
 										sprintf(
@@ -82,7 +82,7 @@ export const SingleMessage: React.FC<SingleMessageProps> = ({
 										),
 										{
 											DisablePreview: (
-												<b>{getFieldLabel('disable_web_page_preview')}</b>
+												<b>{getFieldLabel('link_preview_disabled')}</b>
 											),
 										},
 									)}

packages/js/shared/wptelegram-ui/components/index.ts

@@ -6,14 +6,14 @@ export * from './ExcerptSettings';
 export * from './IfActive';
 export * from './ImageSettings';
 export * from './KeyboardButton';
+export * from './LinkPreviewOptions';
 export * from './MessageTemplate';
 export * from './MiscMessageSettings';
 export * from './NotifyInstructions';
 export * from './NotifyMessageTemplate';
 export * from './P2TGInstructions';
 export * from './P2TGSwitchAndPluginPosts';
 export * from './ParseModeField';
-export * from './ProtectContent';
 export * from './TemplateInfo';
 export * from './UserNotifications';
 export * from './proxy';

packages/js/shared/wptelegram-ui/services/fields.ts

@@ -23,7 +23,9 @@ export const fieldLabels = {
 	debug_info: () => __('Debug Info'),
 	delay: () => __('Delay in Posting'),
 	disable_notification: () => __('Disable Notifications'),
-	disable_web_page_preview: () => __('Disable Web Page Preview'),
+	link_preview_disabled: () => __('Disable link preview'),
+	link_preview_url: () => __('Link preview URL'),
+	link_preview_above_text: () => __('Show preview above text'),
 	enable_logs: () => __('Enable logs for'),
 	excerpt_length: () => __('Excerpt Length'),
 	excerpt_preserve_eol: () => __('Excerpt Newlines'),

plugins/wptelegram/js/settings/services/fields.ts

@@ -127,7 +127,9 @@ export const validationSchema = yup.object({
 		single_message: yup.boolean(),
 		cats_as_tags: yup.boolean(),
 		parse_mode: parseModeSchema,
-		disable_web_page_preview: yup.boolean(),
+		link_preview_disabled: yup.boolean(),
+		link_preview_url: yup.string(),
+		link_preview_above_text: yup.boolean(),
 		inline_button_text: yup.string(),
 		inline_button_url: yup.string(),
 		delay: yup

plugins/wptelegram/js/settings/services/types.ts

@@ -59,7 +59,9 @@ export interface PostToTelegramFields extends CommonFields {
 	channels?: ChatIds;
 	delay?: number;
 	disable_notification?: boolean;
-	disable_web_page_preview?: boolean;
+	link_preview_disabled?: boolean;
+	link_preview_url?: string;
+	link_preview_above_text?: boolean;
 	excerpt_length?: number;
 	excerpt_preserve_eol?: boolean;
 	excerpt_source?: 'post_content' | 'before_more' | 'post_excerpt';

plugins/wptelegram/js/settings/ui/p2tg/MessageSettings.tsx

@@ -5,6 +5,7 @@ import { __ } from '@wpsocio/i18n';
 import {
 	ExcerptSettings,
 	ImageSettings,
+	LinkPreviewOptions,
 	MessageTemplate,
 	MiscMessageSettings,
 	TemplateInfo,
@@ -31,6 +32,8 @@ export const MessageSettings: React.FC = () => {
 			<ImageSettings prefix={PREFIX} />
 			<Divider />
 			<MiscMessageSettings prefix={PREFIX} />
+			<Divider />
+			<LinkPreviewOptions prefix={PREFIX} />
 		</SectionCard>
 	);
 };

plugins/wptelegram/js/settings/ui/p2tg/Miscellaneous.tsx

@@ -6,7 +6,6 @@ import {
 	DelayInPosting,
 	DisableNotification,
 	P2TGSwitchAndPluginPosts,
-	ProtectContent,
 } from '@wpsocio/shared-wptelegram-ui';
 
 import { useData } from '../../services';
@@ -27,7 +26,6 @@ export const Miscellaneous: React.FC = () => {
 			<Upsell location="delay" />
 			<Divider />
 			<DisableNotification prefix={PREFIX} />
-			<ProtectContent prefix={PREFIX} />
 		</SectionCard>
 	);
 };

plugins/wptelegram/src/includes/Upgrade.php

@@ -56,6 +56,7 @@ public function do_upgrade() {
 				'3.0.0',
 				'3.0.8',
 				'4.0.0',
+				'4.1.0',
 			];
 		}
 
@@ -666,4 +667,22 @@ protected function upgrade_to_4_0_0() {
 			}
 		}
 	}
+
+	/**
+	 * Upgrade to 4.1.0
+	 *
+	 * - Upgrade to link_preview_options
+	 *
+	 * @since    4.1.0
+	 */
+	protected function upgrade_to_4_1_0() {
+		$p2tg_settings = WPTG()->options()->get( 'p2tg' );
+
+		$p2tg_settings['link_preview_disabled'] = isset( $p2tg_settings['disable_web_page_preview'] ) ? boolval( $p2tg_settings['disable_web_page_preview'] ) : false;
+
+		unset( $p2tg_settings['disable_web_page_preview'] );
+
+		// Update the options.
+		WPTG()->options()->set( 'p2tg', $p2tg_settings );
+	}
 }