diff --git a/src/FormExtension/FormBuilder/Actions/LoadFormBuilderAssets.php b/src/FormExtension/FormBuilder/Actions/LoadFormBuilderAssets.php index a94f570..6b85020 100644 --- a/src/FormExtension/FormBuilder/Actions/LoadFormBuilderAssets.php +++ b/src/FormExtension/FormBuilder/Actions/LoadFormBuilderAssets.php @@ -18,7 +18,8 @@ public function __invoke() /** * This global path refers to the compiled version of the 'FormExtension/FormBuilder/resources/css/index.scss' style */ - $globalStylePath = trailingslashit(ADDON_CONSTANT_URL) . 'build/GiveAddonFormBuilderExtensionGlobalStyle.css'; + $globalStylePath = ADDON_CONSTANT_DIR . 'build/GiveAddonFormBuilderExtensionGlobalStyle.css'; + $globalStyleUrl = trailingslashit(ADDON_CONSTANT_URL) . 'build/GiveAddonFormBuilderExtensionGlobalStyle.css'; /** * This path refers to the compiled version of the '.module.scss' files present in the 'FormExtension/FormBuilder/resources/js/index.tsx' script @@ -27,30 +28,28 @@ public function __invoke() * and it gets compiled with WP Scripts, then a .js file is generated in the build folder alongside a style file * with the same entry name but with the .css extension. */ - $stylePath = trailingslashit(ADDON_CONSTANT_URL) . 'build/GiveAddonFormBuilderExtension.css'; + $cssModuleStylePath = ADDON_CONSTANT_DIR . 'build/GiveAddonFormBuilderExtension.css'; + $cssModuleStyleUrl = trailingslashit(ADDON_CONSTANT_URL) . 'build/GiveAddonFormBuilderExtension.css'; /** * This global path refers to the compiled version of the 'FormExtension/FormBuilder/resources/js/index.tsx' script */ - $scriptPath = trailingslashit(ADDON_CONSTANT_URL) . 'build/GiveAddonFormBuilderExtension.js'; - - - + $scriptUrl = trailingslashit(ADDON_CONSTANT_URL) . 'build/GiveAddonFormBuilderExtension.js'; $assets = ScriptAsset::get(trailingslashit(ADDON_CONSTANT_URL) . '/build/GiveAddonFormBuilderExtension.asset.php'); if (file_exists($globalStylePath)) { wp_enqueue_style( 'givewp-form-extension-ADDON_ID-global-style', - $globalStylePath, + $globalStyleUrl, [], $assets['version'] ); - } + } - if (file_exists($stylePath)) { + if (file_exists($cssModuleStylePath)) { wp_enqueue_style( 'givewp-form-extension-ADDON_ID-style', - $stylePath, + $cssModuleStyleUrl, [], $assets['version'] ); @@ -58,7 +57,7 @@ public function __invoke() wp_enqueue_script( 'givewp-form-extension-ADDON_ID', - $scriptPath, + $scriptUrl, $assets['dependencies'], $assets['version'], true diff --git a/src/FormExtension/FormBuilder/ViewModels/GiveAddonViewModel.php b/src/FormExtension/FormBuilder/ViewModels/GiveAddonViewModel.php index ed4728e..679063a 100644 --- a/src/FormExtension/FormBuilder/ViewModels/GiveAddonViewModel.php +++ b/src/FormExtension/FormBuilder/ViewModels/GiveAddonViewModel.php @@ -34,9 +34,9 @@ public function exports(): array ]; $sampleTags = [ - ['tag' => 'sitename', 'desc' => __('Site Name', 'give-pdf-receipts')], - ['tag' => 'today', 'desc' => __('Date of Receipt Generation', 'give-pdf-receipts')], - ['tag' => 'date', 'desc' => __('Receipt Date', 'give-pdf-receipts')], + ['tag' => 'sitename', 'desc' => __('Site Name', 'give-addon-receipts')], + ['tag' => 'today', 'desc' => __('Date of Receipt Generation', 'give-addon-receipts')], + ['tag' => 'date', 'desc' => __('Receipt Date', 'give-addon-receipts')], ]; return [ diff --git a/src/FormExtension/FormBuilder/resources/css/index.scss b/src/FormExtension/FormBuilder/resources/css/index.scss index e69de29..6964af7 100644 --- a/src/FormExtension/FormBuilder/resources/css/index.scss +++ b/src/FormExtension/FormBuilder/resources/css/index.scss @@ -0,0 +1 @@ +@import "./styles/components"; diff --git a/src/FormExtension/FormBuilder/resources/css/styles/_components.scss b/src/FormExtension/FormBuilder/resources/css/styles/_components.scss new file mode 100644 index 0000000..44d259d --- /dev/null +++ b/src/FormExtension/FormBuilder/resources/css/styles/_components.scss @@ -0,0 +1,74 @@ +.give-addon-settings__logo_upload__wrapper { + display: flex; + gap: 0.25rem; + + div { + width: 100% !important; + } + + button { + border-radius: 0.125rem; + flex: 0 0 auto; + height: auto; + max-width: 9.75rem; + padding-left: 1rem; + padding-right: 1rem; + } +} + +.give-addon-settings-template-tags { + max-height: 25rem; + overflow-y: scroll; + border: 1px solid var(--givewp-grey-100); + border-radius: 2px; + scroll-snap-type: y mandatory; + width: 100%; + + &__copy-btn { + display: flex; + align-items: center; + gap: 0.25rem; + height: fit-content; + padding-block: 0.5rem; + font-size: 12px; + } + + & > li { + scroll-snap-align: start; + } + + li { + padding: var(--givewp-spacing-2) var(--givewp-spacing-2) var(--givewp-spacing-4) var(--givewp-spacing-2); + margin: 0; + position: relative; + + &:hover button { + visibility: visible; + } + + button { + visibility: hidden; + position: absolute; + top: 2px; + right: var(--givewp-spacing-2); + } + } + + li:nth-child(even) { + background-color: var(--givewp-grey-5); + } + + strong { + font-size: 13px; + background-color: var(--givewp-blue-25); + display: inline-block; + margin-bottom: var(--givewp-spacing-3); + line-height: 1.137rem; + } + + p { + margin: 0; // Override the default margin. + } +} + + diff --git a/src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/Edit.tsx b/src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/Edit.tsx index 2488fe4..723b0ec 100644 --- a/src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/Edit.tsx +++ b/src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/Edit.tsx @@ -57,7 +57,8 @@ export default function Edit({attributes, setAttributes}: BlockEditProps) { const enabledOptions = filterCheckedOptions(mergeOptionsWithColors(options, colors)); if (enabledOptions.length === 0) { options.find( - (option: OptionProps) => option.value === colors.find((fund: ColorOptionProps) => fund.isDefault).value + (option: OptionProps) => + option.value === colors.find((color: ColorOptionProps) => color.isDefault).value ).checked = true; setIsAdminChoice(true); } else { @@ -73,7 +74,7 @@ export default function Edit({attributes, setAttributes}: BlockEditProps) { disabled={isAdminChoice} label={label} options={donorSelectOptions} - onChange={(value: string) => setAttributes({fund: value})} + onChange={(value: string) => setAttributes({color: value})} help={ isAdminChoice && __( @@ -83,7 +84,7 @@ export default function Edit({attributes, setAttributes}: BlockEditProps) { } /> - + ) { multiple={true} options={mergeOptionsWithColors(options, colors)} setOptions={(newOptions: any) => setAttributes({options: newOptions})} - label={__('Funds', 'ADDON_TEXTDOMAIN')} + label={__('Colors', 'ADDON_TEXTDOMAIN')} readOnly={true} disableSoloCheckedOption={true} /> @@ -108,7 +109,7 @@ export default function Edit({attributes, setAttributes}: BlockEditProps) {

{createInterpolateElement( __( - 'Select colors to designate for this donation form. You can add or edit your colors in the colors settings.', + "Select colors to designate for this donation form. You can add or edit your colors in the colors settings. This is a sample, the linked page doesn't exist!", 'ADDON_TEXTDOMAIN' ), { diff --git a/src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/metadata.ts b/src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/metadata.ts index 6bd6b09..dc8c297 100644 --- a/src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/metadata.ts +++ b/src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/metadata.ts @@ -7,7 +7,7 @@ const {colors} = getGiveAddonFormBuilderWindowData(); const metadata: BlockConfiguration = { name: 'givewp/colors-sample-block', title: __('Colors Sample Block', 'ADDON_TEXTDOMAIN'), - description: __('Set the color you would like to use to customize your swags.', 'ADDON_TEXTDOMAIN'), + description: __("Set the primary color to customize the donor's swags.", 'ADDON_TEXTDOMAIN'), category: 'addons', icon: 'yes', supports: { diff --git a/src/FormExtension/FormBuilder/resources/js/components/CopyToClipboardButton.tsx b/src/FormExtension/FormBuilder/resources/js/components/CopyToClipboardButton.tsx index 59c3aa8..8be2e86 100644 --- a/src/FormExtension/FormBuilder/resources/js/components/CopyToClipboardButton.tsx +++ b/src/FormExtension/FormBuilder/resources/js/components/CopyToClipboardButton.tsx @@ -26,7 +26,7 @@ const CopyToClipboardButton = ({textToCopy}: CopyClipboardButtonProps) => { ref={ref as Ref} icon={copyIcon} > - {isCopied ? __('Copied!', 'give-pdf-receipts') : __('Copy Tag', 'give-pdf-receipts')} + {isCopied ? __('Copied!', 'give-addon-receipts') : __('Copy Tag', 'give-addon-receipts')} ); }; diff --git a/src/FormExtension/FormBuilder/resources/js/components/ImageUpload.tsx b/src/FormExtension/FormBuilder/resources/js/components/ImageUpload.tsx index ba7919b..c612f0d 100644 --- a/src/FormExtension/FormBuilder/resources/js/components/ImageUpload.tsx +++ b/src/FormExtension/FormBuilder/resources/js/components/ImageUpload.tsx @@ -26,9 +26,9 @@ export default ({value, onChange}) => { } frame = window.wp.media({ - title: __('Add or upload file', 'give-pdf-receipts'), + title: __('Add or upload file', 'give-addon-receipts'), button: { - text: __('Use this media', 'give-pdf-receipts'), + text: __('Use this media', 'give-addon-receipts'), }, multiple: false, // Set to true to allow multiple files to be selected }); @@ -45,14 +45,14 @@ export default ({value, onChange}) => { }; return ( -

+
diff --git a/src/FormExtension/FormBuilder/resources/js/settings/CustomSettings/index.tsx b/src/FormExtension/FormBuilder/resources/js/settings/CustomSettings/index.tsx index daa912d..d87c70c 100644 --- a/src/FormExtension/FormBuilder/resources/js/settings/CustomSettings/index.tsx +++ b/src/FormExtension/FormBuilder/resources/js/settings/CustomSettings/index.tsx @@ -62,7 +62,7 @@ const CustomSettings = ({addonSettings, updateAddonSettings}: customSettingsProp > - + updateAddonSettings('imageSelectorOptionSample', value)} @@ -167,7 +167,7 @@ const CustomSettings = ({addonSettings, updateAddonSettings}: customSettingsProp description={__('Description Sample Tags.', 'ADDON_TEXTDOMAIN')} > -
    +
      {sampleTags.map((tag) => (
    • {'{' + tag.tag + '}'} @@ -180,7 +180,7 @@ const CustomSettings = ({addonSettings, updateAddonSettings}: customSettingsProp