be-components 3.4.5 → 3.4.7

package/lib/commonjs/Share/index.js

@@ -5,45 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Text = _interopRequireDefault(require("../Components/Text"));
 var _reactNative = require("react-native");
+var Clipboard = _interopRequireWildcard(require("expo-clipboard"));
 var _styles = require("../constants/styles");
 var _Components = require("../Components");
-var _colors = _interopRequireDefault(require("../constants/colors"));
 var _api = require("./api");
 var _EmbedPreview = _interopRequireDefault(require("./components/EmbedPreview"));
+var _useColors = require("../constants/useColors");
+var _Themed = require("../Components/Themed");
+var _useContacts = require("../SocialComponents/Contacts/useContacts");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const native_share_options = [{
-  name: 'twitter',
-  getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.TwitterXIcon, {
-    size: 18
-  })
-}, {
-  name: 'instagram',
-  getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.InstagramIcon, {
-    size: 18
-  })
-}, {
-  name: 'facebook',
-  getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.FacebookIcon, {
-    size: 18
-  })
-}, {
-  name: 'moare',
-  getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.MoreIcon, {
-    size: 18,
-    color: _colors.default.brand.midnight
-  })
-}];
+const share_sections = ['header', 'view_link', 'edit_link', 'embed', 'footer'];
 const ShareWidget = ({
   generated_link_id,
   title,
   body,
   redirect_url,
-  maxWidth,
-  maxHeight,
   generator,
   allow_edit,
   player_id,
@@ -52,8 +31,11 @@ const ShareWidget = ({
   type_id,
   embed,
   onCancel,
-  onShare
+  onShare,
+  onSelectContact
 }) => {
+  const Colors = (0, _useColors.useColors)();
+  const Contacts = (0, _useContacts.useContacts)({});
   const [preview_embed, setPreviewEmbed] = (0, _react.useState)(false);
   const [link_height, setLinkHeight] = (0, _react.useState)(0);
   const [active_tab, setActiveTab] = (0, _react.useState)('link');
@@ -75,6 +57,34 @@ const ShareWidget = ({
     update_loading,
     native_share_allowed
   } = link_status;
+  const native_share_options = [{
+    name: 'twitter',
+    getIcon: () => /*#__PURE__*/_react.default.createElement(_Themed.View, {
+      style: {
+        backgroundColor: Colors.text.white,
+        padding: 2,
+        borderRadius: 2
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Components.Icons.TwitterXIcon, {
+      size: 18
+    }))
+  }, {
+    name: 'instagram',
+    getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.InstagramIcon, {
+      size: 18
+    })
+  }, {
+    name: 'facebook',
+    getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.FacebookIcon, {
+      size: 18
+    })
+  }, {
+    name: 'more',
+    getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.MoreIcon, {
+      size: 18,
+      color: Colors.text.h1
+    })
+  }];
   (0, _react.useEffect)(() => {
     if (!redirect_url && !generated_link_id) {
       return;
@@ -134,475 +144,564 @@ const ShareWidget = ({
       url
     });
   };
+  const handleSelectContact = async () => {
+    if (!Contacts.is_available) {
+      return;
+    }
+    if (!Contacts.permission) {
+      return;
+    }
+    if (!Contacts.permission.granted) {
+      if (Contacts.permission.canAskAgain) {
+        Contacts.requestPermissions();
+        return;
+      }
+      return; //We dont have access!!
+    }
+
+    //Ok! Contacts is granted.  Lets select a user
+    const response = await Contacts.getContact();
+    if (!response) {
+      return;
+    } // Sorry we failed
+    const {
+      player,
+      number
+    } = response;
+    onSelectContact({
+      player,
+      number
+    });
+  };
   const renderNativeOptions = data => {
-    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+      transparent: true,
       style: {
-        padding: 5
+        paddingRight: 5
       }
     }, data.item.getIcon());
   };
+  const renderSections = data => {
+    switch (data.item) {
+      case 'header':
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "header",
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 20,
+            borderTopRightRadius: 40,
+            borderTopLeftRadius: 40
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Share Modal"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, title)), /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          title: "X",
+          type: "close",
+          style: {
+            padding: 10
+          },
+          onPress: () => onCancel()
+        }));
+      case 'edit_link':
+        if (!editing || !draft_generated_link) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          type: "row",
+          style: {
+            padding: 20
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          size: 16,
+          theme: "description",
+          weight: "regular"
+        }, "Edit This Link"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Edit the visible Id and query parameters below"))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          type: "row",
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h2"
+        }, "Short Link"), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "https://share.mybe.app/id/"), /*#__PURE__*/_react.default.createElement(_Themed.TextInput, {
+          value: draft_generated_link.visible_id,
+          style: {
+            flex: 1,
+            maxWidth: 150
+          },
+          onChangeText: text => {
+            setLinkStatus({
+              ...link_status,
+              draft_generated_link: {
+                ...draft_generated_link,
+                visible_id: text
+              },
+              visible_id_valid: false
+            });
+          }
+        })))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          type: "row",
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Link Destination"), /*#__PURE__*/_react.default.createElement(_Themed.TextInput, {
+          value: draft_generated_link.redirect_url,
+          multiline: true,
+          style: {
+            marginTop: 4,
+            flex: 1,
+            height: Math.max(link_height, 35)
+          },
+          onContentSizeChange: ev => {
+            setLinkHeight(ev.nativeEvent.contentSize.height);
+          },
+          onChangeText: text => {
+            let new_params = _api.ShareHelpers.extractQueryParams(text);
+            setLinkStatus({
+              ...link_status,
+              draft_generated_link: {
+                ...draft_generated_link,
+                redirect_url: text
+              },
+              query_params: new_params
+            });
+          }
+        })))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "footer",
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          title: "Cancel",
+          type: "error",
+          style: {
+            marginBottom: 10
+          },
+          onPress: () => setLinkStatus({
+            ...link_status,
+            editing: false,
+            draft_generated_link: generated_link
+          })
+        }), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }), needs_verification ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          float: true,
+          title: "Check Link Availability",
+          style: {
+            opacity: update_loading ? 0.5 : 1
+          },
+          loading: update_loading,
+          type: "info",
+          onPress: async () => {
+            setLinkStatus({
+              ...link_status,
+              update_loading: true
+            });
+            const is_available = await _api.ShareApi.isGeneratedLinkAvailable(draft_generated_link);
+            if (!is_available) {
+              setLinkStatus({
+                ...link_status,
+                update_loading: false
+              });
+              return alert('Sorry! This link is not available.  Please change the visible id portion of the link and try again');
+            }
+            setLinkStatus({
+              ...link_status,
+              update_loading: false,
+              visible_id_valid: true
+            });
+          }
+        }) : /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          title: "Save",
+          style: {
+            opacity: link_is_changed && !update_loading ? 1 : 0.5
+          },
+          disabled: !link_is_changed,
+          loading: update_loading,
+          type: "success",
+          onPress: async () => {
+            setLinkStatus({
+              ...link_status,
+              update_loading: true
+            });
+            const new_link = await _api.ShareApi.updateGeneratedLink(draft_generated_link);
+            if (!new_link?.generated_link) {
+              return alert('Unable to update link');
+            }
+            setLinkStatus({
+              ...link_status,
+              update_loading: false,
+              editing: false,
+              generated_link: new_link?.generated_link,
+              draft_generated_link: new_link?.generated_link,
+              url: new_link?.url
+            });
+          }
+        })));
+      case 'view_link':
+        if (!generated_link || active_tab != 'link') {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        if (editing) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            ..._styles.view_styles.section_body
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            paddingBottom: 0
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            ..._styles.view_styles.body_row
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          size: 16,
+          color: Colors.text.h1,
+          weight: "regular"
+        }, "Share this link via")), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginBottom: 10
+          }
+        }, native_share_allowed ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          float: true,
+          style: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            marginRight: 5
+          },
+          onPress: async () => {
+            const share_event = await _api.ShareApi.share(title, body, link_status.url, generated_link.generated_link_id);
+            if (onShare && share_event) {
+              onShare(share_event);
+            }
+          }
+        }, "     ", /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            marginRight: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ShareIcon, {
+          size: 19,
+          color: Colors.text.h1
+        })), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+          horizontal: true,
+          data: native_share_options,
+          keyExtractor: item => item.name,
+          renderItem: renderNativeOptions
+        })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), _reactNative.Platform.OS != 'web' && Contacts.is_available ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          float: true,
+          style: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            marginLeft: 5
+          },
+          onPress: () => handleSelectContact()
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ContactsIcon, {
+          size: 24,
+          color: Colors.text.h1
+        }), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginLeft: 5
+          },
+          theme: "h2"
+        }, "Select Contact")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            paddingTop: 0
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            ..._styles.view_styles.body_row
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          selectable: true,
+          size: 16,
+          color: Colors.text.h1,
+          weight: "regular"
+        }, "Copy link")), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "row",
+          style: {
+            padding: 10
+          }
+        }, url ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            borderRadius: 4
+          },
+          onPress: () => Clipboard.setStringAsync(url)
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.LinkIcon, {
+          size: 18,
+          color: Colors.text.h1
+        }), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginLeft: 4
+          },
+          size: 12,
+          color: Colors.text.h1,
+          textAlign: "left"
+        }, "Copy")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginLeft: 5,
+            flex: 1
+          },
+          theme: "description"
+        }, url), allow_edit ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            borderRadius: 4
+          },
+          onPress: () => setLinkStatus({
+            ...link_status,
+            editing: true
+          })
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.EditIcon, {
+          size: 18,
+          color: Colors.text.h1
+        })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))));
+      case 'view_embed':
+        if (!embed) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, null, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          type: "row",
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          size: 16,
+          theme: "description"
+        }, "Embed this in your website"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "light"
+        }, "Copy and past the code snippet below into the 'body' tag"))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            padding: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          selectable: true,
+          size: 14,
+          theme: "description"
+        }, embed.embed_code), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "row",
+          transparent: true,
+          style: {
+            padding: 5
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+            borderRadius: 4
+          },
+          onPress: () => Clipboard.setStringAsync(embed.embed_code)
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.LinkIcon, {
+          size: 18,
+          color: Colors.text.h1
+        }), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginLeft: 4
+          },
+          size: 12,
+          color: Colors.text.h1,
+          textAlign: "left"
+        }, "Copy")), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1
+          }
+        }), embed.widget_element && embed.script_source && embed.div_id && _reactNative.Platform.OS == 'web' ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          title: preview_embed ? 'Hide Preview' : 'Show Preview',
+          title_color: Colors.text.white,
+          disabled: _reactNative.Platform.OS != 'web' ? true : false,
+          backgroundColor: preview_embed ? Colors.text.error : Colors.text.action,
+          onPress: () => setPreviewEmbed(!preview_embed)
+        }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))), preview_embed && embed.widget_element && embed.script_source && embed.div_id ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          style: {
+            borderWidth: 1,
+            borderRadius: 4
+          }
+        }, /*#__PURE__*/_react.default.createElement(_EmbedPreview.default, {
+          script_source: embed.script_source,
+          widget_element: embed.widget_element,
+          div_id: embed.div_id
+        })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+      case 'footer':
+        return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          type: "footer"
+        }, active_tab == 'embed' ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          transparent: true,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center'
+          },
+          onPress: () => setActiveTab('link')
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginRight: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Share Link Options"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Customize the link and share")), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            height: 30,
+            width: 30,
+            borderRadius: 100,
+            justifyContent: 'center',
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.LinkIcon, {
+          color: Colors.text.h1,
+          size: 18
+        }))) : active_tab == 'link' && embed?.embed_code ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+          transparent: true,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center'
+          },
+          onPress: () => setActiveTab('embed')
+        }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            flex: 1,
+            marginRight: 10
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          theme: "h1"
+        }, "Available For Embed"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+          style: {
+            marginTop: 3
+          },
+          theme: "description"
+        }, "Copy code snippet and paste into the html of your website")), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+          transparent: true,
+          style: {
+            height: 30,
+            width: 30,
+            borderRadius: 100,
+            justifyContent: 'center',
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Components.Icons.EmbedIcon, {
+          color: Colors.text.h1,
+          size: 18
+        }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+      default:
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    }
+  };
   const link_is_changed = JSON.stringify(draft_generated_link) != JSON.stringify(generated_link);
   const needs_verification = link_is_changed && !visible_id_valid;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section,
