-
- $frequency_name ) : ?>
-
-
-
-
+
$frequency_name ) : ?>
-
'
@@ -246,6 +262,7 @@ class='odl'
for='newspack-tier--other-input'
>
+
@@ -279,6 +296,14 @@ class='tier-select-label tier-label'
?>
+
+
+
diff --git a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php
index 50c72ea7e..aeebee906 100644
--- a/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php
+++ b/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php
@@ -136,16 +136,22 @@ class=""
-
- $frequency_name ) : ?>
-
-
-
+ 1 ) : ?>
+
+ $frequency_name ) : ?>
+
+
+
+
+
$amount ) : ?>
{
+ // eslint-disable-next-line no-nested-ternary
+ return frequencySlug === 'once'
+ ? hideOnceLabel
+ ? ''
+ : __( ' once', 'newspack-blocks' )
+ : sprintf(
+ // Translators: %s is the frequency (e.g. per month, per year).
+ _x( ' per %s', 'per `Frequency`', 'newspack-blocks' ),
+ frequencySlug
+ );
+}
+
+export const getFrequencyLabelWithAmount = (
amount: number,
frequencySlug: DonationFrequencySlug,
hideOnceLabel = false
@@ -88,17 +104,7 @@ export const getFrequencyLabel = (
const formattedAmount = ( amount || 0 ).toFixed( 2 ).replace( /\.?0*$/, '' );
- const frequency =
- // eslint-disable-next-line no-nested-ternary
- frequencySlug === 'once'
- ? hideOnceLabel
- ? ''
- : __( ' once', 'newspack-blocks' )
- : sprintf(
- // Translators: %s is the frequency (e.g. per month, per year).
- _x( ' per %s', 'per `Frequency`', 'newspack-blocks' ),
- frequencySlug
- );
+ const frequency = getFrequencyLabel(frequencySlug, hideOnceLabel)
return template
.replace( 'AMOUNT_PLACEHOLDER', formattedAmount )
diff --git a/src/blocks/donate/view.js b/src/blocks/donate/view.js
deleted file mode 100644
index b6093c865..000000000
--- a/src/blocks/donate/view.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * Style dependencies
- */
-
-import './styles/view.scss';
diff --git a/src/blocks/donate/view.ts b/src/blocks/donate/view.ts
new file mode 100644
index 000000000..89cccb589
--- /dev/null
+++ b/src/blocks/donate/view.ts
@@ -0,0 +1,53 @@
+/**
+ * Style dependencies
+ */
+import { isString } from 'lodash';
+import './styles/view.scss';
+
+type FormValues = { [key: string]: string };
+
+const CLASS_NAME_BASE = 'wpbnbd';
+const selectedClassNameBase = `${CLASS_NAME_BASE}--selected`;
+
+const donateBlocks = Array.from(
+ document.querySelectorAll(`.${CLASS_NAME_BASE}`)
+);
+
+export const updateBlockClassName = (
+ element: Element,
+ formValues: FormValues
+) => {
+ const amountKey = `donation_value_${formValues.donation_frequency}`;
+ if (amountKey) {
+ Array.from(element.classList).forEach(className => {
+ if (className.startsWith(selectedClassNameBase)) {
+ element.classList.remove(className);
+ }
+ });
+ element.classList.add(
+ `${selectedClassNameBase}-${formValues[amountKey]}`
+ );
+ }
+};
+
+export const getFormData: (form: HTMLFormElement) => FormValues = form => {
+ const formData = new FormData(form);
+ const formValues: FormValues = {};
+ formData.forEach((value, key) => {
+ if (isString(key) && isString(value)) {
+ formValues[key] = value;
+ }
+ });
+ return formValues;
+};
+
+donateBlocks.forEach(element => {
+ const form = element.querySelector('form');
+ if (!form) {
+ return;
+ }
+ updateBlockClassName(element, getFormData(form));
+ form.addEventListener('change', () =>
+ updateBlockClassName(element, getFormData(form))
+ );
+});
diff --git a/webpack.config.js b/webpack.config.js
index 2ffeffbaf..828557cd7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -33,8 +33,15 @@ const blocks = fs
// Helps split up each block into its own folder view script
const viewBlocksScripts = blocks.reduce( ( viewBlocks, block ) => {
- const viewScriptPath = path.join( __dirname, 'src', 'blocks', block, 'view.js' );
- if ( fs.existsSync( viewScriptPath ) ) {
+ const pathToBlock = [__dirname, 'src', 'blocks', block]
+ let viewScriptPath = path.join( ...pathToBlock, 'view.js' );
+ let fileExists = fs.existsSync( viewScriptPath )
+ if (!fileExists) {
+ // Try TS.
+ viewScriptPath = path.join( ...pathToBlock, 'view.ts' );
+ fileExists = fs.existsSync( viewScriptPath )
+ }
+ if ( fileExists ) {
viewBlocks[ block + '/view' ] = viewScriptPath;
}
return viewBlocks;