Refactor: update plans & pricing content in add-ons page (#7044)

impress-org · Nov 2, 2023 · 1a61550 · 1a61550
1 parent 5744000
commit 1a61550
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/Promotions/InPluginUpsells/resources/js/components/AddonsAdminPage.js b/src/Promotions/InPluginUpsells/resources/js/components/AddonsAdminPage.js
@@ -56,19 +56,19 @@ export function AddonsAdminPage({startingTab = 0}) {
                         }}
                     />
                     <TabList className={styles.tabs}>
-                        <Tab id="tab-1">{__('Must Have Add-ons', 'give')}</Tab>
-                        <Tab id="tab-2">{__('View Pricing Plans', 'give')}</Tab>
+                        <Tab id="tab-1">{__('View Pricing Plans', 'give')}</Tab>
+                        <Tab id="tab-2">{__('Must Have Add-ons', 'give')}</Tab>
                         <Tab id="tab-3">{__('Additional Add-ons', 'give')}</Tab>
                         <Tab id="tab-4">{__('Get a Free Add-on!', 'give')}</Tab>
                     </TabList>
                 </div>
             </div>
             <div className={styles.container}>
                 <TabPanel id="tab-1">
-                    <MustHaveAddons />
+                    <PricingPlans />
                 </TabPanel>
                 <TabPanel id="tab-2">
-                    <PricingPlans />
+                    <MustHaveAddons />
                 </TabPanel>
                 <TabPanel id="tab-3">
                     <AdditionalAddons />
@@ -79,4 +79,4 @@ export function AddonsAdminPage({startingTab = 0}) {
             </div>
         </Tabs>
     );
-}
+}
diff --git a/src/Promotions/InPluginUpsells/resources/js/components/PricingPlans.js b/src/Promotions/InPluginUpsells/resources/js/components/PricingPlans.js
@@ -4,11 +4,19 @@ import styles from './PricingPlans.module.css';
 
 const {heading, description, plansButtonCaption, plans} = window.GiveAddons.pricingPlans;
 
+const customPlanOrder = ['Plus Plan', 'Pro Plan', 'Basic Plan', 'Agency Plan'];
+
+const sortedPlans = plans.slice().sort((a, b) => {
+    const aIndex = customPlanOrder.indexOf(a.name);
+    const bIndex = customPlanOrder.indexOf(b.name);
+    return aIndex - bIndex;
+});
+
 export const PricingPlans = () => (
     <article>
         <Hero heading={heading} description={description} />
         <ul className={styles.plans}>
-            {plans.map((plan) => (
+            {sortedPlans.map((plan) => (
                 <li key={plan.name}>
                     <PricingPlanCard
                         name={plan.name}

diff --git a/webpack.mix.js b/webpack.mix.js
@@ -82,10 +82,6 @@ mix.webpackConfig({
             '@givewp/promotions': path.resolve(__dirname, 'src/Promotions/sharedResources/'),
         },
     },
-    externals: {
-        react: 'React',
-        'react-dom': 'ReactDOM',
-    },
     plugins: [
         /*
          * Transform script dependencies only for following external libraries: