| 1 |
<template> |
| 2 |
<div class="wpfnl-mm-setup-section"> |
| 3 |
<div class="wpfnl-mm-setup-section-content wpfnl-mm-essential-plugins"> |
| 4 |
<h3 class="wpfnl-mm-setup-section-title">Recommended Integrations</h3> |
| 5 |
<div class="wpfnl-mm-woo-status"> |
| 6 |
<div |
| 7 |
v-for="plugin in visiblePlugins" |
| 8 |
:key="plugin.id" |
| 9 |
class="wpfnl-setup-plugins-card" |
| 10 |
:class="{ 'selected': plugin.selected }" |
| 11 |
@click="togglePluginSelection(plugin.id)" |
| 12 |
> |
| 13 |
<span class="wpfnl-setup-plugin-selected" v-if="plugin.selected"> |
| 14 |
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">><path d="M12 5L6.5 10L4 7.72727" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg> |
| 15 |
</span> |
| 16 |
|
| 17 |
<img |
| 18 |
:src="plugin.image" |
| 19 |
:alt="plugin.name + ' Logo'" |
| 20 |
> |
| 21 |
<div class="wpfnl-setup-plugin-info"> |
| 22 |
<span class="wpfnl-setup-plugin-name"> |
| 23 |
{{ plugin.name }} |
| 24 |
</span> |
| 25 |
<span class="wpfnl-setup-plugin-description"> |
| 26 |
{{ plugin.description }} |
| 27 |
</span> |
| 28 |
</div> |
| 29 |
</div> |
| 30 |
</div> |
| 31 |
</div> |
| 32 |
</div> |
| 33 |
</template> |
| 34 |
|
| 35 |
<script> |
| 36 |
export default { |
| 37 |
name: 'EssentialPlugins', |
| 38 |
props: { |
| 39 |
selectedGoal: { |
| 40 |
type: String, |
| 41 |
default: 'sales' |
| 42 |
}, |
| 43 |
pluginStatuses: { |
| 44 |
type: Object, |
| 45 |
default: () => ({}) |
| 46 |
}, |
| 47 |
selectedPlugins: { |
| 48 |
type: Array, |
| 49 |
default: () => [] |
| 50 |
} |
| 51 |
}, |
| 52 |
data() { |
| 53 |
return { |
| 54 |
plugins: [] |
| 55 |
} |
| 56 |
}, |
| 57 |
computed: { |
| 58 |
visiblePlugins() { |
| 59 |
return this.plugins.filter(plugin => { |
| 60 |
if (plugin.showForGoals.includes('all')) { |
| 61 |
return true; |
| 62 |
} |
| 63 |
return plugin.showForGoals.includes(this.selectedGoal); |
| 64 |
}); |
| 65 |
} |
| 66 |
}, |
| 67 |
watch: { |
| 68 |
pluginStatuses: { |
| 69 |
handler(newStatuses) { |
| 70 |
this.initializePlugins(); |
| 71 |
}, |
| 72 |
immediate: true, |
| 73 |
deep: true |
| 74 |
}, |
| 75 |
selectedGoal() { |
| 76 |
this.initializePlugins(); |
| 77 |
} |
| 78 |
}, |
| 79 |
methods: { |
| 80 |
initializePlugins() { |
| 81 |
const mailMintDescription = this.selectedGoal === 'sales' |
| 82 |
? 'Email Marketing and Abandoned Cart Recovery.' |
| 83 |
: 'Email Marketing and Automation.'; |
| 84 |
|
| 85 |
this.plugins = [ |
| 86 |
{ |
| 87 |
id: 'mail-mint', |
| 88 |
name: 'Mail Mint', |
| 89 |
description: mailMintDescription, |
| 90 |
image: window?.setup_wizard_obj?.mail_mint_logo || '', |
| 91 |
slug: 'mail-mint', |
| 92 |
basename: 'mail-mint/mail-mint.php', |
| 93 |
showForGoals: ['all'], |
| 94 |
selected: this.isPluginSelected('mail-mint') |
| 95 |
}, |
| 96 |
{ |
| 97 |
id: 'woocommerce-payments', |
| 98 |
name: 'WooCommerce Payments', |
| 99 |
description: 'Accept payments directly on your site with WooCommerce Payments.', |
| 100 |
image: window?.setup_wizard_obj?.wc_logo || '', |
| 101 |
slug: 'woocommerce-payments', |
| 102 |
basename: 'woocommerce-payments/woocommerce-payments.php', |
| 103 |
showForGoals: ['sales'], |
| 104 |
selected: this.isPluginSelected('woocommerce-payments') |
| 105 |
}, |
| 106 |
{ |
| 107 |
id: 'stripe', |
| 108 |
name: 'Stripe For WooCommerce', |
| 109 |
description: 'Accept credit cards, Apple Pay, and Google Pay on your store.', |
| 110 |
image: window?.setup_wizard_obj?.wc_logo || '', |
| 111 |
slug: 'woo-stripe-payment', |
| 112 |
basename: 'woo-stripe-payment/stripe-payments.php', |
| 113 |
showForGoals: ['sales'], |
| 114 |
selected: this.isPluginSelected('stripe') |
| 115 |
} |
| 116 |
]; |
| 117 |
}, |
| 118 |
isPluginSelected(pluginId) { |
| 119 |
// Check if plugin is already installed and active |
| 120 |
const status = this.pluginStatuses[pluginId]; |
| 121 |
if (status && status.installed && status.active) { |
| 122 |
return true; |
| 123 |
} |
| 124 |
|
| 125 |
// Mail Mint should be selected by default |
| 126 |
if (pluginId === 'mail-mint') { |
| 127 |
return true; |
| 128 |
} |
| 129 |
|
| 130 |
// Check if it's in the selectedPlugins array |
| 131 |
return this.selectedPlugins.includes(pluginId); |
| 132 |
}, |
| 133 |
togglePluginSelection(pluginId) { |
| 134 |
const plugin = this.plugins.find(p => p.id === pluginId); |
| 135 |
if (plugin) { |
| 136 |
plugin.selected = !plugin.selected; |
| 137 |
this.$emit('update:selectedPlugins', this.plugins.filter(p => p.selected).map(p => p.id)); |
| 138 |
} |
| 139 |
} |
| 140 |
}, |
| 141 |
mounted() { |
| 142 |
this.initializePlugins(); |
| 143 |
} |
| 144 |
} |
| 145 |
</script> |