-      minWidth: 250,
-      maxWidth,
-      maxHeight
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_header,
-      borderBottomWidth: 1,
-      borderColor: _colors.default.shades.shade600
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    theme: "header"
-  }, "Share Modal"), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, title)), /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "X",
-    title_weight: "regular",
-    borderRadius: 100,
-    backgroundColor: _colors.default.shades.shade100,
-    padding: 5,
-    onPress: () => onCancel()
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, null, loading || !generated_link ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
-    style: {
-      padding: 20,
-      alignSelf: 'center'
-    },
-    color: _colors.default.brand.midnight,
-    size: 'large'
-  })) : active_tab == 'link' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, editing && draft_generated_link ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_body
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.body_row
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    size: 16,
-    color: _colors.default.brand.midnight,
-    weight: "regular"
-  }, "Edit This Link"), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, "Edit the visible Id and query parameters below"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      backgroundColor: _colors.default.shades.shade100,
-      padding: 10
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.body_row
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    theme: "header_2"
-  }, "Short Link"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, "https://share.mybe.app/id/"), /*#__PURE__*/_react.default.createElement(_Components.TextInput, {
-    value: draft_generated_link.visible_id,
-    style: {
-      ..._styles.view_styles.input,
-      flex: 1,
-      maxWidth: 150
-    },
-    onChangeText: text => {
-      setLinkStatus({
-        ...link_status,
-        draft_generated_link: {
-          ...draft_generated_link,
-          visible_id: text
-        },
-        visible_id_valid: false
-      });
-    }
-  })))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.body_row
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    theme: "header_2"
-  }, "Link Destination"), /*#__PURE__*/_react.default.createElement(_Components.TextInput, {
-    value: draft_generated_link.redirect_url,
-    multiline: true,
-    style: {
-      ..._styles.view_styles.input,
-      marginTop: 4,
-      flex: 1,
-      height: Math.max(link_height, 35)
-    },
-    onContentSizeChange: ev => {
-      setLinkHeight(ev.nativeEvent.contentSize.height);
-    },
-    onChangeText: text => {
-      let new_params = _api.ShareHelpers.extractQueryParams(text);
-      setLinkStatus({
-        ...link_status,
-        draft_generated_link: {
-          ...draft_generated_link,
-          redirect_url: text
-        },
-        query_params: new_params
-      });
-    }
-  })))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_footer
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "Cancel",
-    title_color: _colors.default.shades.white,
-    borderRadius: 4,
-    backgroundColor: _colors.default.utility.error,
-    onPress: () => setLinkStatus({
-      ...link_status,
-      editing: false,
-      draft_generated_link: generated_link
-    })
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }), needs_verification ? /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "Check Link Availability",
-    title_color: _colors.default.shades.white,
-    style: {
-      opacity: update_loading ? 0.5 : 1
-    },
-    borderRadius: 4,
-    loading: update_loading,
-    backgroundColor: _colors.default.brand.electric,
-    onPress: async () => {
-      setLinkStatus({
-        ...link_status,
-        update_loading: true
-      });
-      const is_available = await _api.ShareApi.isGeneratedLinkAvailable(draft_generated_link);
-      if (!is_available) {
-        setLinkStatus({
-          ...link_status,
-          update_loading: false
-        });
-        return alert('Sorry! This link is not available.  Please change the visible id portion of the link and try again');
-      }
-      setLinkStatus({
-        ...link_status,
-        update_loading: false,
-        visible_id_valid: true
-      });
-    }
-  }) : /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: "Save",
-    style: {
-      opacity: link_is_changed && !update_loading ? 1 : 0.5
-    },
-    disabled: !link_is_changed,
-    loading: update_loading,
-    title_color: _colors.default.shades.white,
-    borderRadius: 4,
-    backgroundColor: _colors.default.utility.success,
-    onPress: async () => {
-      setLinkStatus({
-        ...link_status,
-        update_loading: true
-      });
-      const new_link = await _api.ShareApi.updateGeneratedLink(draft_generated_link);
-      if (!new_link?.generated_link) {
-        return alert('Unable to update link');
-      }
-      setLinkStatus({
-        ...link_status,
-        update_loading: false,
-        editing: false,
-        generated_link: new_link?.generated_link,
-        draft_generated_link: new_link?.generated_link,
-        url: new_link?.url
-      });
-    }
-  }))) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_body
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      paddingBottom: 0
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.body_row
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    size: 16,
-    color: _colors.default.brand.midnight,
-    weight: "regular"
-  }, "Share this link via")), native_share_allowed ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      ..._styles.view_styles.body_row
-    },
-    onPress: async () => {
-      const share_event = await _api.ShareApi.share(title, body, link_status.url, generated_link.generated_link_id);
-      if (onShare && share_event) {
-        onShare(share_event);
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      padding: 3,
-      paddingRight: 10,
-      borderWidth: 1,
-      borderRadius: 22,
-      borderColor: _colors.default.highlights.highlight400Faded,
-      backgroundColor: _colors.default.shades.white,
-      ..._styles.view_styles.float
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      height: 36,
-      width: 36,
-      marginRight: 10,
-      backgroundColor: _colors.default.brand.electric,
-      borderRadius: 100,
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ShareIcon, {
-    size: 14,
-    color: _colors.default.shades.white
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
-    horizontal: true,
-    data: native_share_options,
-    keyExtractor: item => item.name,
-    renderItem: renderNativeOptions
-  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      paddingTop: 0
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.body_row
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    selectable: true,
-    size: 16,
-    color: _colors.default.brand.midnight,
-    weight: "regular"
-  }, "Copy link")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.body_row,
-      padding: 10,
-      borderRadius: 4,
-      borderWidth: 1,
-      borderColor: _colors.default.shades.shade600
-    }
-  }, url ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      backgroundColor: _colors.default.brand.electric,
-      padding: 10,
-      borderRadius: 4
-    },
-    onPress: () => _reactNative.Clipboard.setString(url)
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.LinkIcon, {
-    size: 18,
-    color: _colors.default.shades.white
-  }), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    style: {
-      marginLeft: 4
-    },
-    size: 12,
-    color: _colors.default.shades.white,
-    textAlign: "left"
-  }, "Copy")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    style: {
-      marginLeft: 5,
-      flex: 1
-    },
-    theme: "body"
-  }, url), allow_edit ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      backgroundColor: _colors.default.brand.electric,
-      padding: 10,
-      borderRadius: 4
-    },
-    onPress: () => setLinkStatus({
-      ...link_status,
-      editing: true
-    })
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.EditIcon, {
-    size: 18,
-    color: _colors.default.shades.white
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))))) : active_tab == 'embed' && embed?.embed_code ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.section_body,
-      paddingTop: 0
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.body_row
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    size: 16,
-    color: _colors.default.brand.midnight,
-    weight: "regular"
-  }, "Embed this in your website"), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body_2"
-  }, "Copy and past the code snippet below into the 'body' tag"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      backgroundColor: _colors.default.shades.shade100,
-      padding: 10
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    selectable: true,
-    size: 14,
-    color: _colors.default.brand.midnight
-  }, embed.embed_code), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      ..._styles.view_styles.body_row
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      flexDirection: 'row',
+  return /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    float: true,
+    style: {
+      borderTopRightRadius: 40,
+      borderTopLeftRadius: 40
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+    data: share_sections,
+    renderItem: renderSections,
+    keyExtractor: item => item,
+    key: 'share_section_list'
+  }), loading ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
       alignItems: 'center',
