Rename orderid to lowercase

This caused issues when passing the URL parameter from Drupal into the `Reader` app.

src/apps/reader/Reader.entry.tsx

@@ -4,8 +4,8 @@ import { withUrls } from "../../core/utils/url";
 import { withText } from "../../core/utils/text";
 import Reader, { ReaderType } from "../../components/reader-player/Reader";
 
-const ReaderEntry: React.FC<ReaderType> = ({ identifier, orderId }) => {
-  return <Reader identifier={identifier} orderId={orderId} />;
+const ReaderEntry: React.FC<ReaderType> = ({ identifier, orderid }) => {
+  return <Reader identifier={identifier} orderid={orderid} />;
 };
 
 export default withConfig(withUrls(withText(ReaderEntry)));

src/components/reader-player/Reader.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof Reader> = {
     identifier: {
       control: { type: "text" }
     },
-    orderId: {
+    orderid: {
       control: { type: "text" }
     }
   }
@@ -25,5 +25,5 @@ export const WithIdentifier: Story = {
 
 // Works only if the matrial is reserved
 export const WithOrderId: Story = {
-  render: () => <Reader orderId="97cb3a6f-e23b-41ad-97ca-e939541feba7" />
+  render: () => <Reader orderid="97cb3a6f-e23b-41ad-97ca-e939541feba7" />
 };

src/components/reader-player/Reader.tsx

@@ -3,29 +3,30 @@ import { appendAsset, readerAssets, removeAppendedAssets } from "./helper";
 
 export type ReaderType = {
   identifier?: string;
-  orderId?: string;
+  // orderid must be in lowercase bacause its comes from the url / Drupal
+  orderid?: string;
 };
 
-const Reader: React.FC<ReaderType> = ({ identifier, orderId }: ReaderType) => {
+const Reader: React.FC<ReaderType> = ({ identifier, orderid }: ReaderType) => {
   useEffect(() => {
     readerAssets.forEach(appendAsset);
 
     return () => {
       removeAppendedAssets();
     };
-  }, [identifier, orderId]);
+  }, [identifier, orderid]);
 
   const readerStyles: CSSProperties = {
     height: "100vh"
   };
 
-  if (orderId) {
+  if (orderid) {
     return (
       <div
         style={readerStyles}
         id="pubhub-reader"
         // eslint-disable-next-line react/no-unknown-property
-        order-id={orderId}
+        order-id={orderid}
         // eslint-disable-next-line react/no-unknown-property, no-script-url
         close-href="javascript:window.history.back()"
       />
@@ -48,7 +49,7 @@ const Reader: React.FC<ReaderType> = ({ identifier, orderId }: ReaderType) => {
   }
 
   // eslint-disable-next-line no-console
-  console.warn("No identifier or orderId provided for the Reader app.");
+  console.warn("No identifier or orderid provided for the Reader app.");
   return null;
 };