fix pro tag display #311
fix pro tag display #311
Conversation
WalkthroughThe update to the Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 2
Configuration used: CodeRabbit UI
Files selected for processing (1)
- client/components/global/ProTag.vue (1 hunks)
Additional comments: 2
client/components/global/ProTag.vue (2)
- 39-52: Use of
useRuntimeConfig().public.paidPlansEnableddirectly within the computed property. This approach is fine, but ensure thatuseRuntimeConfigis reactive if the configuration can change during the app's runtime. If not, this is acceptable.- 39-52: The computed property
workspaceusesworkspacesStore.getCurrent, which implies a method call. Ensure thatgetCurrentis a computed property or a getter in the store to avoid potential reactivity issues.
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| <script setup> | ||
| import { computed } from 'vue' | ||
| import Modal from './Modal.vue' | ||
| import { useAuthStore } from '../../stores/auth'; | ||
| import { useWorkspacesStore } from '../../stores/workspaces'; | ||
| import PricingTable from "../pages/pricing/PricingTable.vue"; | ||
|
|
||
| export default { | ||
| name: 'ProTag', | ||
| components: {PricingTable, Modal}, | ||
| props: {}, | ||
|
|
||
| setup () { | ||
| const authStore = useAuthStore() | ||
| const workspacesStore = useWorkspacesStore() | ||
| return { | ||
| user : computed(() => authStore.user), | ||
| currentWorkSpace : computed(() => workspacesStore.getCurrent()) | ||
| } | ||
| }, | ||
|
|
||
| data() { | ||
| return { | ||
| showPremiumModal: false, | ||
| checkoutLoading: false | ||
| } | ||
| }, | ||
|
|
||
| computed: { | ||
| shouldDisplayProTag() { | ||
| if (!this.$config.paid_plans_enabled) return false | ||
| if (!this.user || !this.currentWorkSpace) return true | ||
| return !(this.currentWorkSpace.is_pro) | ||
| }, | ||
| }, | ||
|
|
||
| mounted() { | ||
| }, | ||
|
|
||
| methods: { | ||
| openChat() { | ||
| useCrisp().openAndShowChat() | ||
| }, | ||
| } | ||
| } | ||
| const authStore = useAuthStore() | ||
| const workspacesStore = useWorkspacesStore() | ||
| const user = computed(() => authStore.user) | ||
| const workspace = computed(() => workspacesStore.getCurrent) | ||
| const showPremiumModal = ref(false) | ||
|
|
||
| const shouldDisplayProTag = computed(() => { | ||
| if (!useRuntimeConfig().public.paidPlansEnabled) return false | ||
| if (!user.value || !workspace.value) return true | ||
| return !(workspace.value.is_pro) | ||
| }) | ||
| </script> |
There was a problem hiding this comment.
📝 NOTE
This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [1-33]
Ensure accessibility by adding role="button" to the div acting as a button and providing a meaningful aria-label for better screen reader support.
<div class="bg-nt-blue text-white px-2 text-xs uppercase inline rounded-full font-semibold cursor-pointer"
+ role="button"
+ aria-label="Show premium options"
@click.prevent="showPremiumModal=true"
>| <script setup> | ||
| import { computed } from 'vue' | ||
| import Modal from './Modal.vue' | ||
| import { useAuthStore } from '../../stores/auth'; | ||
| import { useWorkspacesStore } from '../../stores/workspaces'; | ||
| import PricingTable from "../pages/pricing/PricingTable.vue"; | ||
|
|
||
| export default { | ||
| name: 'ProTag', | ||
| components: {PricingTable, Modal}, | ||
| props: {}, | ||
|
|
||
| setup () { | ||
| const authStore = useAuthStore() | ||
| const workspacesStore = useWorkspacesStore() | ||
| return { | ||
| user : computed(() => authStore.user), | ||
| currentWorkSpace : computed(() => workspacesStore.getCurrent()) | ||
| } | ||
| }, | ||
|
|
||
| data() { | ||
| return { | ||
| showPremiumModal: false, | ||
| checkoutLoading: false | ||
| } | ||
| }, | ||
|
|
||
| computed: { | ||
| shouldDisplayProTag() { | ||
| if (!this.$config.paid_plans_enabled) return false | ||
| if (!this.user || !this.currentWorkSpace) return true | ||
| return !(this.currentWorkSpace.is_pro) | ||
| }, | ||
| }, | ||
|
|
||
| mounted() { | ||
| }, | ||
|
|
||
| methods: { | ||
| openChat() { | ||
| useCrisp().openAndShowChat() | ||
| }, | ||
| } | ||
| } | ||
| const authStore = useAuthStore() | ||
| const workspacesStore = useWorkspacesStore() | ||
| const user = computed(() => authStore.user) | ||
| const workspace = computed(() => workspacesStore.getCurrent) | ||
| const showPremiumModal = ref(false) | ||
|
|
||
| const shouldDisplayProTag = computed(() => { | ||
| if (!useRuntimeConfig().public.paidPlansEnabled) return false | ||
| if (!user.value || !workspace.value) return true | ||
| return !(workspace.value.is_pro) | ||
| }) |
There was a problem hiding this comment.
The computed property shouldDisplayProTag returns true when !user.value || !workspace.value, which seems counterintuitive. If there's no user or workspace, it might be more logical to not display the ProTag, unless this behavior is explicitly intended.
Consider revising the logic to ensure it aligns with the intended behavior for when user or workspace information is missing.
Summary by CodeRabbit
ProTagcomponent for better performance and reliability, ensuring a more responsive display based on user and workspace settings.