Further dive into decomposing

docs/examples/01. Decomposing UI Components/samples/01.js

@@ -1,4 +1,56 @@
+const buildCustomOrderButton = function (
+  offer,
+  container
+) {
+  return ourCoffeeSdk.OfferPanelComponent.buildCreateOrderButton(
+    offer,
+    container,
+    {
+      createOrderButtonUrl:
+        offer && offer.createOrderButtonIcon,
+      createOrderButtonText:
+        (offer &&
+          `Buy now for just ${offer.price.formattedValue}`) ||
+        "Place an Order"
+    }
+  );
+};
+
+class CustomComposer extends ourCoffeeSdk.SearchBoxComposer {
+  generateOfferPreviews(offerList) {
+    const result = super.generateOfferPreviews(
+      offerList
+    );
+    return result === null
+      ? result
+      : result.map((preview, index) => ({
+          ...preview,
+          imageUrl: offerList[index].place.icon
+        }));
+  }
+
+  generateCurrentOfferFullView(offer, options) {
+    return offer === null
+      ? offer
+      : {
+          ...super.generateCurrentOfferFullView(
+            offer,
+            options
+          ),
+          createOrderButtonIcon: offer.place.icon
+        };
+  }
+}
+
 class CustomSearchBox extends ourCoffeeSdk.SearchBox {
+  buildComposer(context, container, options) {
+    return new CustomComposer(
+      context,
+      container,
+      options
+    );
+  }
+
   createOrder(offer) {
     alert(`Isn't actually implemented (yet)`);
     return super.createOrder(offer);
@@ -7,6 +59,16 @@ class CustomSearchBox extends ourCoffeeSdk.SearchBox {
 
 const searchBox = new CustomSearchBox(
   document.getElementById("search-box"),
-  ourCoffeeSdk.dummyCoffeeApi
+  ourCoffeeSdk.dummyCoffeeApi,
+  {
+    offerPanel: {
+      buttonBuilders: [
+        buildCustomOrderButton,
+        ourCoffeeSdk.OfferPanelComponent
+          .buildCloseButton
+      ],
+      closeButtonText: "❌Not Now"
+    }
+  }
 );
 searchBox.search("Lungo");