Magento

deco.ts

@@ -37,6 +37,7 @@ const config = {
     app("linx"),
     app("linx-impulse"),
     app("shopify"),
+    app("magento"),
     app("nuvemshop"),
     app("website"),
     app("commerce"),

decohub/apps/magento.ts

@@ -0,0 +1,19 @@
+import { AppRuntime } from "deco/mod.ts";
+import { Markdown } from "../components/Markdown.tsx";
+import { PreviewMagento } from "../../magento/preview/Preview.tsx";
+
+export { default } from "../../magento/mod.ts";
+
+export const preview = async (props: AppRuntime) => {
+  const markdownContent = await Markdown(
+    new URL("../../magento/README.md", import.meta.url).href,
+  );
+
+  return {
+    Component: PreviewMagento,
+    props: {
+      ...props,
+      markdownContent,
+    },
+  };
+};

decohub/manifest.gen.ts

@@ -15,23 +15,24 @@ import * as $$$$$$$$$$$9 from "./apps/implementation.ts";
 import * as $$$$$$$$$$$10 from "./apps/konfidency.ts";
 import * as $$$$$$$$$$$11 from "./apps/linx-impulse.ts";
 import * as $$$$$$$$$$$12 from "./apps/linx.ts";
-import * as $$$$$$$$$$$13 from "./apps/mailchimp.ts";
-import * as $$$$$$$$$$$14 from "./apps/nuvemshop.ts";
-import * as $$$$$$$$$$$15 from "./apps/posthog.ts";
-import * as $$$$$$$$$$$16 from "./apps/power-reviews.ts";
-import * as $$$$$$$$$$$17 from "./apps/ra-trustvox.ts";
-import * as $$$$$$$$$$$18 from "./apps/resend.ts";
-import * as $$$$$$$$$$$19 from "./apps/shopify.ts";
-import * as $$$$$$$$$$$20 from "./apps/smarthint.ts";
-import * as $$$$$$$$$$$21 from "./apps/sourei.ts";
-import * as $$$$$$$$$$$22 from "./apps/typesense.ts";
-import * as $$$$$$$$$$$23 from "./apps/verified-reviews.ts";
-import * as $$$$$$$$$$$24 from "./apps/vnda.ts";
-import * as $$$$$$$$$$$25 from "./apps/vtex.ts";
-import * as $$$$$$$$$$$26 from "./apps/wake.ts";
-import * as $$$$$$$$$$$27 from "./apps/wap.ts";
-import * as $$$$$$$$$$$28 from "./apps/weather.ts";
-import * as $$$$$$$$$$$29 from "./apps/workflows.ts";
+import * as $$$$$$$$$$$13 from "./apps/magento.ts";
+import * as $$$$$$$$$$$14 from "./apps/mailchimp.ts";
+import * as $$$$$$$$$$$15 from "./apps/nuvemshop.ts";
+import * as $$$$$$$$$$$16 from "./apps/posthog.ts";
+import * as $$$$$$$$$$$17 from "./apps/power-reviews.ts";
+import * as $$$$$$$$$$$18 from "./apps/ra-trustvox.ts";
+import * as $$$$$$$$$$$19 from "./apps/resend.ts";
+import * as $$$$$$$$$$$20 from "./apps/shopify.ts";
+import * as $$$$$$$$$$$21 from "./apps/smarthint.ts";
+import * as $$$$$$$$$$$22 from "./apps/sourei.ts";
+import * as $$$$$$$$$$$23 from "./apps/typesense.ts";
+import * as $$$$$$$$$$$24 from "./apps/verified-reviews.ts";
+import * as $$$$$$$$$$$25 from "./apps/vnda.ts";
+import * as $$$$$$$$$$$26 from "./apps/vtex.ts";
+import * as $$$$$$$$$$$27 from "./apps/wake.ts";
+import * as $$$$$$$$$$$28 from "./apps/wap.ts";
+import * as $$$$$$$$$$$29 from "./apps/weather.ts";
+import * as $$$$$$$$$$$30 from "./apps/workflows.ts";
 
 const manifest = {
   "apps": {
@@ -48,23 +49,24 @@ const manifest = {
     "decohub/apps/konfidency.ts": $$$$$$$$$$$10,
     "decohub/apps/linx-impulse.ts": $$$$$$$$$$$11,
     "decohub/apps/linx.ts": $$$$$$$$$$$12,
-    "decohub/apps/mailchimp.ts": $$$$$$$$$$$13,
-    "decohub/apps/nuvemshop.ts": $$$$$$$$$$$14,
-    "decohub/apps/posthog.ts": $$$$$$$$$$$15,
-    "decohub/apps/power-reviews.ts": $$$$$$$$$$$16,
-    "decohub/apps/ra-trustvox.ts": $$$$$$$$$$$17,
-    "decohub/apps/resend.ts": $$$$$$$$$$$18,
-    "decohub/apps/shopify.ts": $$$$$$$$$$$19,
-    "decohub/apps/smarthint.ts": $$$$$$$$$$$20,
-    "decohub/apps/sourei.ts": $$$$$$$$$$$21,
-    "decohub/apps/typesense.ts": $$$$$$$$$$$22,
-    "decohub/apps/verified-reviews.ts": $$$$$$$$$$$23,
-    "decohub/apps/vnda.ts": $$$$$$$$$$$24,
-    "decohub/apps/vtex.ts": $$$$$$$$$$$25,
-    "decohub/apps/wake.ts": $$$$$$$$$$$26,
-    "decohub/apps/wap.ts": $$$$$$$$$$$27,
-    "decohub/apps/weather.ts": $$$$$$$$$$$28,
-    "decohub/apps/workflows.ts": $$$$$$$$$$$29,
+    "decohub/apps/magento.ts": $$$$$$$$$$$13,
+    "decohub/apps/mailchimp.ts": $$$$$$$$$$$14,
+    "decohub/apps/nuvemshop.ts": $$$$$$$$$$$15,
+    "decohub/apps/posthog.ts": $$$$$$$$$$$16,
+    "decohub/apps/power-reviews.ts": $$$$$$$$$$$17,
+    "decohub/apps/ra-trustvox.ts": $$$$$$$$$$$18,
+    "decohub/apps/resend.ts": $$$$$$$$$$$19,
+    "decohub/apps/shopify.ts": $$$$$$$$$$$20,
+    "decohub/apps/smarthint.ts": $$$$$$$$$$$21,
+    "decohub/apps/sourei.ts": $$$$$$$$$$$22,
+    "decohub/apps/typesense.ts": $$$$$$$$$$$23,
+    "decohub/apps/verified-reviews.ts": $$$$$$$$$$$24,
+    "decohub/apps/vnda.ts": $$$$$$$$$$$25,
+    "decohub/apps/vtex.ts": $$$$$$$$$$$26,
+    "decohub/apps/wake.ts": $$$$$$$$$$$27,
+    "decohub/apps/wap.ts": $$$$$$$$$$$28,
+    "decohub/apps/weather.ts": $$$$$$$$$$$29,
+    "decohub/apps/workflows.ts": $$$$$$$$$$$30,
   },
   "name": "decohub",
   "baseUrl": import.meta.url,

magento/README.md

@@ -0,0 +1,48 @@
+<h1>
+  <p align="center">
+    <a href="https://developer.adobe.com/commerce/docs/">
+      Magento Platform Ecommerce Solution
+    </a>
+  </p>
+</h1>
+
+<p align="center">
+  <strong>
+    Start and grow your e-commerce business
+  </strong>
+</p>
+<p align="justify">
+  Loaders, actions and workflows for adding Magento Commerce Platform to your deco.cx website.
+</p>
+
+<p align="justify">
+Magento, by Adobe, is a PHP-based eCommerce platform offering robust customization and scalability. It features extensive API integrations and flexible product and order management. Magento supports multiple languages and currencies.
+</p>
+
+# Installation
+
+- Install via decohub
+- Fill the necessary fields
+- Only fill the "dangerously" fields (located on "Features" section) if you REALLY SURE about what are you doing. 
+
+# Settings in Magento
+
+<p align="center"><strong>To ensure the proper functioning of the loaders, follow this instructions in Magento Admin:</strong></p>
+
+<h3><a href="https://developer.adobe.com/commerce/webapi/graphql/schema/products/queries/products/">Products Query (GraphQL)</a></h3>
+
+- Enable "<strong>Use in Search</strong>", at least, on the following attributes: <a href="https://github.com/magento/magento2/issues/27518">See more</a>
+<ul>
+  <li><strong>url_key</strong></li>
+  <li><strong>sku</strong></li>
+  <li><strong>category_uid</strong></li>
+  <li><strong>category_id</strong></li>
+</ul>
+
+- Enable "<strong>Used in Sorting in Product Listing</strong>" on the "<strong>Custom Filters</strong>" attributes. <a href="https://developer.adobe.com/commerce/webapi/graphql/schema/products/queries/products/#sort-attribute">See more</a>
+
+<h3><a href="https://developer.adobe.com/commerce/webapi/graphql/schema/products/queries/categories/">Categories Query (GraphQL)</a></h3>
+
+- Enable "<strong>Use in Search</strong>" on the "<strong>url_key</strong>" attribute. <a href="https://github.com/magento/magento2/issues/27518">See more</a>
+
+<p align="center">🎉 Your Magento setup is complete.</p>

magento/actions/amasty/submitReview.ts

@@ -0,0 +1,57 @@
+import { AppContext } from "../../mod.ts";
+import { SubmitReviewAmastyAPI } from "../../utils/client/types.ts";
+import { Ratings as RatingsAPI } from "../../utils/client/types.ts";
+
+export interface Props {
+  /**
+   * @title Path of the REST API
+   * @description The partial path of the API. ex: /all/V1/custom/review
+   */
+  path: string;
+  product_id: number;
+  customer_id: number;
+  nickname: string;
+  title: string;
+  detail: string;
+  ratings: Array<Ratings>;
+}
+
+interface Ratings {
+  key: string;
+  value: string;
+}
+
+/**
+ * @title Magento Integration - Submit review
+ * @description Submit review action
+ */
+const loader = async (
+  props: Props,
+  _req: Request,
+  ctx: AppContext,
+): Promise<SubmitReviewAmastyAPI> => {
+  const { clientAdmin } = ctx;
+  const ratings = props.ratings.reduce<RatingsAPI>((acc, rating) => {
+    acc[`${rating.key}`] = rating.value;
+    return acc;
+  }, {});
+
+  return await clientAdmin["POST /rest/:reviewUrl"](
+    {
+      reviewUrl: props.path.replace(/^\/?(rest\/)?/, ""),
+    },
+    {
+      body: {
+        product_id: props.product_id,
+        customer_id: props.customer_id,
+        nickname: props.nickname,
+        title: props.title,
+        detail: props.detail,
+        ratings,
+        store_id: `${ctx.storeId}`,
+      },
+    },
+  ).then((r) => r.json());
+};
+
+export default loader;

magento/actions/cart/addCoupon.ts

@@ -0,0 +1,50 @@
+import { Cart } from "../../loaders/cart.ts";
+import type { AppContext } from "../../mod.ts";
+import { getCartCookie, handleCartActions } from "../../utils/cart.ts";
+import { OverrideFeatures } from "../../utils/client/types.ts";
+
+export interface Props extends OverrideFeatures {
+  couponCode: string;
+}
+
+interface ErrorAddCoupon {
+  message: string;
+  status: number;
+}
+
+/**
+ * @title Magento Integration - Add coupon
+ * @description Add coupon action
+ */
+const action = async (
+  props: Props,
+  req: Request,
+  ctx: AppContext,
+): Promise<Cart | ErrorAddCoupon | null> => {
+  const { couponCode, dangerouslyOverrideReturnNull } = props;
+  const { clientAdmin, features } = ctx;
+  const dontReturnCart = dangerouslyOverrideReturnNull ??
+    features.dangerouslyReturnNullAfterAction;
+
+  const cartId = getCartCookie(req.headers);
+  try {
+    await clientAdmin["PUT /rest/:site/V1/carts/:cartId/coupons/:couponCode"]({
+      cartId,
+      site: ctx.site,
+      couponCode: couponCode,
+    });
+  } catch (error) {
+    console.error(error);
+    return handleCartActions(dontReturnCart, {
+      req,
+      ctx,
+      error,
+    });
+  }
+
+  return handleCartActions(dontReturnCart, {
+    req,
+    ctx,
+  });
+};
+export default action;

magento/actions/cart/addItem.ts

@@ -0,0 +1,108 @@
+import { getCookies, setCookie } from "std/http/cookie.ts";
+import { Cart } from "../../loaders/cart.ts";
+import { parseCookieString } from "../../middleware.ts";
+import type { AppContext } from "../../mod.ts";
+import { handleCartActions } from "../../utils/cart.ts";
+import { FORM_KEY_COOKIE } from "../../utils/constants.ts";
+import { HttpError } from "../../../utils/http.ts";
+import { OverrideFeatures } from "../../utils/client/types.ts";
+
+export interface Props extends OverrideFeatures {
+  qty: number;
+  sku: string;
+  productId: string;
+}
+
+/**
+ * @title Magento Integration - Add item to cart
+ * @description Add item action
+ */
+const action = async (
+  props: Props,
+  req: Request,
+  ctx: AppContext,
+): Promise<Cart | null> => {
+  const { qty, productId, dangerouslyOverrideReturnNull } = props;
+  const { headers, url } = req;
+  const { site, baseUrl, features } = ctx;
+  const dontReturnCart = dangerouslyOverrideReturnNull ??
+    features.dangerouslyReturnNullAfterAction;
+
+  const formKey = getCookies(headers)[FORM_KEY_COOKIE] ?? "";
+
+  const newHeaders = new Headers();
+
+  const requestCookies = headers.get("Cookie");
+
+  if (requestCookies) {
+    newHeaders.append("Cookie", requestCookies);
+  }
+  newHeaders.append("Origin", baseUrl);
+  newHeaders.append("Referer", url);
+  newHeaders.append("X-Requested-With", "XMLHttpRequest");
+  newHeaders.append("Content-Type", "application/x-www-form-urlencoded");
+
+  const urlencoded = new URLSearchParams();
+  urlencoded.append("product", productId);
+  urlencoded.append("form_key", formKey);
+  urlencoded.append("qty", String(qty));
+
+  try {
+    const fetchResult = await fetch(
+      `${baseUrl}/${site}/checkout/cart/add/uenc/${
+        btoa(baseUrl).replace(/=/g, "~")
+      }/product/${productId}`,
+      {
+        method: "POST",
+        headers: newHeaders,
+        body: urlencoded,
+      },
+    );
+
+    if (fetchResult.status != 200) {
+      throw new HttpError(
+        fetchResult.status,
+        JSON.stringify({ message: fetchResult.statusText }),
+      );
+    }
+    const fetchHeaders = fetchResult.headers;
+
+    let cartId;
+    const cookies = fetchHeaders.getSetCookie();
+    cookies.forEach((cookie) => {
+      const parsed = parseCookieString(cookie, url.includes("localhost"));
+
+      if (parsed.name === "dataservices_cart_id") {
+        cartId = parsed.value.replace(/%22/g, "");
+        setCookie(ctx.response.headers, {
+          ...parsed,
+          httpOnly: true,
+          secure: true,
+          path: "/",
+          unparsed: ["Priority=High"],
+        });
+        return;
+      }
+
+      setCookie(ctx.response.headers, {
+        ...parsed,
+        path: "/",
+      });
+    });
+
+    return handleCartActions(dontReturnCart, {
+      req,
+      ctx,
+      cartId,
+    });
+  } catch (error) {
+    console.error(error);
+    return handleCartActions(dontReturnCart, {
+      req,
+      ctx,
+      error,
+    });
+  }
+};
+
+export default action;