diff --git a/apps/web/cypress/e2e/planning.feature b/apps/web/cypress/e2e/planning.feature index 53692ee..eaa7546 100644 --- a/apps/web/cypress/e2e/planning.feature +++ b/apps/web/cypress/e2e/planning.feature @@ -15,7 +15,7 @@ Feature: Adding a recipe to the planning And browsing TheMealDB returns some items And the planning request reflects whatever's been added so far - Scenario: Adds a not-yet-imported source item to a planning slot, importing it on the way + Scenario: Adds a not-yet-imported source item to a planning slot, landing on the review screen since an ingredient needs resolving Given previewing TheMealDB item "9999" is available And importing the previewed item will succeed and return id 99 And adding the imported recipe to the planning will succeed @@ -23,7 +23,6 @@ Feature: Adding a recipe to the planning And I click the add button for the first empty planning slot And I click the button "TheMealDB" And I click the source item "Fish Pie" - And I click the link "Importer cette recette" Then I should see "Cette recette sera automatiquement ajoutée à votre planning une fois importée." When I choose an ingredient for the unresolved line "some mystery paste" @@ -34,3 +33,15 @@ Feature: Adding a recipe to the planning Then the planning add request should have included recipe 99, weekDay "lundi", meal "petit-dejeuner", and portions 4 And the URL should be the home page And the recipe "Fish Pie" should appear in the first planning slot with 4 portions + + Scenario: Adds a fully-resolved not-yet-imported item to a planning slot transparently, with no review screen at all + Given previewing TheMealDB item "7777" is fully resolved as "Ratatouille" + And importing item "7777" will succeed and return id 100 + And adding recipe 100 to the planning will succeed + When I visit "/" + And I click the add button for the first empty planning slot + And I click the button "TheMealDB" + And I click the source item "Ratatouille" + Then the import request for "7777" should have included the name "Ratatouille" + And the planning add request should have included recipe 100, weekDay "lundi", meal "petit-dejeuner", and portions 4 + And the URL should be the home page diff --git a/apps/web/cypress/e2e/planning.ts b/apps/web/cypress/e2e/planning.ts index dd078bb..2aadca6 100644 --- a/apps/web/cypress/e2e/planning.ts +++ b/apps/web/cypress/e2e/planning.ts @@ -49,6 +49,18 @@ Given("browsing TheMealDB returns some items", () => { alreadyImported: false, recipeId: null, }, + // Draft's own preview ("previewing TheMealDB item ... is fully + // resolved") has nothing left for a person to fix — unlike "Fish + // Pie" above, exercises the transparent-import path instead of the + // review screen. + { + externalId: "7777", + title: "Ratatouille", + picture: null, + url: "https://www.themealdb.com/meal/7777", + alreadyImported: false, + recipeId: null, + }, ], nextCursor: null, }, @@ -89,6 +101,76 @@ Given("previewing TheMealDB item {string} is available", (externalId: string) => }); }); +// Unlike "previewing TheMealDB item ... is available" above, every +// ingredient line here already resolved to a real ingredient/unit/quantity +// — `tryBuildCompleteImport` (RecipePickerDialog.tsx) accepts a draft +// shaped exactly like this one as-is, no review screen needed. +Given( + "previewing TheMealDB item {string} is fully resolved as {string}", + (externalId: string, name: string) => { + cy.intercept("GET", `**/sources/theMealDb/preview/${externalId}`, { + statusCode: 200, + body: { + sourceKey: "theMealDb", + externalId, + name, + description: null, + picture: null, + portions: 4, + sourceUrl: `https://www.themealdb.com/meal/${externalId}`, + ingredients: [ + { + rawText: "1 onion", + quantity: 1, + ingredient: { + id: 1, + key: "onion", + icon: "VEGETABLE", + category: "freshProduce", + subcategory: "vegetables", + reproducible: false, + allergens: [], + diets: [], + }, + unit: { id: 1, key: "piece", type: "COUNT", toBaseFactor: 1 }, + }, + ], + steps: [{ description: "Cuire à la poêle.", picture: null, techSteps: [] }], + }, + }); + }, +); + +Given( + "importing item {string} will succeed and return id {int}", + (externalId: string, id: number) => { + cy.intercept("POST", `**/sources/theMealDb/import/${externalId}`, { + statusCode: 201, + body: { id }, + }).as("importItem"); + }, +); + +Given("adding recipe {int} to the planning will succeed", (recipeId: number) => { + cy.intercept("POST", "**/planning/items", { + statusCode: 201, + body: { + id: 2, + weekDay: "lundi", + meal: "petit-dejeuner", + portions: 4, + recipe: { id: recipeId, name: "Ratatouille" }, + }, + }).as("addPlanningItem"); +}); + +Then( + "the import request for {string} should have included the name {string}", + (_externalId: string, name: string) => { + cy.wait("@importItem").its("request.body.name").should("eq", name); + }, +); + // Covers every reference catalog both `RecipePickerDialog` (ingredients/ // diets, for its own filters) and `ImportRecipePage` (ingredients/diets/ // units, for the review form) fetch — same endpoints, one fixture for both. diff --git a/apps/web/cypress/e2e/recipe-sources.feature b/apps/web/cypress/e2e/recipe-sources.feature index 85a7379..16dfee8 100644 --- a/apps/web/cypress/e2e/recipe-sources.feature +++ b/apps/web/cypress/e2e/recipe-sources.feature @@ -45,7 +45,7 @@ Feature: Browsing external recipe sources And the recipe detail panel heading should be "Fish Pie" And I should see the highlighted technique "Cuire" - Scenario: Deep-links straight to a not-yet-imported item's own page + Scenario: Deep-links straight to a not-yet-imported item's own page, with no import affordance at all Given the recipe catalog contains nothing And the sources reference list has options And the household has enabled TheMealDB @@ -53,31 +53,5 @@ Feature: Browsing external recipe sources And previewing TheMealDB item "9999" is available When I visit "/recettes/sources/theMealDb/9999" Then the recipe detail panel heading should be "Fish Pie" - And I should see "Importer cette recette" - - Scenario: Reviews an import, resolving an unrecognized ingredient before confirming - Given the recipe catalog contains nothing - And the sources reference list has options - And the household has enabled TheMealDB - And browsing TheMealDB returns some items - And previewing TheMealDB item "9999" is available - And the ingredient and diet catalog is available for import - And importing the previewed item will succeed and return id 99 - When I visit "/recettes" - And I click the button "TheMealDB" - And I click the source item "Fish Pie" - And I click the link "Importer cette recette" - Then the "recipe-name" field should have the value "Fish Pie" - And the recipe should include the ingredient "Oignon" - - When I choose an ingredient for the unresolved line "some mystery paste" - And I select the ingredient "Sel" from the picker - Then the unresolved ingredients section should no longer be shown - And there should be 2 ingredient rows - - When I select unit "unité" for the first ingredient - And I fill in the last ingredient's quantity with "1" and unit "unité" - Then the "Importer" button should not be disabled - When I click the button "Importer" - Then the import request should have included ingredient 2 with quantity 1 and unitId 1 - And the URL should include "/recettes/99" + And I should not see "Importer cette recette" + And I should see a discreet link to the item's original page diff --git a/apps/web/cypress/e2e/recipe-sources.ts b/apps/web/cypress/e2e/recipe-sources.ts index c630282..f183bc2 100644 --- a/apps/web/cypress/e2e/recipe-sources.ts +++ b/apps/web/cypress/e2e/recipe-sources.ts @@ -135,66 +135,9 @@ Then("the source item {string} should be marked as already imported", (title: st cy.contains("tr", title).find(".source-item-table__imported-badge").should("be.visible"); }); -// ImportRecipePage (the review screen) loads its own ingredient/diet/unit -// catalogs the same way RecipeFormPage does — "onion" matches the resolved -// line in "previewing TheMealDB item ... is available" above, "salt" is -// what "some mystery paste" (unresolved in that same fixture) gets -// corrected to in the review-and-import scenario. -Given("the ingredient and diet catalog is available for import", () => { - cy.intercept("GET", "**/reference/ingredients", { - statusCode: 200, - body: [ - { - id: 1, - key: "onion", - icon: "VEGETABLE", - category: "freshProduce", - subcategory: "vegetables", - allergens: [], - diets: [], - }, - { - id: 2, - key: "salt", - icon: "SPICE", - category: "condimentsAndSpices", - subcategory: "spices", - allergens: [], - diets: [], - }, - ], - }); - cy.intercept("GET", "**/reference/diets", { - statusCode: 200, - body: [{ id: 1, key: "omnivore" }], - }); - cy.intercept("GET", "**/reference/units", { - statusCode: 200, - body: [{ id: 1, key: "piece", type: "COUNT", toBaseFactor: 1 }], - }); +// Browsing a source (outside of adding-to-planning, `RecipePickerDialog`'s +// own scenarios in planning.ts) never imports anything — the only action +// this preview offers is a discreet way out to the item's own page. +Then("I should see a discreet link to the item's original page", () => { + cy.get(".recipe-detail-panel__source-link").should("be.visible"); }); - -Given("importing the previewed item will succeed and return id {int}", (id: number) => { - cy.intercept("POST", "**/sources/theMealDb/import/9999", { statusCode: 201, body: { id } }).as( - "importRecipe", - ); -}); - -When("I choose an ingredient for the unresolved line {string}", (rawText: string) => { - cy.contains(".import-recipe__unresolved-row", rawText) - .contains("button", "Choisir un ingrédient") - .click(); -}); - -Then("the unresolved ingredients section should no longer be shown", () => { - cy.get(".import-recipe__unresolved").should("not.exist"); -}); - -Then( - "the import request should have included ingredient {int} with quantity {int} and unitId {int}", - (ingredientId: number, quantity: number, unitId: number) => { - cy.wait("@importRecipe") - .its("request.body.ingredients") - .should("include.deep.members", [{ ingredientId, quantity, unitId }]); - }, -); diff --git a/apps/web/src/features/planning/RecipePickerDialog.tsx b/apps/web/src/features/planning/RecipePickerDialog.tsx index 6958790..5177365 100644 --- a/apps/web/src/features/planning/RecipePickerDialog.tsx +++ b/apps/web/src/features/planning/RecipePickerDialog.tsx @@ -1,14 +1,17 @@ import { + type BrowsableSourceItemView, type DietView, ErrorCode, type IngredientView, type Meal, type PlanningItemView, type RecipeSummaryView, + type RecipeView, type WeekDay, } from "@batch-cooking/shared"; import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; import { ApiError, apiClient } from "../../api/client"; import { CheckboxOption } from "../../components/ui/Checkbox"; import { Dialog } from "../../components/ui/Dialog"; @@ -23,6 +26,7 @@ import { isSourceTab, parseSourceTabValue, } from "../recipes/RecipeTabs"; +import { tryBuildCompleteImport } from "../recipes/recipe-import-draft"; import { useEnabledSources } from "../recipes/useEnabledSources"; import "./recipe-picker-dialog.scss"; @@ -55,13 +59,12 @@ export interface PlanningSlot { * (ingredients / regime / "convient à tout le foyer" toggle, all wired to * `GET /recipes`'s corresponding query params) since browsing here is * about finding something to cook, not just looking something up. Each - * household-enabled source's own tab is included too (unlike an earlier - * version of this dialog — see `ImportRecipePage`'s `planningSlot`, the - * review/import flow that made including them here worthwhile): picking - * an already-imported item behaves exactly like picking a regular recipe, - * and picking one that isn't imported yet hands off to that review - * screen, which adds the freshly-created recipe straight to this slot - * once it's saved. + * household-enabled source's own tab is included too: picking an + * already-imported item behaves exactly like picking a regular recipe, + * and picking one that isn't imported yet is what actually imports it — + * nowhere else in the app does (see `handleSelectDraftItem`) — since a + * source item only ever becomes a real, saved `Recipe` as a side effect of + * someone adding it to their planning. * * Mounted only while open (see `PlanningPage`, same conditional-mount * convention as its own `CalendarPopover`) — every piece of local state @@ -71,10 +74,14 @@ export interface PlanningSlot { * Selecting a row doesn't navigate anywhere (unlike `RecipesPage`'s own * use of `RecipeTable`) — it switches this same dialog to a small * "how many portions?" confirmation step, then calls `POST - * /planning/items` on submit. The one exception is picking a not-yet- - * imported source item, which does navigate away entirely (to - * `/recettes/importer/...`) — that flow has its own portions field - * already, on the review screen itself. + * /planning/items` on submit. Picking a not-yet-imported source item is + * handled differently still (`handleSelectDraftItem`): when the draft has + * everything a real recipe needs, it's imported and added to this slot + * transparently — no extra screen, same as picking anything else. Only + * when something's actually missing (an ingredient the automatic matcher + * couldn't resolve, say) does this navigate away entirely, to the review + * screen (`/recettes/importer/...`), which has its own portions field + * already. */ export function RecipePickerDialog({ slot, @@ -86,6 +93,7 @@ export function RecipePickerDialog({ onAdded: (item: PlanningItemView) => void; }) { const { t } = useTranslation(); + const navigate = useNavigate(); const [activeTab, setActiveTab] = useState("favoris"); const activeSourceKey = parseSourceTabValue(activeTab); @@ -106,6 +114,12 @@ export function RecipePickerDialog({ // recipe was deleted between the browse fetch and the click), surfaced // the same way any other catalog load error is on this dialog. const [sourceSelectError, setSourceSelectError] = useState(false); + // True while `handleSelectDraftItem` below is resolving a not-yet- + // imported item's transparent-import attempt — replaces the source tab's + // whole panel with a status message for that brief window (fetch the + // draft, maybe import it, maybe add it to the slot) rather than leaving + // the browse list clickable mid-flight. + const [isAddingDraft, setIsAddingDraft] = useState(false); // The recipe picked in step 1 — `null` while still browsing, set once a // row is clicked to switch this dialog into its confirmation step. @@ -180,6 +194,74 @@ export function RecipePickerDialog({ .catch(() => setSourceSelectError(true)); } + /** Navigates away to the full review/creation screen, pre-filled from this exact item and carrying `slot` along so a successful import there adds straight to it — the fallback `handleSelectDraftItem` below takes whenever a transparent import isn't possible. */ + function goToReviewScreen(sourceKey: string, externalId: string) { + navigate( + `/recettes/importer/${sourceKey}/${encodeURIComponent(externalId)}` + + `?planningDate=${slot.date}&planningWeekDay=${slot.weekDay}&planningMeal=${slot.meal}`, + ); + } + + /** + * Picking a not-yet-imported source item — the one action in the whole + * app that actually imports one (see this component's own doc comment). + * Fetches its full draft, and when {@link tryBuildCompleteImport} finds + * nothing missing, imports it and adds it to `slot` transparently: no + * extra screen, same end result as picking any other recipe. Anything + * short of that — an unresolved ingredient, a network hiccup on any of + * these three calls — falls back to the full review screen + * (`goToReviewScreen`) instead, since only a person can supply what's + * actually missing. + */ + async function handleSelectDraftItem(item: BrowsableSourceItemView) { + if (activeSourceKey === null) return; + const sourceKey = activeSourceKey; + setSourceSelectError(false); + setIsAddingDraft(true); + + let payload: ReturnType; + try { + payload = tryBuildCompleteImport( + await apiClient.previewSourceItem(sourceKey, item.externalId), + ); + } catch { + goToReviewScreen(sourceKey, item.externalId); + return; + } + if (!payload) { + setIsAddingDraft(false); + goToReviewScreen(sourceKey, item.externalId); + return; + } + + let saved: RecipeView; + try { + saved = await apiClient.importSourceItem(sourceKey, item.externalId, payload); + } catch { + setIsAddingDraft(false); + goToReviewScreen(sourceKey, item.externalId); + return; + } + + try { + const planningItem = await apiClient.addPlanningItem({ + date: slot.date, + weekDay: slot.weekDay, + meal: slot.meal, + recipeId: saved.id, + portions: payload.portions, + }); + onAdded(planningItem); + onClose(); + } catch { + // The recipe itself is already saved at this point — only adding it + // to this slot failed. Land on its own page rather than retrying the + // whole import through the review form (same fallback + // `ImportRecipePage`'s own submit takes for the identical failure). + navigate(`/recettes/${saved.id}`); + } + } + async function handleConfirm() { if (!selectedRecipe) return; const parsedPortions = Number(portions); @@ -319,12 +401,16 @@ export function RecipePickerDialog({ {t("common.loadError")}

)} - + {isAddingDraft ? ( +

{t("planning.picker.addingDraft")}

+ ) : ( + + )} ) : ( <> diff --git a/apps/web/src/features/recipes/RecipeDetailPanel.tsx b/apps/web/src/features/recipes/RecipeDetailPanel.tsx index 479b036..32ff476 100644 --- a/apps/web/src/features/recipes/RecipeDetailPanel.tsx +++ b/apps/web/src/features/recipes/RecipeDetailPanel.tsx @@ -1,14 +1,9 @@ -import { - ErrorCode, - type Meal, - type RecipeImportDraftView, - type RecipeView, - type WeekDay, -} from "@batch-cooking/shared"; +import { ErrorCode, type RecipeImportDraftView, type RecipeView } from "@batch-cooking/shared"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; import { ApiError, apiClient } from "../../api/client"; +import { SourceLinkIcon } from "../../layouts/nav-icons"; import { errorMessageService } from "../../services/error-message.service"; import { AllergenBadges } from "./AllergenBadges"; import { FavoriteStarButton } from "./FavoriteStarButton"; @@ -20,11 +15,14 @@ import "./recipes.scss"; * is distinct from `"not-found"` (a selected id that turned out invalid/ * inaccessible), each with its own message. `"loaded-draft"` is the one * variant that isn't a real, saved `Recipe`: a not-yet-imported source - * item's preview (`RecipeSourcesPanel`'s "Sources" tab) — rendered through - * this exact same component so viewing one looks and behaves like viewing - * any other recipe ("comme si c'était importé"), differing only in which - * actions make sense (there's nothing to favorite/edit/delete yet, but - * there is something to *import*). + * item's read-only preview (`RecipeSourcesPanel`'s source tabs) — rendered + * through this exact same component so viewing one looks like viewing any + * other recipe, minus every action that doesn't make sense on something + * that isn't saved yet (favorite/edit/delete — nor a manual "import" + * button: a source item only ever gets saved as a side effect of adding it + * to a planning slot, see `RecipePickerDialog`'s `handleSelectDraftItem`, + * never from this preview). The one action this state does offer is a + * discreet link to the item's original page, if it has one. */ export type RecipeDetailState = | { status: "empty" } @@ -50,20 +48,11 @@ export function RecipeDetailPanel({ dislikedIngredientIds = [], onFavoriteToggled, onDeleted, - planningSlot, }: { state: RecipeDetailState; dislikedIngredientIds?: number[]; onFavoriteToggled?: (recipeId: number, isFavorite: boolean) => void; onDeleted?: (recipeId: number) => void; - /** - * Set only when this panel is rendered from `RecipePickerDialog` (adding a - * recipe to one planning slot) — carried along on a `"loaded-draft"` - * item's "Importer cette recette" link as query params, so `ImportRecipePage` - * knows to add the freshly-created recipe to this exact slot once the - * import succeeds. See `ImportRecipePage`'s own `planningSlot`. - */ - planningSlot?: { date: string; weekDay: WeekDay; meal: Meal }; }) { const { t } = useTranslation(); @@ -108,6 +97,18 @@ export function RecipeDetailPanel({ + {draft.sourceUrl && ( + + + )}
@@ -121,28 +122,6 @@ export function RecipeDetailPanel({
-
- - {t("recipes.sources.detail.importButton")} - - - {t("recipes.sources.detail.viewSource")} - -
- {draft.description && (

{draft.description}

diff --git a/apps/web/src/features/recipes/RecipeSourcesPanel.tsx b/apps/web/src/features/recipes/RecipeSourcesPanel.tsx index 51c59ca..99e2a86 100644 --- a/apps/web/src/features/recipes/RecipeSourcesPanel.tsx +++ b/apps/web/src/features/recipes/RecipeSourcesPanel.tsx @@ -1,4 +1,4 @@ -import type { BrowsableSourceItemView, Meal, WeekDay } from "@batch-cooking/shared"; +import type { BrowsableSourceItemView } from "@batch-cooking/shared"; import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { apiClient } from "../../api/client"; @@ -40,8 +40,9 @@ type BrowseState = * The right-hand preview reuses `RecipeDetailPanel` itself (its * `"loaded-draft"` state) rather than a separate component — viewing a * not-yet-imported item is meant to look and feel exactly like viewing any - * other recipe, differing only in which actions are offered (there's an - * "Importer" button where Modifier/Supprimer would be). + * other recipe, minus the actions that don't apply to something that isn't + * saved yet. This is `RecipesPage`'s own mode: browsing/reading only, + * nothing here ever imports anything (see `onSelectDraftItem` below). * * Selecting an already-imported item navigates straight to its real * recipe (`/recettes/:id`, leaving this tab) — `onSelectImportedRecipe` @@ -58,20 +59,29 @@ type BrowseState = * (`/recettes/sources/:sourceKey/:externalId`) without this panel needing * to know anything about routing itself — it reports selection changes * upward, and re-previews on mount/prop-change if handed one back. - * `RecipePickerDialog` leaves both unset: previewing inside that modal has - * no URL of its own to keep in sync. + * `RecipePickerDialog` leaves both unset: it never previews a not-yet- + * imported item inline at all (see `onSelectDraftItem`). */ export function RecipeSourcesPanel({ sourceKey, onSelectImportedRecipe, - planningSlot, + onSelectDraftItem, initialSelection, onItemSelected, }: { sourceKey: string; onSelectImportedRecipe: (recipeId: number) => void; - /** Forwarded as-is to `RecipeDetailPanel` — see its own doc comment. Only ever set by `RecipePickerDialog`. */ - planningSlot?: { date: string; weekDay: WeekDay; meal: Meal }; + /** + * Set only by `RecipePickerDialog` — picking a not-yet-imported item + * while adding to a planning slot isn't something to preview inline + * here at all (there's no "import" button on that preview to lead + * anywhere any more — see `RecipeDetailPanel`'s own doc comment). When + * set, a not-yet-imported row's click hands the item straight to this + * instead of previewing it, and the caller takes it from there + * (`RecipePickerDialog.handleSelectDraftItem`: import transparently when + * nothing's missing, otherwise hand off to the review screen). + */ + onSelectDraftItem?: (item: BrowsableSourceItemView) => void; initialSelection?: SourceItemSelection; onItemSelected?: (item: SourceItemSelection | null) => void; }) { @@ -168,6 +178,10 @@ export function RecipeSourcesPanel({ onSelectImportedRecipe(item.recipeId); return; } + if (onSelectDraftItem) { + onSelectDraftItem(item); + return; + } const selection = { sourceKey, externalId: item.externalId }; setSelectedExternalId(item.externalId); setPreviewState({ status: "loading" }); @@ -221,7 +235,7 @@ export function RecipeSourcesPanel({ )} - + ); diff --git a/apps/web/src/features/recipes/recipe-import-draft.ts b/apps/web/src/features/recipes/recipe-import-draft.ts new file mode 100644 index 0000000..ebdbff9 --- /dev/null +++ b/apps/web/src/features/recipes/recipe-import-draft.ts @@ -0,0 +1,60 @@ +import { + type CreateRecipeInput, + type RecipeImportDraftView, + createRecipeSchema, +} from "@batch-cooking/shared"; + +/** + * Attempts to turn `draft` straight into a submittable {@link CreateRecipeInput} + * — no form, no person involved — for the planning picker's transparent + * import path (`RecipePickerDialog`'s `handleSelectDraftItem`): adding a + * not-yet-imported source item to a planning slot should just work, + * silently, whenever nothing about it actually needs a human's judgment + * call. Returns `null` the moment anything does — an ingredient line the + * automatic matcher (`ingredient-matcher.ts`) couldn't resolve to a real + * ingredient/unit/quantity, or a missing portions count — so the caller can + * fall back to the full review screen (`ImportRecipePage`), pre-filled from + * this exact same draft, for a person to fill in what's missing. + * + * Default `visibility`/`dietIds` mirror what a person would otherwise leave + * untouched on that same form (`PERSONAL`, no diet tags) — nothing here is + * a guess about data the draft doesn't have an opinion on. + * `createRecipeSchema.safeParse` is still the actual authority on whether + * the result is submittable (a positive-portions check, string lengths, + * etc.) — the checks above it exist only for what a schema alone can't + * catch: `ingredient`/`unit` being resolved references, not just present + * values. + */ +export function tryBuildCompleteImport(draft: RecipeImportDraftView): CreateRecipeInput | null { + if (draft.portions === null) return null; + if (draft.ingredients.length === 0) return null; + if ( + draft.ingredients.some( + (line) => line.ingredient === null || line.unit === null || line.quantity === null, + ) + ) { + return null; + } + + const candidate: CreateRecipeInput = { + name: draft.name, + description: draft.description, + picture: draft.picture, + portions: draft.portions, + visibility: "PERSONAL", + dietIds: [], + ingredients: draft.ingredients.map((line) => ({ + // Every line is fully resolved by this point — guarded above. + ingredientId: (line.ingredient as NonNullable).id, + quantity: line.quantity as number, + unitId: (line.unit as NonNullable).id, + })), + steps: draft.steps.map((step) => ({ + description: step.description, + picture: step.picture, + })), + }; + + const result = createRecipeSchema.safeParse(candidate); + return result.success ? result.data : null; +} diff --git a/apps/web/src/features/recipes/recipes.scss b/apps/web/src/features/recipes/recipes.scss index 49a6e72..025d9c5 100644 --- a/apps/web/src/features/recipes/recipes.scss +++ b/apps/web/src/features/recipes/recipes.scss @@ -674,6 +674,42 @@ } } +// --- External source link (draft preview header) ---------------------------- +// Same overlay slot/sizing as `.favorite-star-button` above — a draft +// preview never has both (nothing to favorite yet), so the two never +// compete for the corner. Deliberately muted/small ("discret" per the +// product decision this button follows): a way out to the original page, +// not a call to action the way the buttons it replaced were. +.recipe-detail-panel__source-link { + position: absolute; + top: var(--space-sm); + right: var(--space-sm); + width: 2.2rem; + height: 2.2rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: color-mix(in srgb, var(--color-surface) 82%, transparent); + box-shadow: var(--shadow-sm); + color: var(--color-text-muted); + transition: + transform 0.12s ease, + color 0.12s ease; + + svg { + width: 1.1rem; + height: 1.1rem; + } + + &:hover, + &:focus-visible { + color: var(--color-primary); + transform: scale(1.08); + outline: none; + } +} + // --- Recipe form (create/edit) ---------------------------------------------- // Per-field validation and whole-form error messages — same small rules as // auth-form.scss/profile-forms.scss, redeclared here rather than shared diff --git a/apps/web/src/layouts/nav-icons.tsx b/apps/web/src/layouts/nav-icons.tsx index 0828143..a698dfa 100644 --- a/apps/web/src/layouts/nav-icons.tsx +++ b/apps/web/src/layouts/nav-icons.tsx @@ -26,4 +26,5 @@ export { Star as FavoriteIcon, Globe as PublicIcon, Rss as SourcesIcon, + ExternalLink as SourceLinkIcon, } from "lucide-react"; diff --git a/apps/web/src/locales/fr/translation.json b/apps/web/src/locales/fr/translation.json index e0f4ba9..623735d 100644 --- a/apps/web/src/locales/fr/translation.json +++ b/apps/web/src/locales/fr/translation.json @@ -142,7 +142,8 @@ "portionsLabel": "Nombre de portions", "backButton": "Retour", "confirmButton": "Ajouter au planning", - "adding": "Ajout…" + "adding": "Ajout…", + "addingDraft": "Ajout au planning…" } }, "recipes": { @@ -177,8 +178,7 @@ "loading": "Chargement…", "loadError": "Impossible de charger cette source pour le moment.", "detail": { - "viewSource": "Voir sur le site d'origine", - "importButton": "Importer cette recette" + "viewSource": "Voir sur le site d'origine" }, "import": { "title": "Revoir l'import", diff --git a/apps/web/src/pages/ImportRecipePage.tsx b/apps/web/src/pages/ImportRecipePage.tsx index e1a3842..1f891b5 100644 --- a/apps/web/src/pages/ImportRecipePage.tsx +++ b/apps/web/src/pages/ImportRecipePage.tsx @@ -72,33 +72,38 @@ function parsePlanningSlot( /** * Review screen for finalizing an import — routed at - * `/recettes/importer/:sourceKey/:externalId` (reached from - * `RecipeDetailPanel`'s "Importer cette recette" button, shown for its - * `"loaded-draft"` state). Pre-filled - * from `GET /sources/:sourceKey/preview/:externalId` (the same draft the - * preview panel already showed), structurally the same form as - * `RecipeFormPage` — same sub-components (`IngredientRow`, + * `/recettes/importer/:sourceKey/:externalId`. Reached only one way now: + * `RecipePickerDialog.handleSelectDraftItem`'s fallback, when picking a + * not-yet-imported source item to add to a planning slot turns out to need + * a person's input (an ingredient line the automatic matching + * (`ingredient-matcher.ts`) couldn't resolve, say) — a draft with nothing + * missing imports transparently from that dialog instead, without ever + * reaching this screen (`tryBuildCompleteImport`). There is no other way + * in any more: browsing a source outside of adding-to-planning + * (`RecipesPage`/`RecipeSourcesPanel`) only ever previews, on purpose — a + * source item isn't imported into the household's own catalog until + * someone actually plans it. + * + * Pre-filled from `GET /sources/:sourceKey/preview/:externalId` (the same + * draft the transparent-import attempt already fetched), structurally the + * same form as `RecipeFormPage` — same sub-components (`IngredientRow`, * `IngredientPicker`, `StepListEditor`, `DietTagSelect`), same * `CreateRecipeInput` submit shape — plus one thing a manual creation - * never has to handle: ingredient lines the automatic matching - * (`ingredient-matcher.ts`) couldn't resolve. Those render as their own - * "à compléter" list, each needing a real ingredient picked (or the line - * discarded) before the form can submit — never silently drops/guesses one, - * per the product decision this stage was built against (no invalid - * recipe is ever persisted). + * never has to handle: ingredient lines the automatic matching couldn't + * resolve. Those render as their own "à compléter" list, each needing a + * real ingredient picked (or the line discarded) before the form can + * submit — never silently drops/guesses one, per the product decision this + * stage was built against (no invalid recipe is ever persisted). * * Submits to `POST /sources/:sourceKey/import/:externalId` * (`apiClient.importSourceItem`) instead of `POST /recipes` — the only * other difference from `RecipeFormPage`'s own submit. * - * `?planningDate=&planningWeekDay=&planningMeal=` are set only when this - * page was reached from `RecipePickerDialog`'s "Sources" tab (via - * `RecipeDetailPanel`'s import link, see its own `planningSlot` prop) — - * picking a not-yet-imported item there hands off to this full review - * screen instead of the dialog's own small "how many portions?" step, - * since an unresolved-ingredient review doesn't fit in that step. When - * present and well-formed, a successful import also adds the freshly - * created recipe straight to that planning slot (`POST /planning/items`, + * `?planningDate=&planningWeekDay=&planningMeal=` carry the planning slot + * `RecipePickerDialog` was adding to along as query params (always present + * in practice, given the only entry point above — still parsed + * defensively, see `parsePlanningSlot`). A successful import adds the + * freshly created recipe straight to that slot (`POST /planning/items`, * using this form's own `portions` field) before landing back on the * planning page, instead of the recipe's own detail page. */