7 files changed, 50 insertions, 49 deletions
diff --git a/packages/merchant-backend-ui/README.md b/packages/merchant-backend-ui/README.md
index 44a555ae0..34cf3210a 100644
--- a/packages/merchant-backend-ui/README.md
+++ b/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
diff --git a/packages/merchant-backend-ui/package.json b/packages/merchant-backend-ui/package.json
index b4a886f7b..4789b96e9 100644
--- a/packages/merchant-backend-ui/package.json
+++ b/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"
   }
 }
diff --git a/packages/merchant-backend-ui/render-examples.ts b/packages/merchant-backend-ui/render-examples.ts
index 47300ab8f..86e18fa68 100644
--- a/packages/merchant-backend-ui/render-examples.ts
+++ b/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]
diff --git a/packages/merchant-backend-ui/rollup.config.js b/packages/merchant-backend-ui/rollup.config.js
index 8953a443a..5f22cc654 100644
--- a/packages/merchant-backend-ui/rollup.config.js
+++ b/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 [
diff --git a/packages/merchant-backend-ui/src/index.tsx b/packages/merchant-backend-ui/src/index.tsx
index 275f63371..4cfe8f7b4 100644
--- a/packages/merchant-backend-ui/src/index.tsx
+++ b/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 { BackendContextProvider } from './context/backend';
-import { TranslationProvider } from './context/translation';
+import { Fragment, h, VNode } from "preact";
+import { BackendContextProvider } from "./context/backend";
+import { TranslationProvider } from "./context/translation";
 // import { Page as RequestPayment } from './RequestPayment';
-import "./css/pure-min.css"
-import { Route, Router } from 'preact-router';
-import { Footer } from './components/Footer';
-// 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';
+import { Route, Router } from "preact-router";
+import { Footer } from "./components/Footer";
+import "./css/pure-min.css";
 
 export default function Application(): VNode {
   return (
@@ -45,17 +40,12 @@ export default function Application(): VNode {
 }
 
 function ApplicationStatusRoutes(): VNode {
-  return <Fragment>
-    <Router>
-      {/* <Route path="offer_tip" component={OfferTip} />
-      <Route path="offer_refund" component={OfferRefund} />
-      <Route path="depleted_tip" component={DepletedTip} />
-      <Route path="request_payment" component={RequestPayment} />
-      <Route path="show_order_details" component={ShowOrderDetails} /> */}
-      <Route default component={() => <div>
-        hello!
-      </div>} />
-    </Router>
-    <Footer />
-  </Fragment>
+  return (
+    <Fragment>
+      <Router>
+        <Route default component={() => <div>hello!</div>} />
+      </Router>
+      <Footer />
+    </Fragment>
+  );
 }
diff --git a/packages/merchant-backend-ui/src/pages/DeletedTip.stories.tsx b/packages/merchant-backend-ui/src/pages/DeletedTip.stories.tsx
index c20f6dc18..a249c4074 100644
--- a/packages/merchant-backend-ui/src/pages/DeletedTip.stories.tsx
+++ b/packages/merchant-backend-ui/src/pages/DeletedTip.stories.tsx
@@ -15,26 +15,26 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import { h, VNode, FunctionalComponent } from 'preact';
-import { DepletedTip as TestedComponent } from './DepletedTip';
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
+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>) {
-  const r = (args: any) => <Component {...args} />
-  r.args = props
-  return r
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>,
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
 }
 
-export const Example = createExample(TestedComponent, {
-});
+export const Example = createExample(TestedComponent, {});
diff --git a/packages/merchant-backend-ui/src/pages/DeletedTip.tsx b/packages/merchant-backend-ui/src/pages/DeletedTip.tsx
index 61fc52cdf..10f3c6a17 100644
--- a/packages/merchant-backend-ui/src/pages/DeletedTip.tsx
+++ b/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 />),
   };
 }