refactor: replace strings

impress-org · Apr 12, 2024 · 56ac8f3 · 56ac8f3
1 parent 00f5f7b
commit 56ac8f3
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 33 deletions.
diff --git 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,38 +28,36 @@ 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']
             );
         }
 
         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
@@ -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
@@ -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
@@ -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
@@ -57,7 +57,8 @@ export default function Edit({attributes, setAttributes}: BlockEditProps<any>) {
         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<any>) {
                 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<any>) {
                 }
             />
             <InspectorControls>
-                <PanelBody title={__('Colors - Sample Block', 'ADDON_TEXTDOMAIN')} initialOpen={true}>
+                <PanelBody title={__('Settings', 'ADDON_TEXTDOMAIN')} initialOpen={true}>
                     <PanelRow>
                         <TextControl
                             label={__('Label', 'ADDON_TEXTDOMAIN')}
@@ -99,7 +100,7 @@ export default function Edit({attributes, setAttributes}: BlockEditProps<any>) {
                             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<any>) {
                     <p>
                         {createInterpolateElement(
                             __(
-                                'Select colors to designate for this donation form. You can add or edit your colors in the <a>colors settings.</a>',
+                                "Select colors to designate for this donation form. You can add or edit your colors in the <a>colors settings.</a> 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
@@ -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
@@ -26,7 +26,7 @@ const CopyToClipboardButton = ({textToCopy}: CopyClipboardButtonProps) => {
             ref={ref as Ref<HTMLAnchorElement>}
             icon={copyIcon}
         >
-            {isCopied ? __('Copied!', 'give-pdf-receipts') : __('Copy Tag', 'give-pdf-receipts')}
+            {isCopied ? __('Copied!', 'give-addon-receipts') : __('Copy Tag', 'give-addon-receipts')}
         </Button>
     );
 };

diff --git 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 (
         <BaseControl
-            id={'pdf-builder-settings__logo_upload'}
-            label={__('Image URL', 'give-pdf-receipts')}
-            help={__('Max height of image should be 90px', 'give-pdf-receipts')}
+            id={'give-addon-settings__logo_upload'}
+            label={__('Image URL', 'give-addon-receipts')}
+            help={__('Max height of image should be 90px', 'give-addon-receipts')}
         >
-            <div className={'pdf-builder-settings__logo_upload__wrapper'}>
+            <div className={'give-addon-settings__logo_upload__wrapper'}>
                 <TextControl type={'url'} value={value} onChange={onChange} />
                 <Button icon={upload} variant={'secondary'} onClick={openMediaLibrary}>
-                    {__('Add or upload file', 'give-pdf-receipts')}
+                    {__('Add or upload file', 'give-addon-receipts')}
                 </Button>
             </div>
         </BaseControl>

diff --git 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
             >
                 <PanelRow>
                     <RadioControl
-                        className="radio-control--pdf-builder-options"
+                        className="radio-control--give-addonoptions"
                         label={__('Radio Option Sample', 'ADDON_TEXTDOMAIN')}
                         hideLabelFromVision={true}
                         selected={addonSettings.radioOptionSample ?? 'option_1'}
@@ -142,7 +142,7 @@ const CustomSettings = ({addonSettings, updateAddonSettings}: customSettingsProp
                 title={__('Image Selector Option Sample', 'ADDON_TEXTDOMAIN')}
                 description={__('Description Image Selector Option Sample.', 'ADDON_TEXTDOMAIN')}
             >
-                <PanelRow className={'pdf-builder-settings__logo_upload'}>
+                <PanelRow className={'give-addon-settings__logo_upload'}>
                     <ImageUpload
                         value={addonSettings.imageSelectorOptionSample}
                         onChange={(value: string) => updateAddonSettings('imageSelectorOptionSample', value)}
@@ -167,7 +167,7 @@ const CustomSettings = ({addonSettings, updateAddonSettings}: customSettingsProp
                 description={__('Description Sample Tags.', 'ADDON_TEXTDOMAIN')}
             >
                 <PanelRow>
-                    <ul className={'pdf-builder-settings-template-tags'} ref={templateTagsRef}>
+                    <ul className={'give-addon-settings-template-tags'} ref={templateTagsRef}>
                         {sampleTags.map((tag) => (
                             <li key={tag.tag}>
                                 <strong>{'{' + tag.tag + '}'}</strong>
@@ -180,7 +180,7 @@ const CustomSettings = ({addonSettings, updateAddonSettings}: customSettingsProp
             </SettingsSection>
 
             <Button
-                className={'pdf-builder-settings__pdf-builder-btn'}
+                className={'give-addon-settings__preview-btn'}
                 variant={'secondary'}
                 onClick={() =>
                     window.open(previewUrl + '&donationFormID=' + donationFormID, '_blank', 'noopener,noreferrer')

diff --git a/src/FormExtension/FormBuilder/resources/js/settings/index.tsx b/src/FormExtension/FormBuilder/resources/js/settings/index.tsx
@@ -30,7 +30,10 @@ export default function GiveAddonSettings({settings, setSettings}) {
     };
 
     const globalSettingsHelperText = createInterpolateElement(
-        __('Uses <a>global settings</a> when disabled.', 'ADDON_TEXTDOMAIN'),
+        __(
+            "Uses <a>global settings</a> when disabled. This is a sample, the linked page doesn't exist!",
+            'ADDON_TEXTDOMAIN'
+        ),
         {
             a: <a href={globalOptionsUrl} target="_blank" />,
         }