fix QR and add makefile targets

6 files changed, 11 insertions, 6 deletions

diff --git a/build-system/Makefile b/build-system/Makefile
index 7702683..0ed2e0b 100644
--- a/build-system/Makefile
+++ b/build-system/Makefile
@@ -56,10 +56,14 @@ dev: compile
 serve: build
 	pnpm run --filter merchant-backoffice serve
 
-.PHONY: dev-ui
-dev-ui: compile
+.PHONY: dev-backoffice-ui
+dev-backoffice-ui: compile
 	pnpm run --filter merchant-backoffice storybook
 
+.PHONY: dev-backend-ui
+dev-backend-ui: compile
+	pnpm run --filter merchant-backend storybook
+
 .PHONY: lint
 lint:
 	pnpm run lint
diff --git a/packages/backend/src/components/QR.tsx b/packages/backend/src/components/QR.tsx
index 4418f1c..29c9920 100644
--- a/packages/backend/src/components/QR.tsx
+++ b/packages/backend/src/components/QR.tsx
@@ -24,6 +24,7 @@ export function createSVG(text:string):string {
   qr.make();
   return qr.createSvgTag({
     scalable: true,
+    margin: 0
   });
 }
 
diff --git a/packages/backend/src/pages/OfferRefund.stories.tsx b/packages/backend/src/pages/OfferRefund.stories.tsx
index ce358b4..92694f8 100644
--- a/packages/backend/src/pages/OfferRefund.stories.tsx
+++ b/packages/backend/src/pages/OfferRefund.stories.tsx
@@ -37,7 +37,7 @@ function createExample<Props>(Component: FunctionalComponent<Props>, props: Part
   return r
 }
 
-const REFUND_URI_EXAMPLE = 'taler+http://refund/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0'
+const REFUND_URI_EXAMPLE = 'taler://pay/backend.demo.taler.net/instances/blog/2021.249-022NW2KG88QGA/def537eb-00c2-4a8b-8a17-0be034d118d3?c=2Y4N4PMST7KYAPS83428GTPCD4'
 
 export const Example = createExample(TestedComponent, {
   refundURI: REFUND_URI_EXAMPLE,
diff --git a/packages/backend/src/pages/OfferRefund.tsx b/packages/backend/src/pages/OfferRefund.tsx
index 0d71e88..47bbb8e 100644
--- a/packages/backend/src/pages/OfferRefund.tsx
+++ b/packages/backend/src/pages/OfferRefund.tsx
@@ -108,7 +108,7 @@ export function OfferRefund({ refundURI, qr_code, order_status_url }: Props): VN
         <p>
           Scan this QR code with your Taler mobile wallet:
         </p>
-        <div class="qr" dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_refund_qrcode_svg }}}` }} />
+        <div class="qr" style={{width:'100mm'}} dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_refund_qrcode_svg }}}` }} />
         <p>
           <a class="pure-button pure-button-active success" href={refundURI ? refundURI : `{{ taler_refund_uri }}`}>
             Or open your Taller wallet
diff --git a/packages/backend/src/pages/OfferTip.tsx b/packages/backend/src/pages/OfferTip.tsx
index 8fc3805..186449a 100644
--- a/packages/backend/src/pages/OfferTip.tsx
+++ b/packages/backend/src/pages/OfferTip.tsx
@@ -103,7 +103,7 @@ export function OfferTip({ tipURI, qr_code, tip_status_url }: Props): VNode {
         <p>
           Scan this QR code with your Taler mobile wallet:
         </p>
-        <div class="qr" dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_tip_qrcode_svg }}}` }} />
+        <div class="qr" style={{width:'100mm'}} dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_tip_qrcode_svg }}}` }} />
         <p>
           <a class="pure-button pure-button-active success" href={tipURI ? tipURI : `{{ taler_tip_uri }}`}>
             Or open your Taller wallet
diff --git a/packages/backend/src/pages/RequestPayment.tsx b/packages/backend/src/pages/RequestPayment.tsx
index d171a75..c43c6db 100644
--- a/packages/backend/src/pages/RequestPayment.tsx
+++ b/packages/backend/src/pages/RequestPayment.tsx
@@ -135,7 +135,7 @@ export function RequestPayment({ payURI, qr_code, order_status_url }: Props): VN
         <p>
           Scan this QR code with your mobile wallet:
         </p>
-        <div class="qr" dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_pay_qrcode_svg }}}` }} />
+        <div class="qr" style={{width:'100mm'}} dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_pay_qrcode_svg }}}` }} />
         <p>
           <a class="pure-button pure-button-active success" href={payURI ? payURI : `{{ taler_pay_uri }}`}>
             Or open your Taller wallet