gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

2026-04-22

Browse source
This commit is contained in:
gcch 2026-04-22 11:10:57 +02:00
commit 23a2f6feff
10 changed files with 204 additions and 316 deletions
Download patch file Download diff file Expand all files Collapse all files

14
web/app/themes/haiku-atelier-2024/page-checkout.php
View file

@ -154,12 +154,14 @@ $session_checkout_stripe = Session::create([
'mode' => 'payment',
'success_url' => $urls['succes_commande'] . '?session_id={CHECKOUT_SESSION_ID}',
'metadata' => ['order_id' => $order_id, 'order_key' => $order_key],
'shipping_options' => [['shipping_rate_data' => [
'display_name' => $methode_livraison['nom'],
'fixed_amount' => ['amount' => $methode_livraison['cout'], 'currency' => 'EUR'],
'tax_behavior' => 'inclusive',
'type' => 'fixed_amount',
]]],
'shipping_options' => [[
'shipping_rate_data' => [
'display_name' => $methode_livraison['nom'],
'fixed_amount' => ['amount' => $methode_livraison['cout'], 'currency' => 'EUR'],
'tax_behavior' => 'inclusive',
'type' => 'fixed_amount',
],
]],
], ['idempotency_key' => Uuid::v4()]);
// echo json_encode($session_checkout_stripe);
header('HTTP/1.1 303 See Other');

2
web/app/themes/haiku-atelier-2024/src/scripts-effect/api-service.ts
View file

@ -49,4 +49,4 @@ class WooCommerceAPI extends Context.Service<
);
}
export { APIError, WooCommerceAPI };
export { WooCommerceAPI };

111
web/app/themes/haiku-atelier-2024/src/scripts-effect/lib/api.ts
View file

