Merge pull request #14 from Kazuki-tam/feature/img_url-filter

Feature/img url filter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-email-notification",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "shopify-email-notification is a template repository for email notifications.",
   "author": "Kazuki Yonemoto (https://dev.to/tim_yone)",
   "license": "MIT",

server/app.ts

@@ -9,9 +9,11 @@ import { paymentIconPngUrl } from './filters/paymentIconPngUrl';
 import { money } from './filters/money';
 import { moneyWithCurrency } from './filters/moneyWithCurrency';
 import { moneyWithoutTrailingZeros } from './filters/moneyWithoutTrailingZeros';
+import { imgUrl } from './filters/imgUrl';
 import { shopCurrency, shopLocale } from './constants/shopEnv';
 
 import type { Address } from './types/address';
+import type { ProductType } from './types/product';
 
 const app: express.Express = express();
 
@@ -50,6 +52,7 @@ engine.registerFilter('format_address', (address: Address) =>
 engine.registerFilter('shopify_asset_url', (url: string) =>
   shopifyAssetUrl(url),
 );
+engine.registerFilter('img_url', (item: ProductType | string) => imgUrl(item));
 engine.registerFilter('cdn_asset_url', (url: string) => cdnAssetUrl(url));
 engine.registerFilter('payment_icon_png_url', (payment: string) =>
   paymentIconPngUrl(payment),

server/constants/emailEnv.ts

@@ -1,6 +1,6 @@
 const ItemArray = [
   {
-    // image: "",
+    image: '/assets/product/product_cropped_img.jpg',
     product: {
       title: 'Aviator sunglasses',
     },
@@ -14,7 +14,7 @@ const ItemArray = [
     title: 'Aviator sunglasses',
   },
   {
-    // image: "",
+    // image: "https://cdn.shopify.com/s/files/*.jpg",
     product: {
       title: 'Mid-century lounger ',
     },
@@ -245,4 +245,4 @@ const emailEnv = {
   },
 };
 
-export { emailEnv };
+export { emailEnv, ItemArray };

server/filters/__tests__/imgUrl.test.ts

@@ -0,0 +1,30 @@
+import { imgUrl } from '../imgUrl';
+
+const productItem = {
+  image: '/assets/product/product_cropped_img.jpg',
+  product: {
+    title: 'Aviator sunglasses',
+  },
+  quantity: 1,
+  refunded_quantity: 0,
+  original_line_price: 200,
+  original_price: 200,
+  final_line_price: 200,
+  final_price: 200,
+  line_price: 200,
+  title: 'Aviator sunglasses',
+};
+
+/**
+ * Shopify img_url filter test
+ */
+
+test('Generates Image URL from a character string', () => {
+  expect(imgUrl('/assets/product/product_cropped_img.jpg')).toBe(
+    '/assets/product/product_cropped_img.jpg',
+  );
+});
+
+test('Generates Image URL from a product object', () => {
+  expect(imgUrl(productItem)).toBe('/assets/product/product_cropped_img.jpg');
+});

server/filters/imgUrl.ts

@@ -0,0 +1,21 @@
+import type { ProductType } from '@/types/product';
+
+/**
+ * img_url filter
+ * @param { ProductType } productItem - Target url or Object
+ * @returns { string } - Formatted url
+ * https://shopify.dev/api/liquid/filters/img_url
+ */
+
+const imgUrl = (productItem: ProductType | string): string | undefined => {
+  let url;
+  if (typeof productItem === 'object') {
+    url = productItem.image;
+  }
+  if (typeof productItem === 'string') {
+    url = productItem;
+  }
+  return url;
+};
+
+export { imgUrl };

server/types/product.d.ts

@@ -0,0 +1,16 @@
+type ProductType = {
+  image: string;
+  product: {
+    title: string;
+  };
+  quantity: number;
+  refunded_quantity: number;
+  original_line_price: number;
+  original_price: number;
+  final_line_price: number;
+  final_price: number;
+  line_price: number;
+  title: string;
+};
+
+export { ProductType };