feat: channel data now localized#340
Conversation
WalkthroughThis pull request updates both the UI components and backend logic to enhance localization support for channel data. Several Vue components now use the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI_Component
participant API_Server
participant DB_Service
User->>UI_Component: Select locale and update channel details
UI_Component->>API_Server: Send PATCH/PUT request with localized data
API_Server->>DB_Service: getChannel(channelId)
DB_Service-->>API_Server: Return existing channel (or error)
API_Server->>API_Server: Process data with updateLocaleValues()
API_Server->>DB_Service: patchChannel/createChannel(updatedData)
DB_Service-->>API_Server: Acknowledge update
API_Server-->>UI_Component: Respond with updated channel info
Possibly related PRs
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ERR_PNPM_OPTIONAL_DEPS_REQUIRE_PROD_DEPS Optional dependencies cannot be installed without production dependencies ✨ Finishing Touches
🪧 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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
apps/web-app/stores/channel.ts (1)
113-116: 💡 Verification agent❓ Verification inconclusive
Verify locale fallback in search functionality
The
getProductsByQueryfunction correctly handles the new localized product names, but consider adding a fallback mechanism for when a translation doesn't exist in the current locale.
🏁 Script executed:
#!/bin/bash # Check if fallback mechanisms exist elsewhere in the codebase rg -A 3 -B 3 "getLocaleValue|locale.value" --type ts --type vueLength of output: 93
Ensure fallback mechanism for missing locale translations in search
The current implementation ingetProductsByQueryrelies solely on the product name for the active locale:function getProductsByQuery(query: string): ProductWithCategory[] { const { locale } = useI18n() const productList = products.value.filter((product) => product.name.find((name) => name.locale === locale.value) ?.value.toLowerCase().includes(query.toLowerCase()) ) // ... }If no translation exists for the current locale, the optional chaining returns
undefined, causing.toLowerCase()to fail. There isn’t any fallback in place to handle this scenario. Please consider one of the following approaches to resolve the issue:
- Fallback to a default translation (e.g., use a default locale or the first available translation):
function getProductsByQuery(query: string): ProductWithCategory[] { const { locale } = useI18n() return products.value.filter((product) => { const localizedName = product.name.find((name) => name.locale === locale.value)?.value || product.name[0].value; // fallback to first available translation return localizedName.toLowerCase().includes(query.toLowerCase()); }); }- Implement a more robust locale resolution by abstracting the translation lookup into a helper (for instance, a
getLocaleValuefunction) that internally returns a fallback when required.Please verify the chosen approach across the related modules to ensure consistency in handling locales.
🧹 Nitpick comments (2)
apps/web-app/app/components/Form/UpdateChannel.vue (2)
31-31: Consider extending locale selection to all fieldsWhile placeholders for localized content are added to all fields, the locale selector is only implemented for the name field. Consider adding similar locale selection functionality to the description and conditions fields.
<UFormField :label="$t('common.description')" name="description"> + <UButtonGroup class="w-full"> + <UDropdownMenu :items="localeState.items"> + <UButton + color="neutral" + variant="outline" + :icon="localeState.icon.value" + class="w-12 items-center justify-center" + /> + </UDropdownMenu> + <UTextarea v-model="state.description" :placeholder="defaultDescription" size="xl" class="w-full items-center justify-center" /> + </UButtonGroup> </UFormField>Similar changes could be applied to the conditions field (lines 98-106).
Also applies to: 101-101
139-144: Add validation for required locale valuesConsider adding validation to ensure that at least the default locale values are provided for required fields like name.
You could extend the channelUpdateSchema to include validation for locale-specific required fields, ensuring that at minimum the default locale has values set for essential fields.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (12)
apps/web-app/app/components/Form/UpdateChannel.vue(4 hunks)apps/web-app/app/components/Modal/DeliveryInfo.vue(2 hunks)apps/web-app/app/components/Navigation/Main.vue(1 hunks)apps/web-app/app/components/Navigation/index.vue(1 hunks)apps/web-app/app/pages/command-center/system/index.vue(4 hunks)apps/web-app/app/pages/index.vue(2 hunks)apps/web-app/stores/channel.ts(1 hunks)packages/core/server/api/channel/index.patch.ts(2 hunks)packages/core/server/api/channel/index.put.ts(1 hunks)packages/core/shared/services/channel.ts(2 hunks)packages/core/types/index.d.ts(1 hunks)pnpm-workspace.yaml(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (23)
apps/web-app/app/pages/index.vue (2)
6-6: LGTM! Proper implementation of channel data localizationThe changes correctly utilize the
getLocaleValuefunction with appropriate parameters to display localized channel name and description based on the user's current locale.Also applies to: 9-9, 21-21
26-26: LGTM! Localized page metadataGood implementation of localization for the page title and meta description. Using
locale.valueis correct since this is a reactive value from the Composition API.Also applies to: 30-30
apps/web-app/app/components/Modal/DeliveryInfo.vue (2)
5-5: Successfully implemented localization for channel conditions.The change from displaying raw conditions to using
getLocaleValueensures that content is properly localized based on the user's current locale setting.
35-35: Added locale support properly.Adding the locale constant from useI18n() provides the necessary information for localization functions. This aligns with other components in the application.
packages/core/server/api/channel/index.put.ts (2)
21-22: Properly localized channel name during creation.Implementing the
updateLocaleValuesfunction for the channel name ensures proper localization support from the initial creation of a channel.Also applies to: 26-26
31-32: Initialized description and conditions as arrays for localization.Changed from null to empty arrays to support the LocaleValue[] structure needed for localization. This change is necessary to maintain consistency with the updated data model.
packages/core/server/api/channel/index.patch.ts (4)
1-1: Added necessary import for enhanced error handling.Adding the
getChannelimport supports the new error handling logic that verifies the channel exists before attempting updates.
11-17: Improved error handling for channel updates.Adding a check to verify the channel exists before attempting updates provides better error handling and a more specific error message.
19-22: Added proper locale-aware updates for channel data.The code now correctly handles localized updates for name, description, and conditions by using the
updateLocaleValuesfunction, which preserves existing translations while updating the specified locale.
23-28:Details
❓ Verification inconclusive
Potential redundancy in merged object properties.
There might be an issue with the spread operator in
...dataifdataalready containsname,description, andconditionsfields.The current implementation first spreads all properties from
dataand then overwrites specific fields. Verify ifdatacould contain the same properties that are being explicitly set afterward. If it does, consider removing those properties fromdatabefore spreading:
🏁 Script executed:
#!/bin/bash # Check if channelUpdateSchema includes name, description, or conditions fields rg -A 20 "channelUpdateSchema" --include="*.ts"Length of output: 489
Action Required: Confirm Schema Overlap in Patch Object
The current implementation spreads
databefore explicitly settingname,description, andconditions. We need to verify whether the underlying schema (i.e. the definition linked tochannelUpdateSchema) already contains these properties. If so, there is a potential for redundancy, and you might need to remove these keys fromdatabefore spreading to avoid unintended overrides.
- Verify Schema: Please check if
channelUpdateSchemaincludes the fieldsname,description, andconditions.- Adjust Object Construction: If these properties exist in
datadue to the schema, consider removing them fromdataprior to the spread to ensure the patch object is constructed as intended.apps/web-app/app/components/Navigation/Main.vue (1)
9-9: Successfully implemented localization for channel name and description.Changed from directly displaying static content to using the
getLocaleValuefunction for proper localization of the channel name and description in the navigation component. This change is consistent with the localization approach used throughout the application.Also applies to: 12-12
apps/web-app/app/pages/command-center/system/index.vue (4)
23-24: Improved consistency with CSS variables and localizationThe switch to CSS variables with
bg-(--ui-bg-muted)rather than hardcoded background classes enhances theming consistency, while the introduction ofgetLocaleValueproperly displays localized channel names.
26-28: Good conditional rendering and localization for descriptionThe conditional check on
description.lengthprevents displaying empty sections, and the use ofgetLocaleValueensures proper localization of content.
48-53: Properly handling localized delivery conditionsThe conditional rendering and localization implementation for delivery conditions is well-implemented, ensuring content is only shown when available and is properly localized.
131-131: Updated useI18n() to include localeThe locale is now properly extracted from useI18n() to support the localization features throughout the component.
packages/core/types/index.d.ts (1)
7-9: Appropriate type changes for localization supportThe Channel interface now correctly uses
LocaleValue[]arrays for name, description, and conditions, enabling multi-language support throughout the application.apps/web-app/stores/channel.ts (1)
15-16: State types aligned with updated interfaceThe store's state variables have been properly updated to match the Channel interface changes, using arrays of LocaleValue objects instead of simple strings.
Also applies to: 24-24
apps/web-app/app/components/Form/UpdateChannel.vue (2)
9-25: Well-implemented locale selection UIThe addition of a locale selector dropdown alongside the name input provides an intuitive UI for managing translations. The button group implementation is clean and follows UI component patterns.
133-137: Good state management for localizationThe implementation of
useLocalizedStatealong with computed properties for default values ensures a proper foundation for managing localized content.pnpm-workspace.yaml (1)
19-19:Details
❓ Verification inconclusive
Verify reason for package downgrade
The version of
@nuxt/uihas been downgraded from3.0.0-beta.3to3.0.0-beta.2. While this might be intentional to address compatibility issues with localization features, package downgrades should be documented.
🏁 Script executed:
#!/bin/bash # Check if there are any issues or discussions related to this downgrade git log -p -- pnpm-workspace.yaml | grep -B 10 -A 10 "@nuxt/ui" | head -20Length of output: 0
Action: Verify Documentation for Package Downgrade
It appears that the version change for
@nuxt/uifrom3.0.0-beta.3to3.0.0-beta.2isn’t documented in the commit history for thepnpm-workspace.yamlfile. Please manually verify that this downgrade is intentional and that the reason (e.g., to address compatibility issues with localization features) is properly documented in the commit message or related project notes.
- If the downgrade is intentional, add a brief note in the commit or project documentation to explain it.
- Otherwise, consider reverting or updating the change to maintain clarity.
apps/web-app/app/components/Navigation/index.vue (1)
6-6: Improved responsive background behaviorThe background opacity is now responsive - solid on mobile screens and semi-transparent (25%) on larger screens. This change provides better contrast and readability on smaller devices while maintaining the aesthetic on larger screens.
packages/core/shared/services/channel.ts (2)
2-2: Added locale import for localization supportGood addition of the locale import to support the channel data localization feature.
15-15:Details
✅ Verification successful
Enhanced schema with locale validation
The
channelUpdateSchemanow includes locale validation through the imported locale schema. This ensures that locale data in channel updates is properly validated, which is essential for the localization feature.
🏁 Script executed:
#!/bin/bash # Let's examine how the locale schema is defined cat packages/core/shared/services/locale.tsLength of output: 113
Locale validation integration verified
- The locale schema imported from
packages/core/shared/services/locale.tsis confirmed to enforce valid locale values ('en'and'ru').- The
channelUpdateSchemanow correctly incorporates this validation, ensuring that channel updates adhere to expected locale formats for the localization feature.
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/web-app/app/components/CommandCenter/Navigation.vue (1)
43-48: Menu item added with hardcoded badge valueThe new "checkouts" menu item has been added correctly using the translation function for localization. However, the badge value "4" appears to be hardcoded rather than dynamic, which might not reflect the actual number of checkouts or notifications.
Consider making the badge value dynamic by:
{ label: t('center.menu.checkouts'), to: '/command-center/checkout', icon: 'food:checkouts', - badge: '4', + badge: checkoutCount.value > 0 ? checkoutCount.value.toString() : undefined, },This would require adding a reactive property like
checkoutCountthat fetches the actual count from your store or API.apps/web-app/app/components/Form/UpdateProductVariant.vue (1)
207-216: Consider adding more detailed error informationThe error toast is updating with a fixed description of "..." which doesn't provide users with useful information about what went wrong.
toast.update(operationId, { title: t('error.title'), icon: 'food:close', color: 'error', - description: '...', + description: error.value?.message || t('error.unknown'), duration: 3000, ui: { icon: '', }, })apps/web-app/app/components/Form/UpdateChannelPaymentMethod.vue (1)
73-95: Consider enhancing toast notificationsFor consistency with UpdateProductVariant.vue, consider implementing the same toast notification pattern with operationId to provide better user feedback during the update process.
+const operationId = useId() + async function onSubmit(event: FormSubmitEvent<ChannelPaymentMethodUpdateSchema>) { + toast.add({ + id: operationId, + title: t('toast.in-process'), + description: t('toast.updating-data'), + icon: 'food:loader', + duration: 120000, + ui: { + icon: 'animate-spin', + }, + }) + emit('submitted') const { data, error } = await useAsyncData( 'update-payment-method', () => $fetch(`/api/channel/payment-method/${paymentMethodId}`, { method: 'PATCH', body: event.data, }), ) if (error.value) { console.error(error.value) - toast.add({ title: t('error.title'), description: '...' }) + toast.update(operationId, { + title: t('error.title'), + icon: 'food:close', + color: 'error', + description: error.value?.message || t('error.unknown'), + duration: 3000, + ui: { + icon: '', + }, + }) } if (data.value) { await channel.update() emit('success') - toast.add({ title: t('toast.payment-method-updated'), description: t('toast.updating-data') }) + toast.update(operationId, { + title: t('toast.payment-method-updated'), + description: undefined, + icon: 'food:check', + color: 'success', + duration: 3000, + ui: { + icon: '', + }, + }) resetState() } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (33)
packages/core/shared/services/channel.ts(2 hunks)packages/core/types/index.d.ts(1 hunks)apps/web-app/app/app.config.ts(1 hunks)apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue(1 hunks)apps/web-app/app/components/Checkout/Line.vue(1 hunks)apps/web-app/app/components/CommandCenter/CheckoutCard.vue(4 hunks)apps/web-app/app/components/CommandCenter/CheckoutLine.vue(1 hunks)apps/web-app/app/components/CommandCenter/Navigation.vue(1 hunks)apps/web-app/app/components/CommandCenter/PaymentMethodCard.vue(2 hunks)apps/web-app/app/components/Form/AttachProduct.vue(1 hunks)apps/web-app/app/components/Form/CreateChannelPaymentMethod.vue(2 hunks)apps/web-app/app/components/Form/CreateProduct.vue(1 hunks)apps/web-app/app/components/Form/CreateProductVariant.vue(3 hunks)apps/web-app/app/components/Form/DeleteProduct.vue(1 hunks)apps/web-app/app/components/Form/UpdateChannelPaymentMethod.vue(2 hunks)apps/web-app/app/components/Form/UpdateProductAvailability.vue(1 hunks)apps/web-app/app/components/Form/UpdateProductVariant.vue(5 hunks)apps/web-app/app/components/Header.vue(1 hunks)apps/web-app/app/components/SearchBlock.vue(2 hunks)apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue(2 hunks)apps/web-app/app/pages/checkout/index.vue(3 hunks)apps/web-app/app/pages/command-center/product/[productId]/variants.vue(1 hunks)apps/web-app/app/pages/command-center/product/index.vue(4 hunks)apps/web-app/app/pages/finish/index.vue(3 hunks)apps/web-app/stores/checkout.ts(2 hunks)packages/core/server/api/channel/payment-method/[id].patch.ts(2 hunks)packages/core/server/api/channel/payment-method/index.post.ts(1 hunks)packages/core/server/api/checkout/index.patch.ts(2 hunks)packages/core/server/api/product/variant/[id].patch.ts(2 hunks)packages/core/server/api/product/variant/index.post.ts(1 hunks)packages/core/shared/services/channel.ts(1 hunks)packages/core/shared/services/product.ts(2 hunks)packages/core/types/index.d.ts(2 hunks)
✅ Files skipped from review due to trivial changes (2)
- apps/web-app/app/components/Header.vue
- apps/web-app/app/components/Form/UpdateProductAvailability.vue
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/core/shared/services/channel.ts
- packages/core/types/index.d.ts
- packages/core/types/index.d.ts
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (70)
apps/web-app/app/app.config.ts (2)
66-69: CSS variable change in button gradient variant.The disabled state background has been updated from
--ui-bg-accentedto--ui-bg-elevated, which provides better visual consistency with the new tab styling. This change aligns with the overall UI improvements for localized content.
70-80: Good addition of gradient tab styling.The new tabs configuration provides consistent styling with the button gradient variant and creates a cohesive UI experience. The use of calculated border radius values (
calc(var(--ui-radius)*2)andcalc(var(--ui-radius)*1.5)) ensures proportional styling across different UI scale settings.packages/core/server/api/product/variant/index.post.ts (1)
15-15: Name field updated to support localizationThis change properly transforms the product variant's name from a string to an array of localized values, aligning with the PR objective of localizing channel data.
packages/core/server/api/channel/payment-method/index.post.ts (1)
15-15: Name field updated to support localizationThe payment method's name field has been correctly transformed to use the localized structure, consistent with the approach used in other endpoints.
apps/web-app/app/components/Checkout/Line.vue (1)
14-14: Product variant now properly displays localized valueThe component now appropriately uses the
getLocaleValuefunction to display the localized variant name, providing consistent localization with the product name rendering on line 10.apps/web-app/app/components/SearchBlock.vue (2)
2-2: Updated background stylingThe background class has been changed from
bg-(--ui-bg-accented)tobg-(--ui-bg-elevated), which appears to be a UI styling adjustment.
10-10: Added 'soft' variant to buttonsThe
variant="soft"property has been added to UButton components, providing a more subtle appearance that likely complements the new styling approach.Also applies to: 30-30
packages/core/server/api/channel/payment-method/[id].patch.ts (3)
2-2: Import added for enhanced payment method handlingThe addition of
getPaymentMethodimport allows for proper validation of payment method existence before attempting updates.
19-25: Important validation added before updateGood enhancement to verify that the payment method exists before attempting to update it, providing a proper 404 response when not found.
27-32: Improved localization handling for payment method namesThis change properly handles the localized name values by:
- Using existing name values when no update is provided
- Using
updateLocaleValuesto merge new locale values with existing ones- Passing the complete localized name object in the patch operation
This is a robust implementation that preserves existing translations when updating only one locale.
apps/web-app/app/pages/command-center/product/[productId]/variants.vue (1)
11-11: Properly localized variant name displayThe implementation now correctly uses
getLocaleValueto display the variant name in the user's preferred locale, with fallback to the channel's default locale.apps/web-app/app/components/CommandCenter/PaymentMethodCard.vue (3)
2-2: Enhanced card styling with rounded cornersThe addition of the
rounded-xlclass improves the visual consistency of the payment method card.
6-6: Properly localized payment method name displayThe implementation now correctly uses
getLocaleValueto display the payment method name in the user's preferred locale.
20-20: Added locale from i18n for localization supportProperly imported the locale from
useI18n()hook to ensure consistent localization across the component.apps/web-app/app/components/CommandCenter/CheckoutLine.vue (2)
3-7: Improved layout structure for product detailsThe layout has been updated from horizontal to vertical arrangement, which provides better organization for product information and likely improves the mobile experience.
8-14: Enhanced localization for product variant detailsBoth the product name and variant name are now properly localized using
getLocaleValue. The weight unit display is also localized appropriately.packages/core/shared/services/product.ts (2)
23-23: Good addition of locale field to productVariantCreateSchemaAdding the locale field to product variant schemas aligns with the PR objective of enhancing localization support. This change is consistent with the existing product schemas that already had the locale field.
40-40: Good addition of locale field to productVariantUpdateSchemaAdding the locale field to the update schema ensures consistency between create and update operations for product variants. This is a necessary change for proper localization support.
packages/core/server/api/product/variant/[id].patch.ts (5)
2-2: Good import addition for improved data flowAdding the import for
getProductVariantenables the improved data flow in this endpoint.
20-26: Improved error handling with variant existence checkGood addition of a check to verify the product variant exists before attempting updates. This provides better error handling and clearer error messages to clients.
28-28: Enhanced localization support with updateLocaleValuesThis line significantly improves how localized content is handled. Using
updateLocaleValuesensures that only the specific locale's value is updated while preserving other locale values.
30-33: Proper update with modified name structureGood approach to include the updated localized name in the patch operation.
39-39: Improved response with updated dataReturning the updated variant in the response provides clients with the most current data after the update operation.
apps/web-app/app/components/Form/DeleteProduct.vue (1)
27-29: Good refactoring of operationId and async functionMoving the
operationIddeclaration outside theonSubmitfunction prevents unnecessary recreation on each function call. Explicitly marking the function as async improves code clarity.packages/core/shared/services/channel.ts (4)
2-2: Good addition of locale importAdding the locale import is necessary for the schema changes in this file.
15-15: Enhanced localization for channel updatesAdding the locale field to channelUpdateSchema aligns with the PR objective of enabling localized channel data.
34-34: Good localization support for payment method creationAdding locale support to payment method creation is consistent with the overall localization approach in the application.
42-42: Good localization support for payment method updatesAdding locale support to payment method updates ensures consistency between create and update operations.
apps/web-app/app/components/Form/CreateProduct.vue (1)
74-76: Good refactoring: Variable scope changed appropriatelyMoving the
operationIddeclaration outside theonSubmitfunction is a good practice. This improves code organization and maintains a consistent pattern across the codebase, while ensuring the variable can be reused if needed.apps/web-app/app/components/Form/AttachProduct.vue (1)
67-69: Good refactoring: Improved variable scopeMoving the
operationIddeclaration outside theonSubmitfunction follows a consistent pattern with other components and improves code organization.apps/web-app/app/pages/catalog/[categorySlug]/[productSlug]/index.vue (4)
15-15: Styling enhancement looks goodThe addition of the
text-(--ui-text-highlighted)class improves the visual hierarchy of the page.
18-21: Good localization implementationThe addition of the localized variant name display improves the user experience by ensuring content is properly localized.
26-26: Proper localization of select itemsUsing
getLocaleValuefor variant names in the select dropdown ensures consistent localization across the UI.
67-67: UI enhancement with updated backgroundChanging to
bg-(--ui-bg-elevated)/50provides a more modern, slightly transparent elevated background that enhances the nutrition information section.apps/web-app/app/pages/checkout/index.vue (3)
9-9: UI enhancement with updated backgroundChanging to
bg-(--ui-bg-elevated)/50provides a more modern, slightly transparent elevated background for the checkout form section.
119-119: Consistent UI stylingUsing the same
bg-(--ui-bg-elevated)/50background maintains visual consistency across checkout sections.
152-152: Proper localization of payment methodsUsing
getLocaleValuefor payment method names ensures they are correctly displayed according to the user's locale preferences.packages/core/server/api/checkout/index.patch.ts (2)
92-92: Effective localization implementation for payment method name.The code now properly retrieves the localized payment method name by finding the name entry that matches the current locale. This aligns with the localization strategy implemented across the application.
119-119: Well-implemented localization for product variant name.Similar to the payment method name localization, this code effectively retrieves the localized variant name based on the current locale. This consistent approach ensures proper internationalization throughout the checkout process.
apps/web-app/app/components/Form/CreateProductVariant.vue (3)
9-24: Good UI enhancement for locale selection.The button group with dropdown integration provides a clean way for users to select the locale when entering product variant names. This implementation nicely separates the locale selection from the name input field.
145-145: Well-implemented localization state management.The
useLocalizedStatecomposable is a good approach for managing localization state and keeping it in sync with the form's reset functionality.
148-148: Properly initialized locale in state.The locale is correctly initialized in both the initial state and the reset function, ensuring consistency throughout the component lifecycle.
Also applies to: 164-164
apps/web-app/app/components/Form/CreateChannelPaymentMethod.vue (2)
9-24: Clean implementation of localized input field.The UI for locale selection is consistent with other components, providing a unified experience across the application. The button group layout is well-structured and provides clear visual feedback about the currently selected locale.
60-60: Proper state management for localization.The localization state is correctly implemented and initialized with the channel's default locale. The state properties are properly managed in both initial state and reset function to maintain consistency.
Also applies to: 63-63, 70-70
apps/web-app/app/components/CommandCenter/CheckoutCard.vue (4)
2-2: UI enhancement with improved background styling.The background styling has been updated to use a more elevated appearance with semi-transparency, which should provide better visual hierarchy.
50-50: Simplified payment method display using computed property.The payment method display now leverages a computed property instead of directly accessing the data in the template, which improves readability and maintainability.
60-60: Improved layout structure for checkout lines.The updated flex layout with column direction and consistent gap spacing will provide a more uniform appearance for the checkout lines.
84-84: Well-implemented localization for payment method display.The addition of the locale from useI18n() and the computed property for retrieving the localized payment method name using getLocaleValue is a clean implementation that ensures proper internationalization.
Also applies to: 90-90
apps/web-app/stores/checkout.ts (2)
9-9: Type change improves code consistencyChanging from
nulltoundefinedfor optional values aligns with TypeScript best practices and helps eliminate null checks. This makes the code more consistent and easier to maintain.
31-31: Good simplification of assignmentRemoving the type assertion simplifies the code. The TypeScript compiler can now infer the correct type automatically from the context.
apps/web-app/app/pages/finish/index.vue (3)
6-6: UI enhancement with new background styleThe change from
bg-(--ui-bg-muted)tobg-(--ui-bg-elevated)/50provides a more elevated appearance with 50% opacity, which improves visual hierarchy.
45-45: Improved localization for payment method displayUsing the computed property for payment method display ensures consistent localization handling.
95-107: Well-implemented localization supportGreat implementation of the localization feature! The code now properly:
- Imports the locale from useI18n()
- Creates a computed property for the payment method that uses getLocaleValue
- Handles the default locale fallback appropriately
This ensures the payment method name is correctly displayed in the user's preferred language.
apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue (3)
2-8: UI improvement with tabs componentExcellent UI enhancement! Replacing separate buttons with a tabs component provides a more intuitive and modern interface for delivery method selection. The markup is clean and properly configured.
12-24: Well-structured tab items with localizationGood implementation of the tab items array with:
- Proper localization using t() function
- Correct value mapping to delivery methods
- Appropriate disabled state handling based on availability
25-29: Reactive delivery method handlingGreat implementation of the delivery method state with:
- Initializing selectedTab with the current checkout.deliveryMethod
- Using a watcher to update the checkout store when the selection changes
This creates a clean, reactive connection between the UI and the data store.
apps/web-app/app/pages/command-center/product/index.vue (4)
16-17: Improved input handling with v-modelGood implementation of v-model binding for the filter input. This simplifies the code by using Vue's two-way binding rather than manually handling events.
91-91: Layout improvement with ml-autoAdding
ml-autoclass properly aligns the product image to the right of its container, improving the visual layout.
107-107: Enhanced variant display with localizationGood implementation of localized variant display using getLocaleValue. The string interpolation elegantly combines:
- Localized variant name
- Weight information with correct unit
- Price with correct currency formatting based on locale
This ensures users see product variant information in their preferred language and format.
164-165: Improved filtering with localization supportExcellent implementation of the filtering mechanism that now properly handles localized product names:
- Added filterValue ref for state management
- Updated the data computed property to filter products based on their localized names
- Implemented case-insensitive matching using toLowerCase()
This ensures users can search for products in any supported language.
apps/web-app/app/components/Form/UpdateProductVariant.vue (6)
9-25: Good implementation of localized input fieldThe addition of a locale selector dropdown alongside the input field is a clean approach to handling multi-language content. The placeholder fallback mechanism is also well implemented.
147-150: Well-structured localization setupGood use of the
useLocalizedStatehook for managing locales, and smart extraction of the default name for the fallback placeholder.
152-153: LGTM: Proper state initialization with localeThe state properly initializes with the current locale and finds the corresponding name value.
167-168: Consistent state reset implementationThe resetState function properly reinitializes both locale and name properties.
181-193: Good user feedback implementationUsing a unique operationId for toast notifications allows for consistent updating of the same toast, providing a better user experience during asynchronous operations.
222-231: Well-implemented success feedbackThe success toast notification appropriately updates the existing toast, showing the completed operation status.
apps/web-app/app/components/Form/UpdateChannelPaymentMethod.vue (4)
9-25: Good implementation of localized input fieldThe addition of a locale selector dropdown alongside the input field follows the same pattern as in other components, showing a consistent approach to localization.
57-60: Well-structured localization setupGood use of the
useLocalizedStatehook and extracting the default name for the placeholder.
62-63: LGTM: Proper state initialization with localeThe state correctly initializes with the current locale and finds the appropriate name value.
68-69: Consistent state reset implementationThe resetState function properly handles locale-specific data, consistent with other components.
Summary by CodeRabbit
New Features
Style