@wilshop/dashboard 3.5.6 → 3.5.7

package/src/app/routes/_authenticated/_payment-methods/payment-methods_.$id.tsx

@@ -21,6 +21,7 @@ import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-lo
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useState } from 'react';
 import { toast } from 'sonner';
 import { PaymentEligibilityCheckerSelector } from './components/payment-eligibility-checker-selector.js';
 import { PaymentHandlerSelector } from './components/payment-handler-selector.js';
@@ -82,6 +83,7 @@ function PaymentMethodDetailPage() {
                     languageCode: translation.languageCode,
                     name: translation.name,
                     description: translation.description,
+                    customFields: (translation as any).customFields,
                 })),
                 customFields: entity.customFields,
             };
@@ -115,6 +117,9 @@ function PaymentMethodDetailPage() {
         },
     });
 
+    const [checkerArgsValid, setCheckerArgsValid] = useState(true);
+    const [handlerArgsValid, setHandlerArgsValid] = useState(true);
+
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
@@ -125,7 +130,13 @@ function PaymentMethodDetailPage() {
                     <PermissionGuard requires={['UpdatePaymentMethod']}>
                         <Button
                             type="submit"
-                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                            disabled={
+                                !form.formState.isDirty ||
+                                !form.formState.isValid ||
+                                isPending ||
+                                !checkerArgsValid ||
+                                !handlerArgsValid
+                            }
                         >
                             {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
                         </Button>
@@ -178,6 +189,7 @@ function PaymentMethodDetailPage() {
                             <PaymentEligibilityCheckerSelector
                                 value={field.value}
                                 onChange={field.onChange}
+                                onValidityChange={setCheckerArgsValid}
                             />
                         )}
                     />
@@ -187,7 +199,11 @@ function PaymentMethodDetailPage() {
                         control={form.control}
                         name="handler"
                         render={({ field }) => (
-                            <PaymentHandlerSelector value={field.value} onChange={field.onChange} />
+                            <PaymentHandlerSelector
+                                value={field.value}
+                                onChange={field.onChange}
+                                onValidityChange={setHandlerArgsValid}
+                            />
                         )}
                     />
                 </PageBlock>

package/src/app/routes/_authenticated/_product-variants/components/product-variant-bulk-actions.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
 import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
 import { usePriceFactor } from '@/vdb/components/shared/assign-to-channel-dialog.js';
-import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { usePaginatedList } from '@/vdb/hooks/use-paginated-list.js';
 import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
 import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
 import { api } from '@/vdb/graphql/api.js';

package/src/app/routes/_authenticated/_product-variants/components/variant-price-detail.tsx

@@ -70,8 +70,12 @@ export function VariantPriceDetail({
     }, [taxRatesData, activeChannel, taxCategoryId]);
 
     useEffect(() => {
-        setGrossPrice(Math.round((price ?? 0) * ((100 + taxRate) / 100)));
-    }, [price, taxRate]);
+        if (priceIncludesTax) {
+            setGrossPrice(price ?? 0);
+        } else {
+            setGrossPrice(Math.round((price ?? 0) * ((100 + taxRate) / 100)));
+        }
+    }, [price, taxRate, priceIncludesTax]);
 
     return (
         <div className="space-y-1">

package/src/app/routes/_authenticated/_product-variants/product-variants.graphql.ts

@@ -32,6 +32,13 @@ export const productVariantListDocument = graphql(
     [assetFragment],
 );
 
+export const productVariantPriceFragment = graphql(`
+    fragment ProductVariantPrice on ProductVariantPrice {
+        currencyCode
+        price
+    }
+`);
+
 export const productVariantDetailDocument = graphql(
     `
         query ProductVariantDetail($id: ID!) {
@@ -86,8 +93,7 @@ export const productVariantDetailDocument = graphql(
                 price
                 priceWithTax
                 prices {
-                    currencyCode
-                    price
+                    ...ProductVariantPrice
                 }
                 trackInventory
                 outOfStockThreshold
@@ -105,7 +111,7 @@ export const productVariantDetailDocument = graphql(
             }
         }
     `,
-    [assetFragment],
+    [assetFragment, productVariantPriceFragment],
 );
 
 export const createProductVariantDocument = graphql(`

package/src/app/routes/_authenticated/_product-variants/product-variants_.$id.tsx

@@ -1,6 +1,7 @@
 import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
 import { NumberInput } from '@/vdb/components/data-input/number-input.js';
 import { AssignedFacetValues } from '@/vdb/components/shared/assigned-facet-values.js';
+import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
 import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
 import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
@@ -12,8 +13,10 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
 import { Switch } from '@/vdb/components/ui/switch.js';
 import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -34,6 +37,7 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { VariablesOf } from 'gql.tada';
 import { Trash } from 'lucide-react';
 import { toast } from 'sonner';
+
 import { AddCurrencyDropdown } from './components/add-currency-dropdown.js';
 import { AddStockLocationDropdown } from './components/add-stock-location-dropdown.js';
 import { VariantPriceDetail } from './components/variant-price-detail.js';
@@ -50,7 +54,10 @@ export const Route = createFileRoute('/_authenticated/_product-variants/product-
     component: ProductVariantDetailPage,
     loader: detailPageRouteLoader({
         pageId,
-        queryDocument: productVariantDetailDocument,
+        queryDocument: () =>
+            addCustomFields(productVariantDetailDocument, {
+                includeNestedFragments: ['ProductVariantPrice'],
+            }),
         breadcrumb(_isNew, entity, location) {
             if ((location.search as any).from === 'product') {
                 return [
@@ -81,7 +88,9 @@ function ProductVariantDetailPage() {
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
-        queryDocument: productVariantDetailDocument,
+        queryDocument: addCustomFields(productVariantDetailDocument, {
+            includeNestedFragments: ['ProductVariantPrice'],
+        }),
         createDocument: createProductVariantDocument,
         updateDocument: updateProductVariantDocument,
         setValuesForUpdate: entity => {
@@ -169,6 +178,7 @@ function ProductVariantDetailPage() {
                 currencyCode,
                 price: 0,
                 delete: false,
+                customFields: {},
             } as PriceInput;
             form.setValue('prices', [...currentPrices, newPrice], {
                 shouldDirty: true,
@@ -274,37 +284,46 @@ function ProductVariantDetailPage() {
                             </div>
                         );
                         return (
-                            <DetailFormGrid key={price.currencyCode}>
-                                <div className="flex gap-1 items-end">
-                                    <FormFieldWrapper
-                                        control={form.control}
-                                        name={`prices.${actualIndex}.price`}
-                                        label={priceLabel}
-                                        render={({ field }) => (
-                                            <MoneyInput {...field} currency={price.currencyCode} />
+                            <div key={price.currencyCode} className="space-y-6">
+                                {displayIndex > 0 && <Separator className="my-4" />}
+                                <DetailFormGrid key={price.currencyCode}>
+                                    <div className="flex gap-1 items-end">
+                                        <FormFieldWrapper
+                                            control={form.control}
+                                            name={`prices.${actualIndex}.price`}
+                                            label={priceLabel}
+                                            render={({ field }) => (
+                                                <MoneyInput {...field} currency={price.currencyCode} />
+                                            )}
+                                        />
+                                        {activePrices.length > 1 && (
+                                            <Button
+                                                type="button"
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() => handleRemoveCurrency(actualIndex)}
+                                                className="h-6 w-6 p-0 mb-2 hover:text-destructive hover:bg-destructive-100"
+                                            >
+                                                <Trash className="size-4" />
+                                            </Button>
                                         )}
+                                    </div>
+                                    <VariantPriceDetail
+                                        priceIncludesTax={activeChannel?.pricesIncludeTax ?? false}
+                                        price={price.price}
+                                        currencyCode={
+                                            price.currencyCode ?? activeChannel?.defaultCurrencyCode ?? ''
+                                        }
+                                        taxCategoryId={taxCategoryId}
                                     />
-                                    {activePrices.length > 1 && (
-                                        <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="sm"
-                                            onClick={() => handleRemoveCurrency(actualIndex)}
-                                            className="h-6 w-6 p-0 mb-2 hover:text-destructive hover:bg-destructive-100"
-                                        >
-                                            <Trash className="size-4" />
-                                        </Button>
-                                    )}
-                                </div>
-                                <VariantPriceDetail
-                                    priceIncludesTax={activeChannel?.pricesIncludeTax ?? false}
-                                    price={price.price}
-                                    currencyCode={
-                                        price.currencyCode ?? activeChannel?.defaultCurrencyCode ?? ''
-                                    }
-                                    taxCategoryId={taxCategoryId}
+                                </DetailFormGrid>
+                                {/* Custom fields for ProductVariantPrice */}
+                                <CustomFieldsForm
+                                    entityType="ProductVariantPrice"
+                                    control={form.control}
+                                    formPathPrefix={`prices.${actualIndex}`}
                                 />
-                            </DetailFormGrid>
+                            </div>
                         );
                     })}
                     {unusedCurrencies.length ? (

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
 import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
 import { usePriceFactor } from '@/vdb/components/shared/assign-to-channel-dialog.js';
-import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { usePaginatedList } from '@/vdb/hooks/use-paginated-list.js';
 import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
 import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
 import { api } from '@/vdb/graphql/api.js';

package/src/app/routes/_authenticated/_profile/profile.graphql.ts

@@ -10,6 +10,13 @@ export const activeAdministratorDocument = graphql(`
             lastName
             emailAddress
             customFields
+            user {
+                authenticationMethods {
+                    id
+                    strategy
+                    createdAt
+                }
+            }
         }
     }
 `);

package/src/app/routes/_authenticated/_profile/profile.tsx

@@ -1,5 +1,6 @@
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import {
@@ -14,6 +15,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { api } from '@/vdb/graphql/api.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute } from '@tanstack/react-router';
 import { toast } from 'sonner';
@@ -35,8 +37,9 @@ export const Route = createFileRoute('/_authenticated/_profile/profile')({
 
 function ProfilePage() {
     const { t } = useLingui();
+    const { formatDate } = useLocalFormat();
 
-    const { form, submitHandler, isPending } = useDetailPage({
+    const { form, submitHandler, isPending, entity } = useDetailPage({
         queryDocument: activeAdministratorDocument,
         entityField: 'activeAdministrator',
         updateDocument: updateAdministratorDocument,
@@ -112,6 +115,27 @@ function ProfilePage() {
                         />
                     </DetailFormGrid>
                 </PageBlock>
+                <PageBlock
+                    column="side"
+                    blockId="auth-methods"
+                    title={<Trans>Authentication methods</Trans>}
+                >
+                    <div className="space-y-2">
+                        {entity?.user?.authenticationMethods.map(method => (
+                            <div
+                                key={method.id}
+                                className="flex items-center justify-between py-2 border-b last:border-b-0"
+                            >
+                                <Badge variant="secondary">
+                                    {method.strategy === 'native' ? t`Password` : method.strategy}
+                                </Badge>
+                                <span className="text-sm text-muted-foreground">
+                                    <Trans>Added</Trans> {formatDate(method.createdAt)}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                </PageBlock>
                 <CustomFieldsPageBlock column="main" entityType="Administrator" control={form.control} />
             </PageLayout>
         </Page>

package/src/app/routes/_authenticated/_promotions/components/promotion-actions-selector.tsx

@@ -17,9 +17,14 @@ export const promotionActionsDocument = graphql(
 interface PromotionActionsSelectorProps {
     value: ConfigurableOperationInputType[];
     onChange: (value: ConfigurableOperationInputType[]) => void;
+    onValidityChange?: (isValid: boolean) => void;
 }
 
-export function PromotionActionsSelector({ value, onChange }: Readonly<PromotionActionsSelectorProps>) {
+export function PromotionActionsSelector({
+    value,
+    onChange,
+    onValidityChange,
+}: Readonly<PromotionActionsSelectorProps>) {
     return (
         <ConfigurableOperationMultiSelector
             value={value}
@@ -30,6 +35,7 @@ export function PromotionActionsSelector({ value, onChange }: Readonly<Promotion
             buttonText="Add action"
             dropdownTitle="Available Actions"
             showEnhancedDropdown={true}
+            onValidityChange={onValidityChange}
         />
     );
 }

package/src/app/routes/_authenticated/_promotions/components/promotion-conditions-selector.tsx

@@ -17,9 +17,14 @@ export const promotionConditionsDocument = graphql(
 interface PromotionConditionsSelectorProps {
     value: ConfigurableOperationInputType[];
     onChange: (value: ConfigurableOperationInputType[]) => void;
+    onValidityChange?: (isValid: boolean) => void;
 }
 
-export function PromotionConditionsSelector({ value, onChange }: Readonly<PromotionConditionsSelectorProps>) {
+export function PromotionConditionsSelector({
+    value,
+    onChange,
+    onValidityChange,
+}: Readonly<PromotionConditionsSelectorProps>) {
     return (
         <ConfigurableOperationMultiSelector
             value={value}
@@ -30,6 +35,7 @@ export function PromotionConditionsSelector({ value, onChange }: Readonly<Promot
             buttonText="Add condition"
             dropdownTitle="Available Conditions"
             showEnhancedDropdown={true}
+            onValidityChange={onValidityChange}
         />
     );
 }

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -23,6 +23,7 @@ import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-lo
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useState } from 'react';
 import { toast } from 'sonner';
 import { PromotionActionsSelector } from './components/promotion-actions-selector.js';
 import { PromotionConditionsSelector } from './components/promotion-conditions-selector.js';
@@ -93,6 +94,7 @@ function PromotionDetailPage() {
                     languageCode: translation.languageCode,
                     name: translation.name,
                     description: translation.description,
+                    customFields: (translation as any).customFields,
                 })),
                 customFields: entity.customFields,
             };
@@ -123,6 +125,9 @@ function PromotionDetailPage() {
         },
     });
 
+    const [conditionsArgsValid, setConditionsArgsValid] = useState(true);
+    const [actionsArgsValid, setActionsArgsValid] = useState(true);
+
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{creatingNewEntity ? <Trans>New promotion</Trans> : (entity?.name ?? '')}</PageTitle>
@@ -131,7 +136,13 @@ function PromotionDetailPage() {
                     <PermissionGuard requires={['UpdatePromotion']}>
                         <Button
                             type="submit"
-                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
+                            disabled={
+                                !form.formState.isDirty ||
+                                !form.formState.isValid ||
+                                isPending ||
+                                !conditionsArgsValid ||
+                                !actionsArgsValid
+                            }
                         >
                             {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
                         </Button>
@@ -226,6 +237,7 @@ function PromotionDetailPage() {
                             <PromotionConditionsSelector
                                 value={field.value ?? []}
                                 onChange={field.onChange}
+                                onValidityChange={setConditionsArgsValid}
                             />
                         )}
                     />
@@ -235,7 +247,11 @@ function PromotionDetailPage() {
                         control={form.control}
                         name="actions"
                         render={({ field }) => (
-                            <PromotionActionsSelector value={field.value ?? []} onChange={field.onChange} />
+                            <PromotionActionsSelector
+                                value={field.value ?? []}
+                                onChange={field.onChange}
+                                onValidityChange={setActionsArgsValid}
+                            />
                         )}
                     />
                 </PageBlock>

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-calculator-selector.tsx

@@ -17,9 +17,14 @@ export const shippingCalculatorsDocument = graphql(
 interface ShippingCalculatorSelectorProps {
     value: ConfigurableOperationInputType | undefined;
     onChange: (value: ConfigurableOperationInputType | undefined) => void;
+    onValidityChange?: (isValid: boolean) => void;
 }
 
-export function ShippingCalculatorSelector({ value, onChange }: Readonly<ShippingCalculatorSelectorProps>) {
+export function ShippingCalculatorSelector({
+    value,
+    onChange,
+    onValidityChange,
+}: Readonly<ShippingCalculatorSelectorProps>) {
     return (
         <ConfigurableOperationSelector
             value={value}
@@ -28,6 +33,7 @@ export function ShippingCalculatorSelector({ value, onChange }: Readonly<Shippin
             queryKey="shippingCalculators"
             dataPath="shippingCalculators"
             buttonText="Select Shipping Calculator"
+            onValidityChange={onValidityChange}
         />
     );
 }

package/src/app/routes/_authenticated/_shipping-methods/components/shipping-eligibility-checker-selector.tsx

@@ -17,12 +17,14 @@ export const shippingEligibilityCheckersDocument = graphql(
 interface ShippingEligibilityCheckerSelectorProps {
     value: ConfigurableOperationInputType | undefined;
     onChange: (value: ConfigurableOperationInputType | undefined) => void;
+    onValidityChange?: (isValid: boolean) => void;
 }
 
 export function ShippingEligibilityCheckerSelector({
     value,
     onChange,
-}: ShippingEligibilityCheckerSelectorProps) {
+    onValidityChange,
+}: Readonly<ShippingEligibilityCheckerSelectorProps>) {
     return (
         <ConfigurableOperationSelector
             value={value}
@@ -31,6 +33,7 @@ export function ShippingEligibilityCheckerSelector({
             queryKey="shippingEligibilityCheckers"
             dataPath="shippingEligibilityCheckers"
             buttonText="Select Shipping Eligibility Checker"
+            onValidityChange={onValidityChange}
         />
     );
 }

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods_.$id.tsx

@@ -20,6 +20,7 @@ import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-lo
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useState } from 'react';
 import { toast } from 'sonner';
 import { FulfillmentHandlerSelector } from './components/fulfillment-handler-selector.js';
 import { ShippingCalculatorSelector } from './components/shipping-calculator-selector.js';
@@ -79,6 +80,7 @@ function ShippingMethodDetailPage() {
                     languageCode: translation.languageCode,
                     name: translation.name,
                     description: translation.description,
+                    customFields: (translation as any).customFields,
                 })),
                 customFields: entity.customFields,
             };
@@ -108,6 +110,9 @@ function ShippingMethodDetailPage() {
     const checker = form.watch('checker');
     const calculator = form.watch('calculator');
 
+    const [checkerArgsValid, setCheckerArgsValid] = useState(true);
+    const [calculatorArgsValid, setCalculatorArgsValid] = useState(true);
+
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>
@@ -126,7 +131,9 @@ function ShippingMethodDetailPage() {
                                 !form.formState.isValid ||
                                 isPending ||
                                 !checker?.code ||
-                                !calculator?.code
+                                !calculator?.code ||
+                                !checkerArgsValid ||
+                                !calculatorArgsValid
                             }
                         >
                             {creatingNewEntity ? <Trans>Create</Trans> : <Trans>Update</Trans>}
@@ -178,6 +185,7 @@ function ShippingMethodDetailPage() {
                             <ShippingEligibilityCheckerSelector
                                 value={field.value}
                                 onChange={field.onChange}
+                                onValidityChange={setCheckerArgsValid}
                             />
                         )}
                     />
@@ -187,7 +195,11 @@ function ShippingMethodDetailPage() {
                         control={form.control}
                         name="calculator"
                         render={({ field }) => (
-                            <ShippingCalculatorSelector value={field.value} onChange={field.onChange} />
+                            <ShippingCalculatorSelector
+                                value={field.value}
+                                onChange={field.onChange}
+                                onValidityChange={setCalculatorArgsValid}
+                            />
                         )}
                     />
                 </PageBlock>

package/src/i18n/common-strings.ts

@@ -39,6 +39,13 @@ const commonI18nString = {
         /* i18n*/ 'orderState.Modifying',
         /* i18n*/ 'orderState.ArrangingAdditionalPayment',
     ],
+    refundReason: [
+        /* i18n*/ 'refundReason.CustomerRequest',
+        /* i18n*/ 'refundReason.NotAvailable',
+        /* i18n*/ 'refundReason.DamagedInShipping',
+        /* i18n*/ 'refundReason.WrongItem',
+        /* i18n*/ 'refundReason.Other',
+    ],
     fieldName: [
         /* i18n*/ 'fieldName.attempts',
         /* i18n*/ 'fieldName.availableCurrencyCodes',