-      backgroundColor: _colors.default.brand.electric,
-      padding: 10,
-      borderRadius: 4
-    },
-    onPress: () => _reactNative.Clipboard.setString(embed.embed_code)
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.LinkIcon, {
-    size: 18,
-    color: _colors.default.shades.white
-  }), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    style: {
-      marginLeft: 4
-    },
-    size: 12,
-    color: _colors.default.shades.white,
-    textAlign: "left"
-  }, "Copy")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1
+      padding: 20
     }
-  }), embed.widget_element && embed.script_source && embed.div_id && _reactNative.Platform.OS == 'web' ? /*#__PURE__*/_react.default.createElement(_Components.Button, {
-    title: preview_embed ? 'Hide Preview' : 'Show Preview',
-    title_color: _colors.default.shades.white,
-    borderRadius: 4,
-    padding: 10,
-    disabled: _reactNative.Platform.OS != 'web' ? true : false,
-    backgroundColor: preview_embed ? _colors.default.utility.error : _colors.default.brand.cyan,
-    onPress: () => setPreviewEmbed(!preview_embed)
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))), preview_embed && embed.widget_element && embed.script_source && embed.div_id ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      borderWidth: 1,
-      borderRadius: 4,
-      borderColor: _colors.default.brand.slate
-    }
-  }, /*#__PURE__*/_react.default.createElement(_EmbedPreview.default, {
-    script_source: embed.script_source,
-    widget_element: embed.widget_element,
-    div_id: embed.div_id
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), active_tab == 'embed' ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      ..._styles.view_styles.section_footer
-    },
-    onPress: () => setActiveTab('link')
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1,
-      marginRight: 10
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    theme: "header"
-  }, "Share Link Options"), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, "Customize the link and share")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      height: 30,
-      width: 30,
-      borderRadius: 100,
-      backgroundColor: _colors.default.shades.white,
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.LinkIcon, {
-    color: _colors.default.brand.midnight,
-    size: 18
-  }))) : active_tab == 'link' && embed?.embed_code ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    style: {
-      ..._styles.view_styles.section_footer
-    },
-    onPress: () => setActiveTab('embed')
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      flex: 1,
-      marginRight: 10
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    theme: "header"
-  }, "Available For Embed"), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    style: {
-      marginTop: 3
-    },
-    theme: "body"
-  }, "Copy code snippet and paste into the html of your website")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      height: 30,
-      width: 30,
-      borderRadius: 100,
-      backgroundColor: _colors.default.shades.white,
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Icons.EmbedIcon, {
-    color: _colors.default.brand.midnight,
-    size: 18
-  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)));
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
+    color: Colors.text.h1,
+    size: 'large'
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
 };
 var _default = exports.default = ShareWidget;
 //# sourceMappingURL=index.js.map