@ -1,43 +1,34 @@
import { Cause, Console, Context, Effect, Layer, pipe, Schedule, Schema, SchemaIssue } from "effect";
import { Console, Context, Effect, Layer, Match, pipe, Schedule, Schema, SchemaIssue } from "effect";
import { SchemaError } from "effect/Schema";
import {
FetchHttpClient,
HttpClient,
HttpClientError,
HttpClientRequest,
HttpClientResponse,
} from "effect/unstable/http";
import { HttpClientErrorSchema } from "effect/unstable/http/HttpClientError";
import type { CartProduct } from "../schemas/api.ts";
import { WooCommerceCart } from "../schemas/cart.ts";
class BodyParsingError extends Schema.TaggedErrorClass<BodyParsingError>()("BodyParsingError", {
cause: Schema.String,
}) {}
class FetchError extends Schema.TaggedErrorClass<FetchError>()("FetchError", {
cause: Schema.Defect,
}) {}
/** Le nombre maximal d'essais pour une Requête. */
const MAX_RETRIES = 3;
/** Le temps d'attente avant de réessayer une Requête. */
const RETRY_WAIT_TIME = "1 seconds";
/** Décrit une Erreur survenue au traitement d'une `Request`. */
class APIRequestError extends Schema.TaggedErrorClass<APIRequestError>()("APIRequestError", {
reason: Schema.Union([BodyParsingError, FetchError]),
message: Schema.String,
cause: Schema.Union([Schema.Defect, HttpClientErrorSchema]),
}) {}
class BadRequestError extends Schema.TaggedErrorClass<BadRequestError>()("BadRequestError", {
cause: Schema.Defect,
}){}
class UnauthorizedError extends Schema.TaggedErrorClass<UnauthorizedError>()("UnauthorizedError", {
cause: Schema.Defect,
}){}
class ForbiddenError extends Schema.TaggedErrorClass<ForbiddenError>()("ForbiddenError", {
cause: Schema.Defect,
}){}
class NotFoundError extends Schema.TaggedErrorClass<NotFoundError>()("NotFoundError", {
cause: Schema.Defect,
}){}
class ServerError extends Schema.TaggedErrorClass<ServerError>()("ServerError", {
cause: Schema.Defect,
}){}
/** Décrit une Erreur survenue au traitement d'une `Response`. */
class APIResponseError extends Schema.TaggedErrorClass<APIResponseError>()("APIResponseError", {
reason: Schema.Union([BadRequestError,UnauthorizedError,ForbiddenError,NotFoundError,ServerError]),
}){}
message: Schema.String,
cause: Schema.Union([Schema.Defect, HttpClientErrorSchema]),
}) {}
type APIError = APIRequestError | APIResponseError;
/** Client `fetch` contenant les options et en-têtes de Requêtes pré-renseignées. */
const APIFetchClient = FetchHttpClient.layer.pipe(
@ -61,24 +52,51 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
// Créé un client HTTP où chaque Requête est imprimée dans la console.
const haikuHTTPClient = pipe(
yield* HttpClient.HttpClient,
// Journalise toutes les Requêtes et Réponses.
// Journalise toutes les Requêtes.
HttpClient.tapRequest(request => Console.debug("APIClient", "Request", request)),
HttpClient.tap(response =>
Effect.gen(function*() {
const json = yield* response.json;
yield* Console.debug("APIClient", "Response", response.status, json);
})
),
// En cas de code HTTP indiquant un échec, générer une erreur.
HttpClient.filterStatusOk,
// Définis une politique d'essai.
HttpClient.retryTransient({
retryOn: "errors-only",
schedule: Schedule.exponential("1 seconds"),
times: 3,
schedule: Schedule.exponential(RETRY_WAIT_TIME),
times: MAX_RETRIES,
}),
);
const matchAPIError = (error: HttpClientError.HttpClientError | SchemaError): APIError => {
if (error._tag === "SchemaError") {
return new APIRequestError({
message: `Erreur lors du parsage du corps de la Requête :${SchemaIssue.makeFormatterDefault()(error.issue)}`,
cause: error,
});
} else {
return Match.typeTags<HttpClientError.HttpClientErrorReason, APIError>()({
TransportError: (cause): APIError =>
new APIRequestError({
cause,
message: "Un problème réseau empêche l'exécution de la Requête",
}),
EncodeError: cause => new APIRequestError({ cause, message: "Le corps de la Requête ne peut être lu" }),
InvalidUrlError: cause => new APIRequestError({ cause, message: "L'URL de la Requête n'est pas valide" }),
StatusCodeError: cause =>
new APIResponseError({ cause, message: "Le code HTTP de la Réponse correspond à un échec" }),
DecodeError: cause => new APIResponseError({ cause, message: "Le corps de la Réponse ne peut être lu" }),
EmptyBodyError: cause => new APIResponseError({ cause, message: "Un corps vide ne peut être lu" }),
})(error.reason);
}
};
const printErrorAsSuccinctMessage = (error: APIError): Effect.Effect<APIError> =>
Effect.gen(function*() {
yield* Console.error(
`${error.name} - ${error.message} : ${error.cause?._tag ?? ""} - ${error.cause?.description ?? ""}.`,
);
return yield* Effect.succeed(error);
});
const AddProductToCart = Effect.fn("AppClient.AddProductToCart")(
function*(nonce: string, productToAdd: CartProduct): Effect.fn.Return<WooCommerceCart, APIRequestError> {
function*(nonce: string, productToAdd: CartProduct): Effect.fn.Return<WooCommerceCart, APIError> {
const request = pipe(
HttpClientRequest.post(`/wp-json/wc/store/cart/add-item`),
HttpClientRequest.setHeader("Nonce", nonce),
@ -88,23 +106,9 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
const response = yield* pipe(
haikuHTTPClient.execute(request),
// TODO: Remplacer Schema.Unknown par un Schéma de l'objet retourné par le backend.
Effect.flatMap(HttpClientResponse.schemaBodyJson(WooCommerceCart)),
Effect.mapError(error => {
if (error._tag === "SchemaError") {
return new APIRequestError({
reason: new BodyParsingError({ cause: SchemaIssue.makeFormatterDefault()(error.issue) }),
});
} else {
return new APIRequestError({ reason: new FetchError({ cause: error.reason }) });
}
}),
Effect.tapError(error => {
error.stack = "";
error.reason.stack = "";
console.error(error._tag, error.name, error.message, error.reason, error.cause);
return Effect.succeed(error);
}),
Effect.mapError(error => matchAPIError(error)),
Effect.tapError(error => printErrorAsSuccinctMessage(error)),
);
return response;
@ -117,4 +121,5 @@ class APIClient extends Context.Service<APIClient>()("haikuatelier.fr/APIClient"
static readonly Live = Layer.effect(this, this.make).pipe(Layer.provide(APIFetchClient));
}
export { APIClient, APIFetchClient, APIRequestError };
export { APIClient, APIFetchClient, APIRequestError, APIResponseError };
export type { APIError };

4
web/app/themes/haiku-atelier-2024/src/scripts/page-produit/runtime.ts
View file

@ -2,10 +2,12 @@ import { Console, Layer, ManagedRuntime, pipe } from "effect";
import { APIClient } from "../../scripts-effect/lib/api.ts";
import ProductPageDOM from "./service-dom.ts";
import ProductPageElements from "./service-elements.ts";
import ProductPageMessages from "./service-messages.ts";
const ProductPageRuntime = ManagedRuntime.make(
pipe(
ProductPageDOM.layer,
ProductPageDOM.Live,
Layer.provideMerge(ProductPageMessages.Live),
Layer.provide(ProductPageElements.Live),
Layer.provide(APIClient.Live),
Layer.tapError(error => Console.error("ProductPageRuntime", "Impossible de créer le Layer :", error)),

87
web/app/themes/haiku-atelier-2024/src/scripts/page-produit/service-dom.ts
View file

@ -1,7 +1,6 @@
// oxlint-disable typescript/dot-notation
import {
Array as FxArray,
Cause,
Console,
Context,
Effect,
@ -13,11 +12,11 @@ import {
Schema,
SchemaIssue,
Stream,
SubscriptionRef,
} from "effect";
import type { NoSuchElementError } from "effect/Cause";
import type { SchemaError } from "effect/Schema";
import { APIClient } from "../../scripts-effect/lib/api.ts";
import type { APIRequestError } from "../../scripts-effect/lib/api.ts";
import type { APIError, APIRequestError } from "../../scripts-effect/lib/api.ts";
import { CartProduct } from "../../scripts-effect/schemas/api.ts";
import { WooCommerceCart } from "../../scripts-effect/schemas/cart.ts";
import { Product, ProductVariation, ProductVariationAttribute } from "../../scripts-effect/schemas/product.ts";
@ -28,10 +27,10 @@ import {
ATTRIBUT_DESACTIVE,
ATTRIBUT_HIDDEN,
} from "../constantes/dom.ts";
import { lanceAnimationCycleLoading } from "../lib/animations.ts";
import { emetMessageMajBoutonPanier } from "../lib/messages.ts";
import { IncoherentDOMError } from "./errors.ts";
import ProductPageElements from "./service-elements.ts";
import ProductPageMessages from "./service-messages.ts";
import type { DetailEnsemble } from "./types.d.ts";
const PageStatesSchema = Schema.Struct({
@ -48,36 +47,10 @@ class InvalidPageStateError extends Schema.TaggedErrorClass<InvalidPageStateErro
});
}
class ProductPageDOM extends Context.Service<
ProductPageDOM,
class ProductPageDOM extends Context.Service<ProductPageDOM>()(
"haikuatelier.fr/Produit/ProductPageDOM",
{
/**
* Initialise l'état initial du Bouton d'ajout au Panier.
*/
initAddToCartButtonInitialState: () => Effect.Effect<void>;
/**
* Initialise les mises à jour du Bouton d'ajout au Panier en fonction des interactions de l'Utilisateur.
*/
initAddToCartButtonUpdates: () => Effect.Effect<void>;
/**
* Initialise les interactions des Sections de la Description du Produit.
*/
initDetailInteractions: () => Effect.Effect<void, NoSuchElementError>;
/*
* Initialise la mise à jour du Prix affiché en fonction du choix de la Varation de Produit.
*/
initPriceUpdatesOnVariationChange: () => Effect.Effect<void, Error>;
/**
* Replie toutes les sections de la description du Produit.
*/
initAddToCartButtonClicks: () => unknown;
PageStates: typeof PageStatesSchema.Type;
CurrentVariation: Ref.Ref<Option.Option<ProductVariation>>;
}
>()("haikuatelier.fr/Produit/ProductPageDOM") {
static readonly layer = Layer.effect(
ProductPageDOM,
Effect.gen(function*() {
make: Effect.gen(function*() {
const {
AddToCartButton,
Details,
@ -87,6 +60,7 @@ class ProductPageDOM extends Context.Service<
VariationSelectors,
PageStatesRawJson,
} = yield* ProductPageElements;
const { AddToCartButtonText } = yield* ProductPageMessages;
const API = yield* APIClient;
const PageStates = yield* pipe(
@ -98,7 +72,7 @@ class ProductPageDOM extends Context.Service<
const CurrentProduct = yield* Ref.make(Option.none<ProductVariation>());
const onFormChangeHandler = Effect.fn("onFormChangeHandler")(function*(evt: Event) {
const formChangeHandler = Effect.fn("formChangeHandler")(function*(evt: Event) {
// La cible ne peut qu'être un Formulaire.
const target: HTMLFormElement = evt.target as HTMLFormElement;
const isClickAllowed = target.checkValidity() === false;
@ -121,7 +95,7 @@ class ProductPageDOM extends Context.Service<
);
});
const onDetailButtonClickHandler = Effect.fn("onDetailButtonClickHandler")(
const detailButtonClickHandler = Effect.fn("detailButtonClickHandler")(
function*(evt: Event) {
// Empêche la pollution de l'historique de navigation
evt.preventDefault();
@ -176,17 +150,17 @@ class ProductPageDOM extends Context.Service<
);
});
const onVariationChangeHandler = Effect.fn("onVariationChangeHandler")(function*() {
yield* Console.log("onVariationChangeHandler");
const variationChangeHandler = Effect.fn("variationChangeHandler")(function*() {
yield* Console.log("variationChangeHandler");
// Ne fais rien si le Formulaire n'est pas valide.
if (VariationChoiceForm.checkValidity() === false) {
yield* Console.debug("onVariationChangeHandler", "Le formulaire est invalide.");
yield* Console.debug("variationChangeHandler", "Le formulaire est invalide.");
return yield* Effect.void;
}
const equivalence = Schema.toEquivalence(Schema.Array(ProductVariationAttribute));
const chosenProductAttributes = yield* getChosenProductAttributesFromDOM();
yield* Console.debug("onVariationChangeHandler", "chosenProductAttributes", chosenProductAttributes);
yield* Console.debug("variationChangeHandler", "chosenProductAttributes", chosenProductAttributes);
const chosenVariation = yield* pipe(
FxArray.findFirst(
PageStates.product.variations,
@ -195,7 +169,7 @@ class ProductPageDOM extends Context.Service<
Effect.fromOption,
Effect.mapError(error => new Error("Impossible de trouver la variation demandée.", { cause: error })),
);
yield* Console.debug("onVariationChangeHandler", "chosenVariation", chosenVariation);
yield* Console.debug("variationChangeHandler", "chosenVariation", chosenVariation);
// Met à jour la valeur de la Variation choisie dans le Service.
yield* Ref.set(Option.some(chosenVariation))(CurrentProduct);
@ -207,8 +181,14 @@ class ProductPageDOM extends Context.Service<
});
// TODO: Faire une véritable gestion des erreurs.
const recoverFromBackendFailure = Effect.fn("recoverFromBackendFailure")(function*(_error: APIRequestError) {
AddToCartButton.textContent = "Error while adding the Product to the Cart...";
const recoverFromBackendFailure = Effect.fn("recoverFromBackendFailure")(function*(_error: APIError) {
AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, false);
AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, false);
// Affiche un message d'erreur sommaire à l'utilisateur puis réinitialise le texte.
yield* SubscriptionRef.set(AddToCartButtonText, "Error!");
yield* SubscriptionRef.set(AddToCartButtonText, "Add to cart").pipe(Effect.delay("5 seconds"));
return yield* Effect.void;
});
@ -241,7 +221,7 @@ class ProductPageDOM extends Context.Service<
// Désactive les interactions le temps de la requête.
AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, true);
AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, true);
lanceAnimationCycleLoading(AddToCartButton, 500);
// lanceAnimationCycleLoading(AddToCartButton, 500);
// Exécute la Requête auprès du backend.
const newCart = yield* API.AddProductToCart(PageStates.nonce, requestBody);
@ -252,9 +232,12 @@ class ProductPageDOM extends Context.Service<
AddToCartButton.toggleAttribute(ATTRIBUT_DESACTIVE, false);
AddToCartButton.toggleAttribute(ATTRIBUT_CHARGEMENT, false);
AddToCartButton.textContent = "Add to cart";
yield* SubscriptionRef.set(AddToCartButtonText, "Add to cart");
},
Effect.catchTag("APIRequestError", recoverFromBackendFailure),
Effect.catchTags({
APIResponseError: error => recoverFromBackendFailure(error),
APIRequestError: error => recoverFromBackendFailure(error),
}),
);
const initAddToCartButtonInitialState = Effect.fn("initAddToCartButtonInitialState")(function*() {
@ -278,7 +261,7 @@ class ProductPageDOM extends Context.Service<
function*(): Effect.fn.Return<void> {
return yield* pipe(
Stream.fromEventListener(VariationChoiceForm, "change"),
Stream.tap(onFormChangeHandler),
Stream.tap(formChangeHandler),
Stream.runDrain,
);
},
@ -295,7 +278,7 @@ class ProductPageDOM extends Context.Service<
const initPriceUpdatesOnVariationChange = Effect.fn("initPriceUpdatesOnVariationChange")(function*() {
return yield* pipe(
Stream.fromEventListener(VariationChoiceForm, "change"),
Stream.tap(onVariationChangeHandler),
Stream.tap(variationChangeHandler),
Stream.runDrain,
);
});
@ -306,14 +289,14 @@ class ProductPageDOM extends Context.Service<
FxArray.map(
DetailsButtons,
(button: HTMLButtonElement) =>
pipe(Stream.fromEventListener(button, "click"), Stream.tap(onDetailButtonClickHandler)),
pipe(Stream.fromEventListener(button, "click"), Stream.tap(detailButtonClickHandler)),
),
Stream.mergeAll({ concurrency: "unbounded" }),
Stream.runDrain,
);
});
return ProductPageDOM.of({
return {
CurrentVariation: CurrentProduct,
initAddToCartButtonClicks,
initAddToCartButtonInitialState,
@ -321,9 +304,11 @@ class ProductPageDOM extends Context.Service<
initDetailInteractions,
initPriceUpdatesOnVariationChange,
PageStates,
});
};
}),
);
},
) {
static readonly Live = Layer.effect(this, this.make);
}
export default ProductPageDOM;

28
web/app/themes/haiku-atelier-2024/src/scripts/page-produit/service-messages.ts Normal file
View file

@ -0,0 +1,28 @@
import { Context, Effect, Layer, pipe, Stream, SubscriptionRef } from "effect";
import ProductPageElements from "./service-elements.ts";
class ProductPageMessages extends Context.Service<ProductPageMessages>()("haikuatelier.fr/Product/Messages", {
make: Effect.gen(function*() {
const { AddToCartButton } = yield* ProductPageElements;
const AddToCartButtonText = yield* SubscriptionRef.make("Add to cart");
// const AddToCartErrorText = yield* SubscriptionRef.make<Option.Option<string>>(Option.none());
const initAddToCartButtonUpdates = Effect.fn("initAddToCartButtonUpdates")(function*() {
return yield* pipe(
SubscriptionRef.changes(AddToCartButtonText),
Stream.tap(newText => {
AddToCartButton.textContent = newText;
return Effect.succeed(newText);
}),
Stream.runDrain,
);
});
return { AddToCartButtonText, initAddToCartButtonUpdates };
}),
}) {
static readonly Live = Layer.effect(this, this.make);
}
export default ProductPageMessages;

7
web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts
View file

@ -1,12 +1,14 @@
// Scripts pour la Page Produit
import { Console, Effect } from "effect";
import { Cause, Console, Effect } from "effect";
import ProductPageRuntime from "./page-produit/runtime.ts";
import ProductPageDOM from "./page-produit/service-dom.ts";
import ProductPageMessages from "./page-produit/service-messages.ts";
document.addEventListener("DOMContentLoaded", (): void => {
Effect.gen(function*() {
const DOM = yield* ProductPageDOM;
const Messages = yield* ProductPageMessages;
const effects = Effect.all(
[
@ -15,13 +17,14 @@ document.addEventListener("DOMContentLoaded", (): void => {
DOM.initAddToCartButtonClicks(),
DOM.initDetailInteractions(),
DOM.initPriceUpdatesOnVariationChange(),
Messages.initAddToCartButtonUpdates(),
],
{
concurrency: "unbounded",
},
);
yield* effects.pipe(Effect.tapCause(Console.error));
yield* effects.pipe(Effect.tapCause(cause => Console.error(Cause.pretty(cause))));
}).pipe(ProductPageRuntime.runFork);
});