From 0b2b3d5df13e4b8df2705c61128299cea7373e60 Mon Sep 17 00:00:00 2001
From: Brian <brian@brianhaas.li>
Date: Sat, 16 Sep 2023 09:34:24 +0200
Subject: [PATCH] ExperimentalOrderMeta / ExperimentalOrderLocalPickupPackages
 / ExperimentalDiscountsMeta: add code snippet
 (https://github.com/woocommerce/woocommerce-blocks/pull/10976)

* ExperimentalOrderMeta add code snippet

* ExperimentalOrderLocalPickupPackages add code snippet

* ExperimentalOrderLocalPickupPackages add code snippet
---
 .../checkout-block/available-slot-fills.md    | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-slot-fills.md b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-slot-fills.md
index d172643c5f8..5d12d7dfbeb 100644
--- a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-slot-fills.md
+++ b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-slot-fills.md
@@ -21,6 +21,32 @@ If you want to add a new SlotFill component, check the [Checkout - Slot Fill doc
 
 This Slot renders below the Checkout summary section and above the "Proceed to Checkout" button in the Cart.
 
+```ts
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { registerPlugin } from '@wordpress/plugins';
+import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
+ 
+const render = () => {
+  return (
+    <ExperimentalOrderMeta>
+      <div class="wc-block-components-totals-wrapper">
+        {
+          __( 'Yearly recurring total ...', 'YOUR-TEXTDOMAIN' )
+        }
+      </div>
+    </ExperimentalOrderMeta>
+  );
+};
+ 
+registerPlugin( 'slot-and-fill-examples', {
+  render,
+  scope: 'woocommerce-checkout',
+} );
+```
+
 Cart:
 
 ![Example of ExperimentalOrderMeta in the Cart block](https://user-images.githubusercontent.com/1628454/154517779-117bb4e4-568e-413c-904c-855fc3450dfa.png)
@@ -63,6 +89,32 @@ Checkout:
 
 This slot renders inside the Checkout Pickup Options block in the Checkout block. It does not render in the Cart block.
 
+```ts
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { registerPlugin } from '@wordpress/plugins';
+import { ExperimentalOrderLocalPickupPackages } from '@woocommerce/blocks-checkout';
+ 
+const render = () => {
+  return (
+    <ExperimentalOrderLocalPickupPackages>
+      <div>
+        {
+          __( 'By using our convenient local pickup option, you can come to our store and pick up your order. We will send you and email when your order is ready for pickup.', 'YOUR-TEXTDOMAIN' )
+        }
+      </div>
+    </ExperimentalOrderLocalPickupPackages>
+  );
+};
+ 
+registerPlugin( 'slot-and-fill-examples', {
+  render,
+  scope: 'woocommerce-checkout',
+} );
+```
+
 Checkout:
 
 ![Example of ExperimentalOrderLocalPickupPackages in the Checkout block](https://user-images.githubusercontent.com/5656702/222814945-a449d016-0621-4a70-b0f4-2ae1ce6487f1.png)
@@ -78,6 +130,32 @@ Checkout:
 
 This slot renders below the `CouponCode` input.
 
+```ts
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { registerPlugin } from '@wordpress/plugins';
+import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
+ 
+const render = () => {
+  return (
+    <ExperimentalDiscountsMeta>
+      <div class="wc-block-components-totals-wrapper">
+        {
+          __( 'You have 98683 coins to spend ...', 'YOUR-TEXTDOMAIN' )
+        }
+      </div>
+    </ExperimentalDiscountsMeta>
+  );
+};
+ 
+registerPlugin( 'slot-and-fill-examples', {
+  render,
+  scope: 'woocommerce-checkout',
+} );
+```
+
 Cart:
 
 ![Cart showing ExperimentalDiscountsMeta location](https://user-images.githubusercontent.com/5656702/122774218-ea27a880-d2a0-11eb-9450-11f119567f26.png)