From 559cca78370a038629da233ae222ff16e924852a Mon Sep 17 00:00:00 2001 From: William Chong <6198816+williamchong@users.noreply.github.com> Date: Tue, 30 Aug 2022 15:40:24 +0800 Subject: [PATCH] =?UTF-8?q?=20=E2=9C=A8=20Refactor=20iframe=20size=20and?= =?UTF-8?q?=20allow=20setting=20site=20liker=20id=20without=20override=20(?= =?UTF-8?q?#199)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ Use NFT Widget dimension in iframe * 🎨 Use shorter iframe for non-iscn button * ✨ Refactor setting allow site liker id without override * ♻️ Refactor likecoin url host to php constant * 💄 Increase iscn widget height * 🚨 Fix lint error --- likecoin/admin/metabox.php | 14 ++-- likecoin/admin/sidebar.php | 10 ++- likecoin/admin/view/view.php | 6 +- likecoin/includes/constant/options.php | 3 + .../src/components/LikeButtonPreview.js | 8 +- .../src/components/LikecoinInfoTable.js | 6 +- .../src/components/MainSettingTable.js | 76 +++++++++---------- .../src/pages/LikecoinButtonPage.js | 10 ++- .../src/pages/MainSettingPage.js | 7 +- .../src/pages/SponsorLikecoinPage.js | 4 +- likecoin/js/admin/likecoin_metabox.js | 4 +- .../js/sidebar/src/pages/LikeCoinPlugin.js | 8 +- .../src/pages/LikeCoinPluginSideBar.js | 8 +- .../js/sidebar/src/store/iscn-info-store.js | 16 ++-- likecoin/public/iscn-badge.php | 2 +- likecoin/public/likecoin-button.php | 45 ++++++----- 16 files changed, 126 insertions(+), 101 deletions(-) diff --git a/likecoin/admin/metabox.php b/likecoin/admin/metabox.php index 58e80bd6..6342a42b 100644 --- a/likecoin/admin/metabox.php +++ b/likecoin/admin/metabox.php @@ -106,9 +106,9 @@ function likecoin_parse_iscn_status( $publish_params, $post ) { $iscn_view_page_url = null; $iscn_badge_endpoint = null; if ( $iscn_mainnet_info ) { - $iscn_view_page_url = 'https://like.co/in/tx/iscn/'; + $iscn_view_page_url = 'https://' . LC_LIKE_CO_HOST . '/in/tx/iscn/'; $iscn_badge_endpoint = 'https://static.like.co/badge/iscn/'; - $iscn_card_endpoint = 'https://app.like.co/view/'; + $iscn_card_endpoint = 'https://app.' . LC_LIKE_CO_HOST . '/view/'; } elseif ( $iscn_testnet_info ) { $iscn_view_page_url = 'https://like.co/in/tx/iscn/dev/'; $iscn_badge_endpoint = 'https://static.like.co/badge/iscn/dev/'; @@ -444,10 +444,12 @@ function likecoin_add_meta_box( $post, $button_params, $publish_params ) { 'lc_js_metabox', 'wpApiSettings', array( - 'root' => esc_url_raw( rest_url() ), - 'siteurl' => get_site_url(), - 'nonce' => wp_create_nonce( 'wp_rest' ), - 'postId' => $post_id, + 'root' => esc_url_raw( rest_url() ), + 'siteurl' => get_site_url(), + 'nonce' => wp_create_nonce( 'wp_rest' ), + 'postId' => $post_id, + 'likecoHost' => LC_LIKE_CO_HOST, + 'likerlandHost' => LC_LIKER_LAND_HOST, ) ); wp_localize_script( diff --git a/likecoin/admin/sidebar.php b/likecoin/admin/sidebar.php index bd2abb86..a51872ad 100644 --- a/likecoin/admin/sidebar.php +++ b/likecoin/admin/sidebar.php @@ -54,10 +54,12 @@ function likecoin_add_sidebar( $post, $publish_params ) { 'lc-plugin-sidebar-js', 'wpApiSettings', array( - 'root' => esc_url_raw( rest_url() ), - 'siteurl' => get_site_url(), - 'nonce' => wp_create_nonce( 'wp_rest' ), - 'postId' => $post_id, + 'root' => esc_url_raw( rest_url() ), + 'siteurl' => get_site_url(), + 'nonce' => wp_create_nonce( 'wp_rest' ), + 'postId' => $post_id, + 'likecoHost' => LC_LIKE_CO_HOST, + 'likerlandHost' => LC_LIKER_LAND_HOST, ) ); wp_localize_script( diff --git a/likecoin/admin/view/view.php b/likecoin/admin/view/view.php index dd460b2f..76842bca 100644 --- a/likecoin/admin/view/view.php +++ b/likecoin/admin/view/view.php @@ -180,6 +180,10 @@ function likecoin_enqueue_admin_js() { wp_localize_script( 'likecoin-admin-settings-1', 'likecoinReactAppData', - array( 'appSelector' => '#wpbody #wpbody-content' ) + array( + 'appSelector' => '#wpbody #wpbody-content', + 'likecoHost' => LC_LIKE_CO_HOST, + 'likerlandHost' => LC_LIKER_LAND_HOST, + ) ); } diff --git a/likecoin/includes/constant/options.php b/likecoin/includes/constant/options.php index a19e3fc0..30b64448 100644 --- a/likecoin/includes/constant/options.php +++ b/likecoin/includes/constant/options.php @@ -69,3 +69,6 @@ define( 'LC_MATTERS_USER_ACCESS_TOKEN_FIELD', 'access_token' ); define( 'LC_MATTERS_API_ENDPOINT', 'https://server.matters.news/graphql' ); + +define( 'LC_LIKE_CO_HOST', 'like.co' ); +define( 'LC_LIKER_LAND_HOST', 'liker.land' ); diff --git a/likecoin/js/admin-settings/src/components/LikeButtonPreview.js b/likecoin/js/admin-settings/src/components/LikeButtonPreview.js index f0fef196..800c93ab 100644 --- a/likecoin/js/admin-settings/src/components/LikeButtonPreview.js +++ b/likecoin/js/admin-settings/src/components/LikeButtonPreview.js @@ -3,12 +3,12 @@ import { ReactComponent as SettingSvg } from './icon/settings.svg'; function LikeButtonPreview(props) { const iframeSrc = props.userLikerId.length > 0 - ? `https://button.like.co/in/embed/${props.userLikerId}/button?type=wp&integration=wordpress_plugin` + ? `https://button.${props.likecoHost}/in/embed/${props.userLikerId}/button?type=wp&integration=wordpress_plugin` : ''; const iframeStyle = { pointerEvents: 'none', - height: '212px', - width: '500px', + height: '480px', + width: '360px', }; return (
@@ -18,7 +18,7 @@ function LikeButtonPreview(props) { rel="noopener noreferrer" target="_blank" className="icon" - href="https://like.co/in/settings" + href={`https://${props.likecoHost}/in/settings`} > diff --git a/likecoin/js/admin-settings/src/components/LikecoinInfoTable.js b/likecoin/js/admin-settings/src/components/LikecoinInfoTable.js index 3b927191..59fd1a82 100644 --- a/likecoin/js/admin-settings/src/components/LikecoinInfoTable.js +++ b/likecoin/js/admin-settings/src/components/LikecoinInfoTable.js @@ -7,7 +7,7 @@ function LikecoinInfoTable(props) { return ( {props.isMainSettingPage && ( - {__('Site Liker ID', 'likecoin')} + {__('Site Default Liker ID', 'likecoin')} )} @@ -37,7 +37,7 @@ function LikecoinInfoTable(props) { id="likecoinId" rel="noopener noreferrer" target="_blank" - href={`https://like.co/${props.likerIdValue}`} + href={`https://${props.likecoHost}/${props.likerIdValue}`} className="likecoin likecoinId" > {props.likerIdValue} @@ -59,7 +59,7 @@ function LikecoinInfoTable(props) { className="likecoinInputLabel" target="blacnk" rel="noopener" - href="https://like.co/in" + href={`https://${props.likecoHost}/in`} > {__('Sign Up / Find my Liker ID', 'likecoin')} diff --git a/likecoin/js/admin-settings/src/components/MainSettingTable.js b/likecoin/js/admin-settings/src/components/MainSettingTable.js index 44ae33c1..8752b85f 100644 --- a/likecoin/js/admin-settings/src/components/MainSettingTable.js +++ b/likecoin/js/admin-settings/src/components/MainSettingTable.js @@ -63,11 +63,11 @@ function MainSettingTable(props) { setIsLoading(true); try { const response = await axios.get( - `https://api.like.co/users/id/${likerId}/min`, + `https://api.${props.likecoHost}/users/id/${likerId}/min`, ); setLikerIdValue(response.data.user); setLikerDisplayName(response.data.displayName); - setLikerWalletAddress(response.data.cosmosWallet); + setLikerWalletAddress(response.data.likeWallet); setLikerAvatar(response.data.avatar); } catch (error) { console.error(error); // eslint-disable-line no-console @@ -121,15 +121,10 @@ function MainSettingTable(props) { displayOption, perPostOptionEnabled: isPerPostOptionEnabled, siteLikerInfos: { - likecoin_id: - likerDisplayName === '-' ? DBSiteLikerId : likerIdValue, - display_name: - likerDisplayName === '-' - ? DBSiteLikerDisplayName - : likerDisplayName, - wallet: - likerDisplayName === '-' ? DBSiteLikerWallet : likerWalletAddress, - avatar: likerDisplayName === '-' ? DBSiteLikerAvatar : likerAvatar, + likecoin_id: likerIdValue, + display_name: likerDisplayName, + wallet: likerWalletAddress, + avatar: likerAvatar, }, }; try { @@ -151,7 +146,13 @@ function MainSettingTable(props) { setSavedSuccessful(false); setSubmitResponse(null); } - const handleDisconnect = () => {}; + function handleDisconnect(e) { + e.preventDefault(); + setLikerIdValue(''); + setLikerDisplayName(''); + setLikerWalletAddress(''); + setLikerAvatar(''); + } const forbiddenString = __('Sorry, you are not allowed to access this page.', 'likecoin'); @@ -180,20 +181,32 @@ function MainSettingTable(props) { /> )} -
+
+ - {siteLikerIdEnabled && ( + +
+
- )} - -
-
- diff --git a/likecoin/js/admin-settings/src/pages/LikecoinButtonPage.js b/likecoin/js/admin-settings/src/pages/LikecoinButtonPage.js index 7e0f3d37..9a8aafd9 100644 --- a/likecoin/js/admin-settings/src/pages/LikecoinButtonPage.js +++ b/likecoin/js/admin-settings/src/pages/LikecoinButtonPage.js @@ -14,6 +14,8 @@ import LikecoinHeading from '../components/LikecoinHeading'; import { SITE_LIKER_INFO_STORE_NAME } from '../store/site-likerInfo-store'; import { USER_LIKER_INFO_STORE_NAME } from '../store/user-likerInfo-store'; +const { likecoHost } = window.likecoinReactAppData; + function PureLikecoinButtonPage(props) { const [siteLikerIdEnabled] = useState(props.DBSiteLikerIdEnabled); const [likerIdValue, setLikerIdValue] = useState(props.defaultLikerId); @@ -38,11 +40,11 @@ function PureLikecoinButtonPage(props) { if (!likerId) return; try { const response = await axios.get( - `https://api.like.co/users/id/${likerId}/min`, + `https://api.${likecoHost}/users/id/${likerId}/min`, ); setLikerIdValue(response.data.user); setLikerDisplayName(response.data.displayName); - setLikerWalletAddress(response.data.cosmosWallet); + setLikerWalletAddress(response.data.likeWallet); setLikerAvatar(response.data.avatar); setIsLoading(false); setHasValidLikecoinId(true); @@ -144,6 +146,7 @@ function PureLikecoinButtonPage(props) {
)} @@ -190,7 +194,7 @@ function LikecoinButtonPage() { const { postUserLikerInfo } = useDispatch(USER_LIKER_INFO_STORE_NAME); const defaultLikerId = useMemo( - () => (DBSiteLikerIdEnabled ? DBSiteLikerId : DBUserLikerId), + () => (DBSiteLikerIdEnabled ? DBSiteLikerId : (DBUserLikerId || DBSiteLikerId)), [DBSiteLikerIdEnabled, DBSiteLikerId, DBUserLikerId], ); const defaultLikerDisplayName = useMemo( diff --git a/likecoin/js/admin-settings/src/pages/MainSettingPage.js b/likecoin/js/admin-settings/src/pages/MainSettingPage.js index ac89bfcd..c3550bf5 100644 --- a/likecoin/js/admin-settings/src/pages/MainSettingPage.js +++ b/likecoin/js/admin-settings/src/pages/MainSettingPage.js @@ -2,11 +2,16 @@ import { useDispatch } from '@wordpress/data'; import MainSettingTable from '../components/MainSettingTable'; import { SITE_LIKER_INFO_STORE_NAME } from '../store/site-likerInfo-store'; +const { likecoHost } = window.likecoinReactAppData; + function MainSettingPage() { const { postSiteLikerInfo } = useDispatch(SITE_LIKER_INFO_STORE_NAME); return (
- +
); } diff --git a/likecoin/js/admin-settings/src/pages/SponsorLikecoinPage.js b/likecoin/js/admin-settings/src/pages/SponsorLikecoinPage.js index f92e3369..7d569e1f 100644 --- a/likecoin/js/admin-settings/src/pages/SponsorLikecoinPage.js +++ b/likecoin/js/admin-settings/src/pages/SponsorLikecoinPage.js @@ -4,6 +4,8 @@ import LikecoinHeading from '../components/LikecoinHeading'; import ParagraphTitle from '../components/ParagraphTitle'; import Link from '../components/Link'; +const { likerlandHost } = window.likecoinReactAppData; + function SponsorLikecoinPage() { const localizedIntroduction = createInterpolateElement( __( @@ -50,7 +52,7 @@ function SponsorLikecoinPage() { }), CivicLiker: createElement(Link, { text: __('Civic Liker', 'likecoin'), - linkAddress: 'https://liker.land/civic', + linkAddress: `https://${likerlandHost}/civic`, }), }, ); diff --git a/likecoin/js/admin/likecoin_metabox.js b/likecoin/js/admin/likecoin_metabox.js index cdb28b81..e71e8d7c 100644 --- a/likecoin/js/admin/likecoin_metabox.js +++ b/likecoin/js/admin/likecoin_metabox.js @@ -35,7 +35,7 @@ const MAIN_STATUS_TEXT_MAP = { onRegisterISCN: mainStatusRegisterISCN, }; -const ISCN_WIDGET_ORIGIN = 'https://like.co'; +const ISCN_WIDGET_ORIGIN = `https://${window.wpApiSettings.likecoHost}`; function updateMainTitleField(signalCSSClass, text) { mainTitleField.textContent = ''; @@ -100,7 +100,7 @@ async function onRefreshPublishStatus(e) { text: iscnId, rel: 'noopener', target: '_blank', - href: `https://app.like.co/view/${iscnIdString}`, + href: `https://app.${window.wpApiSettings.likecoHost}/view/${iscnIdString}`, }); updateFieldStatusElement(ISCNStatusTextField, ISCNLink); } else if ( // show button diff --git a/likecoin/js/sidebar/src/pages/LikeCoinPlugin.js b/likecoin/js/sidebar/src/pages/LikeCoinPlugin.js index d14490f0..aa8310bb 100644 --- a/likecoin/js/sidebar/src/pages/LikeCoinPlugin.js +++ b/likecoin/js/sidebar/src/pages/LikeCoinPlugin.js @@ -5,10 +5,10 @@ import LikeCoinPluginDocumentSettingPanel from './LikeCoinPluginDocumentSettingP import LikeCoinPluginSideBar from './LikeCoinPluginSideBar'; import LikeCoinPluginPostPublishPanel from './LikeCoinPluginPostPublishPanel'; -const { siteurl } = window.wpApiSettings; +const { siteurl, likecoHost, likerlandHost } = window.wpApiSettings; -const ISCN_WIDGET_ORIGIN = 'https://like.co'; -const NFT_WIDGET_ORIGIN = 'https://app.like.co'; +const ISCN_WIDGET_ORIGIN = `https://${likecoHost}`; +const NFT_WIDGET_ORIGIN = `https://app.${likecoHost}`; const ISCN_RECORD_NOTE = 'LikeCoin WordPress Plugin'; function LikeCoinPlugin(props) { @@ -245,7 +245,7 @@ function LikeCoinPlugin(props) { e.preventDefault(); if (!ISCNId) return; const redirectString = encodeURIComponent(siteurl); - const nftUrl = NFTClassId ? `https://liker.land/nft/class/${encodeURIComponent( + const nftUrl = NFTClassId ? `https://${likerlandHost}/nft/class/${encodeURIComponent( NFTClassId, )}` : `${NFT_WIDGET_ORIGIN}/nft/iscn/${encodeURIComponent(ISCNId)}?opener=1&redirect_uri=${redirectString}`; const nftWindow = window.open(nftUrl, '_blank'); diff --git a/likecoin/js/sidebar/src/pages/LikeCoinPluginSideBar.js b/likecoin/js/sidebar/src/pages/LikeCoinPluginSideBar.js index 5410910c..2d83049a 100644 --- a/likecoin/js/sidebar/src/pages/LikeCoinPluginSideBar.js +++ b/likecoin/js/sidebar/src/pages/LikeCoinPluginSideBar.js @@ -18,7 +18,7 @@ import settingPageEndpoint from '../store/constant'; import PublishStatus from '../components/PublishStatus'; import LikeCoinIconPinbar from '../components/LikeCoinIconPinbar'; -const { siteurl } = window.wpApiSettings; +const { siteurl, likecoHost, likerlandHost } = window.wpApiSettings; function LikeCoinPluginSideBar(props) { const content = useSelect((select) => select('core/editor').getEditedPostAttribute('content')); @@ -162,7 +162,7 @@ function LikeCoinPluginSideBar(props) { status={props.ISCNId ? props.ISCNId : '-'} link={ props.ISCNId - ? `https://app.like.co/view/${encodeURIComponent( + ? `https://app.${likecoHost}/view/${encodeURIComponent( props.ISCNId, )}` : '' @@ -171,10 +171,10 @@ function LikeCoinPluginSideBar(props) { {props.ISCNId && ( ID, LC_OPTION_WIDGET_OPTION, true ); // default to 'bottom' if nothing is set, since liker id is set. @@ -62,6 +48,10 @@ function likecoin_add_likebutton( $likecoin_id = '' ) { $per_post_widget_position = $widget_option[ LC_OPTION_WIDGET_POSITION ]; } } + + // check widget is enabled in site setting. + $widget_position = 'bottom'; // default to bottom. + $post_type_query = ''; // empty query means any type. if ( isset( $per_post_widget_position ) && ! empty( $per_post_widget_position ) ) { $widget_position = $per_post_widget_position; } elseif ( $widget_position ) { // follow site setting. @@ -81,20 +71,30 @@ function likecoin_add_likebutton( $likecoin_id = '' ) { } } }; + $widget_is_enabled = ! empty( $widget_position ) && 'none' !== $widget_position; + if ( ! $widget_is_enabled ) { + return ''; + } $iscn_mainnet_info = get_post_meta( $post->ID, LC_ISCN_INFO, true ); $iscn_id = ''; if ( $iscn_mainnet_info ) { $iscn_id = $iscn_mainnet_info['iscn_id']; } - if ( strlen( $iscn_id ) > 0 ) { + $is_iscn_button = strlen( $iscn_id ) > 0; + if ( $is_iscn_button ) { // override Liker ID with ISCN. $likecoin_id = 'iscn'; - } elseif ( strlen( $likecoin_id ) <= 0 ) { - if ( ! empty( $option[ LC_OPTION_SITE_BUTTON_ENABLED ] ) && ! empty( $option[ LC_OPTION_SITE_LIKECOIN_USER ][ LC_LIKECOIN_USER_ID_FIELD ] ) ) { - $likecoin_id = $option[ LC_OPTION_SITE_LIKECOIN_USER ][ LC_LIKECOIN_USER_ID_FIELD ]; + } else { + // check site id override. + $site_liker_id = empty( $option[ LC_OPTION_SITE_LIKECOIN_USER ][ LC_LIKECOIN_USER_ID_FIELD ] ) ? '' : $option[ LC_OPTION_SITE_LIKECOIN_USER ][ LC_LIKECOIN_USER_ID_FIELD ]; + if ( ! empty( $option[ LC_OPTION_SITE_BUTTON_ENABLED ] ) && $site_liker_id ) { + $likecoin_id = $site_liker_id; } elseif ( $post ) { $likecoin_id = likecoin_get_author_likecoin_id( $post ); + if ( empty( $likecoin_id ) ) { + $likecoin_id = $site_liker_id; + } } } if ( empty( $likecoin_id ) ) { @@ -102,8 +102,7 @@ function likecoin_add_likebutton( $likecoin_id = '' ) { } $likecoin_button_widget = ''; - $widget_is_enabled = ! empty( $widget_position ) && 'none' !== $widget_position; - if ( $widget_is_enabled && is_singular( $post_type_query ) ) { + if ( is_singular( $post_type_query ) ) { $like_target = ''; if ( ! is_preview() ) { if ( strlen( $iscn_id ) > 0 ) { @@ -114,8 +113,8 @@ function likecoin_add_likebutton( $likecoin_id = '' ) { } $sandbox_attr = function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ? 'sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation allow-storage-access-by-user-activation" ' : ''; $widget_code = '
'; $likecoin_button_widget = $widget_code; }