fix deleted tip name and format name as merchant backend expected

packages/merchant-backend-ui/README.md

@@ -4,7 +4,7 @@ Merchant Backend pages
 
 This project generate 5 templates for the merchant backend:
 
- * DepletedTip
+ * DeletedTip
  * OfferRefund
  * OfferTip
  * RequestPayment

packages/merchant-backend-ui/package.json

@@ -86,6 +86,7 @@
     "rollup-plugin-css-only": "^3.1.0",
     "script-ext-html-webpack-plugin": "^2.1.5",
     "sirv-cli": "^1.0.11",
+    "tslib": "2.4.0",
     "typescript": "4.8.4"
   }
 }

packages/merchant-backend-ui/render-examples.ts

@@ -49,9 +49,13 @@ files.forEach(file => {
 	const html = fs.readFileSync(`${sourceDirectory}/${file}`, 'utf8')
 
 	const testName = file.replace('.html', '')
-	if (testName !== 'ShowOrderDetails') return;
+	const exampleFileName = `./src/pages/${testName}.examples`
+	if (!fs.existsSync(exampleFileName + ".ts")) { 
+	  console.log(`skipping ${testName}: no examples found`);
+	  return;
+	}
 	// eslint-disable-next-line @typescript-eslint/no-var-requires
-	const { exampleData } = require(`./src/pages/${testName}.examples`)
+	const { exampleData } = require(exampleFileName)
 
 	Object.keys(exampleData).forEach(exampleName => {
 		const example = exampleData[exampleName]

packages/merchant-backend-ui/rollup.config.js

@@ -89,6 +89,12 @@ const makePlugins = (name) => [
   html({ template, fileName: name }),
 ];
 
+function formatHtmlName(name) {
+  return name
+    .replace(/^[A-Z]/, letter => `${letter.toLowerCase()}`) //first letter lowercase
+    .replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`) //snake case
+    .concat(".en.html"); //extension
+}
 
 const pageDefinition = (name) => ({
   input: `src/pages/${name}.tsx`,
@@ -98,7 +104,7 @@ const pageDefinition = (name) => ({
     exports: 'named',
     name: 'page',
   },
-  plugins: makePlugins(`${name}.html`),
+  plugins: makePlugins(formatHtmlName(name)),
 });
 
 export default [

packages/merchant-backend-ui/src/index.tsx

@@ -15,22 +15,17 @@
  */
 
 /**
-*
+ *
-* @author Sebastian Javier Marchano (sebasjm)
+ * @author Sebastian Javier Marchano (sebasjm)
-*/
+ */
 
-import { h, VNode, Fragment } from 'preact';
+import { Fragment, h, VNode } from "preact";
-import { BackendContextProvider } from './context/backend';
+import { BackendContextProvider } from "./context/backend";
-import { TranslationProvider } from './context/translation';
+import { TranslationProvider } from "./context/translation";
 // import { Page as RequestPayment } from './RequestPayment';
-import "./css/pure-min.css"
+import { Route, Router } from "preact-router";
-import { Route, Router } from 'preact-router';
+import { Footer } from "./components/Footer";
-import { Footer } from './components/Footer';
+import "./css/pure-min.css";
-// import OfferTip from './pages/OfferTip';
-// import {OfferRefund} from './pages/OfferRefund';
-// import DepletedTip from './pages/DepletedTip';
-// import RequestPayment from './pages/RequestPayment';
-// import ShowOrderDetails from './pages/ShowOrderDetails';
 
 export default function Application(): VNode {
   return (
@@ -45,17 +40,12 @@ export default function Application(): VNode {
 }
 
 function ApplicationStatusRoutes(): VNode {
-  return <Fragment>
+  return (
-    <Router>
+    <Fragment>
-      {/* <Route path="offer_tip" component={OfferTip} />
+      <Router>
-      <Route path="offer_refund" component={OfferRefund} />
+        <Route default component={() => <div>hello!</div>} />
-      <Route path="depleted_tip" component={DepletedTip} />
+      </Router>
-      <Route path="request_payment" component={RequestPayment} />
+      <Footer />
-      <Route path="show_order_details" component={ShowOrderDetails} /> */}
+    </Fragment>
-      <Route default component={() => <div>
+  );
-        hello!
-      </div>} />
-    </Router>
-    <Footer />
-  </Fragment>
 }

packages/merchant-backend-ui/src/pages/DeletedTip.stories.tsx

@@ -15,26 +15,26 @@
  */
 
 /**
-*
+ *
-* @author Sebastian Javier Marchano (sebasjm)
+ * @author Sebastian Javier Marchano (sebasjm)
-*/
+ */
-
-import { h, VNode, FunctionalComponent } from 'preact';
-import { DepletedTip as TestedComponent } from './DepletedTip';
 
+import { h, VNode, FunctionalComponent } from "preact";
+import { DeletedTip as TestedComponent } from "./DeletedTip";
 
 export default {
-  title: 'DepletedTip',
+  title: "DeletedTip",
   component: TestedComponent,
-  argTypes: {
+  argTypes: {},
-  },
 };
 
-function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
+function createExample<Props>(
-  const r = (args: any) => <Component {...args} />
+  Component: FunctionalComponent<Props>,
-  r.args = props
+  props: Partial<Props>,
-  return r
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
 }
 
-export const Example = createExample(TestedComponent, {
+export const Example = createExample(TestedComponent, {});
-});

packages/merchant-backend-ui/src/pages/DeletedTip.tsx

@@ -29,7 +29,7 @@ function Head(): VNode {
   return <title>Status of your tip</title>;
 }
 
-export function DepletedTip(): VNode {
+export function DeletedTip(): VNode {
   return (
     <Page>
       <section>
@@ -43,7 +43,7 @@ export function DepletedTip(): VNode {
 
 export function mount(): void {
   try {
-    render(<DepletedTip />, document.body);
+    render(<DeletedTip />, document.body);
   } catch (e) {
     console.error("got error", e);
     if (e instanceof Error) {
@@ -55,6 +55,6 @@ export function mount(): void {
 export function buildTimeRendering(): { head: string; body: string } {
   return {
     head: renderToString(<Head />),
-    body: renderToString(<DepletedTip />),
+    body: renderToString(<DeletedTip />),
   };
 }

pnpm-lock.yaml

@@ -219,6 +219,7 @@ importers:
       script-ext-html-webpack-plugin: ^2.1.5
       sirv-cli: ^1.0.11
       swr: ^0.5.5
+      tslib: 2.4.0
       typescript: 4.8.4
       yup: ^0.32.9
     dependencies:
@@ -249,7 +250,7 @@ importers:
       '@rollup/plugin-image': 2.1.1_rollup@2.79.1
       '@rollup/plugin-json': 4.1.0_rollup@2.79.1
       '@rollup/plugin-replace': 3.1.0_rollup@2.79.1
-      '@rollup/plugin-typescript': 11.0.0_gypgyaqhine6mwjfvh7icfhviq
+      '@rollup/plugin-typescript': 11.0.0_hafrwlgfjmvsm7253l3bfjzhnq
       '@types/history': 4.7.11
       '@types/mocha': 8.2.3
       '@types/mustache': 4.2.1
@@ -269,6 +270,7 @@ importers:
       rollup-plugin-css-only: 3.1.0_rollup@2.79.1
       script-ext-html-webpack-plugin: 2.1.5
       sirv-cli: 1.0.14
+      tslib: 2.4.0
       typescript: 4.8.4
 
   packages/merchant-backoffice-ui:
@@ -3644,7 +3646,7 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@rollup/plugin-typescript/11.0.0_gypgyaqhine6mwjfvh7icfhviq:
+  /@rollup/plugin-typescript/11.0.0_hafrwlgfjmvsm7253l3bfjzhnq:
     resolution: {integrity: sha512-goPyCWBiimk1iJgSTgsehFD5OOFHiAknrRJjqFCudcW8JtWiBlK284Xnn4flqMqg6YAjVG/EE+3aVzrL5qNSzQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -3660,6 +3662,7 @@ packages:
       '@rollup/pluginutils': 5.0.2_rollup@2.79.1
       resolve: 1.22.1
       rollup: 2.79.1
+      tslib: 2.4.0
       typescript: 4.8.4
     dev: true