add i18nwarp

configs/eslint-config.mjs

@@ -74,7 +74,7 @@ export default tseslint.config(
       'arrow-parens': 0,
       camelcase: ['error', { properties: 'never' }],
       'consistent-return': 'off',
-      'i18next/no-literal-string': 'warn',
+      'i18next/no-literal-string': 'error',
       'import/consistent-type-specifier-style': ['error', 'prefer-inline'],
       'import/extensions': 'off',
       'import/first': 'error',

frontend/components/BitappsPluginUtilUpdateNotice.tsx

@@ -1,3 +1,4 @@
+import { __ } from '@common/helpers/i18nwrap'
 import LucideIcn from '@icons/LucideIcn'
 import { Alert } from 'antd'
 import Link from 'antd/es/typography/Link'
@@ -12,12 +13,13 @@ export function BitAppsPluginUtilUpdateNotice() {
         css={{ padding: 10 }}
         description={
           <>
-            <code>_bitapps-plugin-commons</code> submodule updated, please pull new changes from{' '}
+            <code>{__('_bitapps-plugin-commons')}</code>
+            {__('submodule updated, please pull new changes from')}
             <Link href="https://github.com/Bit-Apps-Pro/_bitapps-plugin-commons" target="_blank">
-              GitHub
+              {__('GitHub')}
             </Link>
-            . If you already pulled the changes, please restart the dev server. and run{' '}
-            <code>pnpm sync-plugin-commons</code> if needed.
+            {__('. If you already pulled the changes, please restart the dev server. and run')}
+            <code>{__('pnpm sync-plugin-commons')}</code> {__('if needed.')}
           </>
         }
         icon={<LucideIcn name="circle-alert" />}

frontend/components/FacebookCommunityCard.tsx

@@ -1,3 +1,4 @@
+import { __ } from '@common/helpers/i18nwrap'
 import LucideIcn from '@icons/LucideIcn'
 import fbCommunityImg from '@plugin-commons/resources/img/fbCommunity.webp'
 import { Button, Flex, theme, Typography } from 'antd'
@@ -47,16 +48,16 @@ export default function FacebookCommunityCard({ facebookCommunityLink }: FBCommu
         vertical
       >
         <Title level={3} style={{ color: 'white' }}>
-          Join Our Facebook Community
+          {__('Join Our Facebook Community')}
         </Title>
         <p css={{ color: 'white', fontSize: 18 }}>
-          Connect, share, and grow with like-minded individuals
+          {__('Connect, share, and grow with like-minded individuals')}
         </p>
       </Flex>
       <Flex css={{ marginBlock: 0 }} gap={15} justify="center" wrap>
-        <span className="whitespace-nowrap">🌟 Exclusive Content</span>
-        <span className="whitespace-nowrap">💬 Daily Discussion</span>
-        <span className="whitespace-nowrap">🎉 Special Events</span>
+        <span className="whitespace-nowrap">🌟 {__('Exclusive Content')}</span>
+        <span className="whitespace-nowrap">💬 {__('Daily Discussion')}</span>
+        <span className="whitespace-nowrap">🎉 {__('Special Events')}</span>
       </Flex>
 
       <Button
@@ -73,7 +74,7 @@ export default function FacebookCommunityCard({ facebookCommunityLink }: FBCommu
         size="large"
         target="_blank"
       >
-        Join Now
+        {__('Join Now')}
       </Button>
     </Flex>
   )

frontend/components/PluginUpdateNotice.tsx

@@ -4,6 +4,7 @@
 */
 
 import { SyncOutlined } from '@ant-design/icons'
+import { __, sprintf } from '@common/helpers/i18nwrap'
 import { Button } from 'antd'
 import { type CSSProperties } from 'react'
 import { useState } from 'react'
@@ -60,10 +61,11 @@ export default function PluginUpdateNotice() {
       }}
     >
       <div className="notice notice-warning">
-        <h4 className="mt-2">Plugin Update Required ({aboutPlugin.title}) </h4>
+        <h4 className="mt-2">{sprintf(__('Plugin Update Required (%s)'), aboutPlugin.title)} </h4>
         <p>
-          Please update both Free and Pro plugins to the latest version. Keeping them the same is crucial
-          to avoid potential issues.
+          {__(
+            'Please update both Free and Pro plugins to the latest version. Keeping them the same is crucial to avoid potential issues.'
+          )}
         </p>
         <Button
           disabled={isLoadingUpdatePlugin}

frontend/components/SupportPage/GiveReview.tsx

@@ -1,3 +1,4 @@
+import { __, sprintf } from '@common/helpers/i18nwrap'
 import config from '@config/config'
 import LucideIcn from '@icons/LucideIcn'
 import { Badge, Button } from 'antd'
@@ -23,7 +24,7 @@ export default function GiveReview({ pluginSlug }: { pluginSlug: string }) {
         color="geekblue"
         text={
           <span css={{ fontSize: 16, padding: 5 }}>
-            <LucideIcn name="dollar-sign" /> Cash Back
+            <LucideIcn name="dollar-sign" /> {__('Cash Back')}
           </span>
         }
       >
@@ -35,14 +36,18 @@ export default function GiveReview({ pluginSlug }: { pluginSlug: string }) {
           }}
         >
           <h4 css={{ color: 'white!important' }}>
-            Hi {SERVER_VARIABLES.loggedInUserName}, <span css={{ fontSize: 23 }}>👋</span>
+            {sprintf(__('Hi %s'), SERVER_VARIABLES.loggedInUserName)},{' '}
+            <span css={{ fontSize: 23 }}>👋</span>
           </h4>
           <p css={{ color: '#ccccd5', fontSize: 16 }}>
-            We want your feedback! <Link href={aboutPlugin.reviewLink}>Write a review</Link> of your
-            experience with {config.PRODUCT_NAME}, and we'll send you a{' '}
-            <b style={{ color: 'white' }}>$10 Cash back</b> to say thanks!
+            {__('We want your feedback!')}{' '}
+            <Link href={aboutPlugin.reviewLink}>{__('Write a review')}</Link>
+            {sprintf(__("of your experience with %s, and we'll send you a"), config.PRODUCT_NAME)}
+            <b style={{ color: 'white' }}>{__('$10 Cash back')}</b> {__('to say thanks!')}
             <br />
-            To claim your cash back, simply reply to support with a screenshot or link of your review.
+            {__(
+              'To claim your cash back, simply reply to support with a screenshot or link of your review.'
+            )}
             <br />
           </p>
           <Button
@@ -60,7 +65,7 @@ export default function GiveReview({ pluginSlug }: { pluginSlug: string }) {
             target="_blank"
             type="primary"
           >
-            Review Now
+            {__('Review Now')}
           </Button>
         </div>
       </Badge.Ribbon>

frontend/components/SupportPage/RecommendedPlugins.tsx

@@ -1,3 +1,4 @@
+import { __ } from '@common/helpers/i18nwrap'
 import config from '@config/config'
 import LucideIcn from '@icons/LucideIcn'
 import { useQuery } from '@tanstack/react-query'
@@ -40,7 +41,7 @@ function RecommendedPlugins() {
 
   return (
     <>
-      <Title level={5}>Recommended Plugins</Title>
+      <Title level={5}>{__('Recommended Plugins')}</Title>
 
       <Flex gap={15} wrap>
         {supportInfo?.pluginsList