be-components 3.4.6 → 3.4.7

package/src/Components/Icons.tsx

@@ -40,6 +40,23 @@ const RefreshIcon = ({ color, size }:IconProps) => {
     )
 }
 
+const ContactsIcon = ({color, size}:IconProps) => {
+    return (
+        <Svg width={`${size??24}px`} height={`${size??24}px`}  viewBox="0 0 28 28">
+            <G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <G id="contacts-svgrepo-com" transform="translate(2.000000, 2.000000)" stroke={color??Colors.brand.midnight} stroke-width="3">
+                    <Path d="M2.66666667,5.33333333 L2.66666667,2.66666667 C2.66666667,1.19390667 3.86057333,0 5.33333333,0 L13.3333333,0 L21.3333333,0 C22.8061333,0 24,1.19390667 24,2.66666667 L24,5.33333333 L24,18.6666667 L24,21.3333333 C24,22.8061333 22.8061333,24 21.3333333,24 L13.3333333,24 L5.33333333,24 C3.86057333,24 2.66666667,22.8061333 2.66666667,21.3333333 L2.66666667,18.6666667 L2.66666667,5.33333333 Z" id="Path" stroke-linecap="round" stroke-linejoin="round"></Path>
+                    <Path d="M17.3333333,12 C17.3333333,14.2092 15.5425333,16 13.3333333,16 C11.1241333,16 9.33333333,14.2092 9.33333333,12 C9.33333333,9.7908 11.1241333,8 13.3333333,8 C15.5425333,8 17.3333333,9.7908 17.3333333,12 Z" id="Path"></Path>
+                    <Path d="M8,24 C8.56728,20.9237333 10.0266667,20 13.3333333,20 C16.64,20 18.0993333,20.8566667 18.6666667,23.9329333" id="Path" stroke-linecap="round"></Path>
+                    <Line x1="0" y1="5.33333333" x2="2.66666667" y2="5.33333333" id="Path" stroke-linecap="round" stroke-linejoin="round"></Line>
+                    <Line x1="0" y1="18.6666667" x2="2.66666667" y2="18.6666667" id="Path" stroke-linecap="round" stroke-linejoin="round"></Line>
+                    <Line x1="0" y1="12" x2="2.66666667" y2="12" id="Path" stroke-linecap="round" stroke-linejoin="round"></Line>
+                </G>
+            </G>
+        </Svg>
+    )
+}
+
  const SearchIcon = ({ color, size }: IconProps) => {
     const icon_size = size ?? 19
     return (
@@ -1425,6 +1442,7 @@ export default {
     IBTFLowIcon,
     WithdrawIcon,
     DepositIcon,
+    ContactsIcon,
     BankInstantIcon,
     FacebookIcon,
     CreditCardIcon,

package/src/Share/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { FlatList, ActivityIndicator, ScrollView, Platform } from 'react-native';
+import { FlatList, ActivityIndicator, Platform } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
 import { view_styles } from '../constants/styles';
 import { Icons } from '../Components';
@@ -9,7 +9,6 @@ import EmbedPreview from './components/EmbedPreview';
 import { useColors } from '../constants/useColors';
 import { Button, Text, TextInput, View } from '../Components/Themed';
 import { useContacts } from '../SocialComponents/Contacts/useContacts';
-import * as SMS from 'expo-sms';
 
 
 
@@ -31,12 +30,15 @@ type ShareWidgetProps = {
     },
     onCancel:() => void,
     onShare?:(be_event:BEEventProps) => void,
+    onSelectContact:(data:{ player:PublicPlayerProps,number:string }) => void,
     allow_edit?:boolean,
     maxWidth?:number
     maxHeight?:number
 }
 
-const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, maxHeight, generator, allow_edit, player_id, link_type, link_sub_type, type_id, embed, onCancel, onShare }:ShareWidgetProps) => {
+const share_sections = ['header','view_link','edit_link','embed','footer']
+
+const ShareWidget = ({ generated_link_id, title, body, redirect_url, generator, allow_edit, player_id, link_type, link_sub_type, type_id, embed, onCancel, onShare, onSelectContact }:ShareWidgetProps) => {
     const Colors = useColors();
     const Contacts = useContacts({});
     const [ preview_embed, setPreviewEmbed ] = useState(false);
@@ -63,7 +65,7 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
     const { loading, editing, generated_link, draft_generated_link, url, visible_id_valid, update_loading, native_share_allowed } = link_status;
 
     const native_share_options = [
-        { name: 'twitter', getIcon: () => <Icons.TwitterXIcon size={18}/> },
+        { name: 'twitter', getIcon: () => <View style={{ backgroundColor:Colors.text.white, padding:2, borderRadius:2 }}><Icons.TwitterXIcon size={18}/></View> },
         { name: 'instagram', getIcon: () => <Icons.InstagramIcon size={18}/> },
         { name: 'facebook', getIcon:() => <Icons.FacebookIcon size={18} /> },
         { name: 'more', getIcon:() => <Icons.MoreIcon size={18} color={Colors.text.h1} /> }
@@ -118,280 +120,300 @@ const ShareWidget = ({ generated_link_id, title, body, redirect_url, maxWidth, m
         });
     }
 
-    const handleSelectContact = async():Promise<{ player:PublicPlayerProps, number:string, sms_result:string } | undefined> => {
-        if(!Contacts.is_available){ return undefined }
-        if(!Contacts.permission){ return undefined }
+    const handleSelectContact = async():Promise<void> => {
+        if(!Contacts.is_available){ return }
+        if(!Contacts.permission){ return }
         if(!Contacts.permission.granted){
             if(Contacts.permission.canAskAgain){ 
                 Contacts.requestPermissions();
-                return undefined
+                return
             }
             return //We dont have access!!
         }
 
         //Ok! Contacts is granted.  Lets select a user
         const response = await Contacts.getContact();
-        if(!response){ return undefined } // Sorry we failed
-        let avail = await SMS.isAvailableAsync()
-        if(!avail){ return undefined } 
+        if(!response){ return } // Sorry we failed
         const { player, number } = response;
-        const { result } = await SMS.sendSMSAsync(response.number, `${title} ${url}`, {}) 
-        return { player, number, sms_result: result }
+        onSelectContact({ player, number })
     }
 
 
     const renderNativeOptions = (data:{ item:any, index:number }) => {
         return (
-            <View style={{ padding:5 }}>
+            <View transparent style={{ paddingRight:5 }}>
                 {data.item.getIcon()}
             </View>
         )
     }
 
-    const link_is_changed = JSON.stringify(draft_generated_link) != JSON.stringify(generated_link)
-    const needs_verification = link_is_changed && !visible_id_valid
-    return (
-        <View style={{ ...view_styles.section, minWidth:250, maxWidth, maxHeight }}>
-            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='h1'>Share Modal</Text>
-                    <Text style={{ marginTop:3 }} theme='description'>{title}</Text>
-                </View>
-                <Button
-                    title='X'
-                    type='close'
-                    onPress={() => onCancel()}
-                />
-            </View>
-            <ScrollView>
-                {loading || !generated_link ?
-                <View>
-                    <ActivityIndicator style={{ padding:20, alignSelf:'center' }} color={Colors.text.h1} size={'large'} />
-                </View>
-                : active_tab == 'link' ?
-                <View>
-                    {editing && draft_generated_link ?
-                    <View style={{ ...view_styles.section_body }}>
-                        <View style={{ ...view_styles.body_row }}>
-                            <View style={{ flex:1 }}>
-                                <Text size={16} theme='description' weight='regular'>Edit This Link</Text>
-                                <Text style={{ marginTop:3 }} theme='description'>Edit the visible Id and query parameters below</Text>
-                            </View>
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:20, borderTopRightRadius:40, borderTopLeftRadius:40 }}>
+                        <View transparent style={{ flex:1 }}>
+                            <Text theme='h1'>Share Modal</Text>
+                            <Text style={{ marginTop:3 }} theme='description'>{title}</Text>
                         </View>
-                        <View style={{ padding:10 }}>
-                            <View style={{ ...view_styles.body_row }}>
-                                <View style={{ flex:1 }}>
-                                    <Text theme='h2'>Short Link</Text>
-                                    <View style={{ flexDirection:'row', alignItems:'center' }}>
-                                        <Text style={{ marginTop:3 }} theme='description'>https://share.mybe.app/id/</Text>
+                        <Button
+                            title='X'
+                            type='close'
+                            style={{ padding:10 }}
+                            onPress={() => onCancel()}
+                        />
+                    </View>
+                )
+                case 'edit_link':
+                    if(!editing || !draft_generated_link){ return <></> }
+                    return (
+                        <View transparent>
+                            <View transparent type='row' style={{ padding:20 }}>
+                                <View transparent style={{ flex:1 }}>
+                                    <Text size={16} theme='description' weight='regular'>Edit This Link</Text>
+                                    <Text style={{ marginTop:3 }} theme='description'>Edit the visible Id and query parameters below</Text>
+                                </View>
+                            </View>
+                            <View transparent style={{ padding:10 }}>
+                                <View transparent type='row' style={{ padding:10 }}>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme='h2'>Short Link</Text>
+                                        <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                                            <Text style={{ marginTop:3 }} theme='description'>https://share.mybe.app/id/</Text>
+                                            <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
+                                                    })
+                                                }}
+                                            />
+                                        </View>
+                                    </View>
+                                </View>
+                                <View transparent type='row' style={{ padding:10 }}>
+                                    <View transparent style={{ flex:1 }}>
+                                        <Text theme='h1'>Link Destination</Text>
                                         <TextInput
-                                            value={draft_generated_link.visible_id}
-                                            style={{ ...view_styles.input, flex:1, maxWidth:150 }}
+                                            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 = ShareHelpers.extractQueryParams(text);
                                                 setLinkStatus({
                                                     ...link_status,
-                                                    draft_generated_link: { ...draft_generated_link, visible_id: text },
-                                                    visible_id_valid: false
+                                                    draft_generated_link: { ...draft_generated_link, redirect_url: text },
+                                                    query_params: new_params
                                                 })
                                             }}
                                         />
                                     </View>
                                 </View>
                             </View>
-                            <View style={{ ...view_styles.body_row }}>
-                                <View style={{ flex:1 }}>
-                                    <Text theme='h1'>Link Destination</Text>
-                                    <TextInput
-                                        value={draft_generated_link.redirect_url}
-                                        multiline={true}
-                                        style={{ 
-                                            ...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 = ShareHelpers.extractQueryParams(text);
-                                            setLinkStatus({
-                                                ...link_status,
-                                                draft_generated_link: { ...draft_generated_link, redirect_url: text },
-                                                query_params: new_params
-                                            })
-                                        }}
-                                    />
-                                </View>
+                            <View type='footer' style={{ padding:10 }}>
+                                <Button
+                                    title='Cancel'
+                                    type='error'
+                                    style={{ marginBottom:10 }}
+                                    onPress={() => setLinkStatus({ ...link_status, editing: false, draft_generated_link: generated_link })}
+                                />
+                                <View transparent style={{ flex:1 }}/>
+                                {needs_verification ?
+                                <Button
+                                    float
+                                    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 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
+                                        })
+                                    }}
+                                />
+                                :
+                                <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 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
+                                        });
+                                    }}
+                                />
+                                }
                             </View>
                         </View>
-                        <View style={{ ...view_styles.section_footer }}>
-                            <Button
-                                title='Cancel'
-                                type='error'
-                                onPress={() => setLinkStatus({ ...link_status, editing: false, draft_generated_link: generated_link })}
-                            />
-                            <View style={{ flex:1 }}/>
-                            {needs_verification ?
-                            <Button
-                                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 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
-                                    })
-                                }}
-                            />
-                            :
-                            <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 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
-                                    });
-                                }}
-                            />
-                            }
-                        </View>
-                    </View>
-                    :
-                    <View style={{ ...view_styles.section_body }}>
-                        <View style={{ paddingBottom:0 }}>
-                            <View style={{ ...view_styles.body_row }}>
-                                <Text size={16} color={Colors.text.h1} weight='regular'>Share this link via</Text>
+                    )
+                case 'view_link':
+                    if(!generated_link || active_tab != 'link'){ return <></> }
+                    if(editing){ return <></> }
+                    return (
+                        <View style={{ ...view_styles.section_body }}>
+                            <View style={{ paddingBottom:0 }}>
+                                <View style={{ ...view_styles.body_row }}>
+                                    <Text size={16} color={Colors.text.h1} weight='regular'>Share this link via</Text>
+                                </View>
+                                <View style={{ flexDirection:'row', alignItems:'center', marginBottom:10 }}>
+                                {native_share_allowed ? 
+                                <Button float style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10, marginRight:5 }} onPress={async() => {
+                                    const share_event = await ShareApi.share(title, body, link_status.url, generated_link.generated_link_id);
+                                    if(onShare && share_event){ onShare(share_event) }
+                                }}>     <View style={{ marginRight:10 }}>
+                                            <Icons.ShareIcon size={19} color={Colors.text.h1} />
+                                        </View>
+                                        <FlatList
+                                            horizontal
+                                            data={native_share_options}
+                                            keyExtractor={(item) => item.name}
+                                            renderItem={renderNativeOptions}
+                                        />
+                                </Button>
+                                :<></>}
+                                {Platform.OS != 'web' && Contacts.is_available ?
+                                    <Button float style={{ flex:1, flexDirection:'row', alignItems:'center', padding:10, marginLeft:5 }} onPress={() => handleSelectContact()}>
+                                        <Icons.ContactsIcon size={24} color={Colors.text.h1} />
+                                        <Text style={{ marginLeft:5 }} theme='h2'>Select Contact</Text>
+                                    </Button>
+                                :<></>}
+                                </View>
                             </View>
-                            <View style={{ flexDirection:'row', alignItems:'center' }}>
-                            {native_share_allowed ? 
-                            <Button style={{ flex:1, flexDirection:'row' }} onPress={async() => {
-                                const share_event = await ShareApi.share(title, body, link_status.url, generated_link.generated_link_id);
-                                if(onShare && share_event){ onShare(share_event) }
-                            }}>
-                                <View float style={{ flexDirection:'row', alignItems:'center', padding:3, paddingRight:10, borderWidth:1, borderRadius:22 }}>
-                                    <View style={{ height:36, width:36, marginRight:10, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
-                                        <Icons.ShareIcon size={14} color={Colors.text.h1} />
-                                    </View>
-                                    <FlatList
-                                        horizontal
-                                        data={native_share_options}
-                                        keyExtractor={(item) => item.name}
-                                        renderItem={renderNativeOptions}
-                                    />
+                            <View style={{ paddingTop:0, }}>
+                                <View style={{ ...view_styles.body_row }}>
+                                    <Text selectable size={16} color={Colors.text.h1} weight='regular'>Copy link</Text>
+                                </View>
+                                <View type='row' style={{ padding:10 }}>
+                                    {url ?
+                                    <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:4 }} onPress={() => Clipboard.setStringAsync(url)}>
+                                        <Icons.LinkIcon size={18} color={Colors.text.h1} />
+                                        <Text style={{ marginLeft:4 }} size={12} color={Colors.text.h1} textAlign='left'>Copy</Text>
+                                    </Button>
+                                    :<></>}
+                                    <Text style={{ marginLeft:5, flex:1 }} theme='description'>{url}</Text>
+                                    {allow_edit ?
+                                    <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:4 }} onPress={() => setLinkStatus({ ...link_status, editing: true })}>
+                                        <Icons.EditIcon size={18} color={Colors.text.h1} />
+                                    </Button>
+                                    :<></>}
                                 </View>
-                            </Button>
-                            :<></>}
-                            {Platform.OS != 'web' && Contacts.is_available ?
-                            <Button onPress={() => handleSelectContact()}>
-                                <Text>Contacts!</Text>
-                            </Button>
-                            :<></>}
                             </View>
                         </View>
-                        <View style={{ paddingTop:0, }}>
-                            <View style={{ ...view_styles.body_row }}>
-                                <Text selectable size={16} color={Colors.text.h1} weight='regular'>Copy link</Text>
+                    )
+                case 'view_embed':
+                    if(!embed){ return <></> }
+                    return (
+                        <View>
+                        <View transparent type='row' style={{ padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text size={16} theme='description'>Embed this in your website</Text>
+                                <Text style={{ marginTop:3 }} theme='light'>Copy and past the code snippet below into the 'body' tag</Text>
                             </View>
-                            <View type='row' style={{ padding:10 }}>
-                                {url ?
-                                <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:4 }} onPress={() => Clipboard.setStringAsync(url)}>
+                        </View>
+                        <View transparent style={{ padding:10 }}>
+                            <Text selectable size={14} theme='description'>{embed.embed_code}</Text>
+                            <View type='row' transparent style={{ padding:5 }}>
+                                <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:4 }}
+                                onPress={() => Clipboard.setStringAsync(embed.embed_code)}>
                                     <Icons.LinkIcon size={18} color={Colors.text.h1} />
                                     <Text style={{ marginLeft:4 }} size={12} color={Colors.text.h1} textAlign='left'>Copy</Text>
                                 </Button>
-                                :<></>}
-                                <Text style={{ marginLeft:5, flex:1 }} theme='description'>{url}</Text>
-                                {allow_edit ?
-                                <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:4 }} onPress={() => setLinkStatus({ ...link_status, editing: true })}>
-                                    <Icons.EditIcon size={18} color={Colors.text.h1} />
-                                </Button>
+                                <View transparent style={{ flex:1 }} />
+                                {embed.widget_element && embed.script_source && embed.div_id && Platform.OS == 'web' ?
+                                <Button
+                                    title={preview_embed ? 'Hide Preview' : 'Show Preview'}
+                                    title_color={Colors.text.white}
+                                    disabled={Platform.OS != 'web' ? true : false}
+                                    backgroundColor={preview_embed ? Colors.text.error : Colors.text.action}
+                                    onPress={() => setPreviewEmbed(!preview_embed)}
+                                />
                                 :<></>}
                             </View>
                         </View>
-                    </View>
-                    }
-                </View>
-                : active_tab == 'embed' && embed?.embed_code ?
-                <View style={{ ...view_styles.section_body, paddingTop:0 }}>
-                    <View style={{ ...view_styles.body_row }}>
-                        <View style={{ flex:1 }}>
-                            <Text size={16} theme='description'>Embed this in your website</Text>
-                            <Text style={{ marginTop:3 }} theme='light'>Copy and past the code snippet below into the 'body' tag</Text>
+                        
+                        {preview_embed && embed.widget_element && embed.script_source && embed.div_id ?
+                        <View style={{ borderWidth:1, borderRadius:4 }}>
+                            <EmbedPreview
+                                script_source={embed.script_source}
+                                widget_element={embed.widget_element}
+                                div_id={embed.div_id}
+                            />
                         </View>
+                        :<></>}
                     </View>
-                    <View style={{ padding:10 }}>
-                        <Text selectable size={14} theme='description'>{embed.embed_code}</Text>
-                        <View style={{ ...view_styles.body_row }}>
-                            <Button style={{ flexDirection:'row', alignItems:'center', padding:10, borderRadius:4 }}
-                            onPress={() => Clipboard.setStringAsync(embed.embed_code)}>
-                                <Icons.LinkIcon size={18} color={Colors.text.h1} />
-                                <Text style={{ marginLeft:4 }} size={12} color={Colors.text.h1} textAlign='left'>Copy</Text>
+                    )
+                case 'footer':
+                    return (
+                        <View type='footer'>
+                            {active_tab == 'embed' ?
+                            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setActiveTab('link')}>
+                                <View transparent style={{ flex:1, marginRight:10 }}>
+                                    <Text theme='h1'>Share Link Options</Text>
+                                    <Text style={{ marginTop:3 }} theme='description'>Customize the link and share</Text>
+                                </View>
+                                <View transparent style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                                    <Icons.LinkIcon color={Colors.text.h1} size={18}/>
+                                </View>
+                            </Button>
+                            : active_tab == 'link' && embed?.embed_code ?
+                            <Button transparent style={{ flexDirection:'row', alignItems:'center' }} onPress={() => setActiveTab('embed')}>
+                                <View transparent style={{ flex:1, marginRight:10 }}>
+                                    <Text theme='h1'>Available For Embed</Text>
+                                    <Text style={{ marginTop:3 }} theme='description'>Copy code snippet and paste into the html of your website</Text>
+                                </View>
+                                <View transparent style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                                    <Icons.EmbedIcon color={Colors.text.h1} size={18}/>
+                                </View>
                             </Button>
-                            <View style={{ flex:1 }} />
-                            {embed.widget_element && embed.script_source && embed.div_id && Platform.OS == 'web' ?
-                            <Button
-                                title={preview_embed ? 'Hide Preview' : 'Show Preview'}
-                                title_color={Colors.text.white}
-                                disabled={Platform.OS != 'web' ? true : false}
-                                backgroundColor={preview_embed ? Colors.text.error : Colors.text.action}
-                                onPress={() => setPreviewEmbed(!preview_embed)}
-                            />
                             :<></>}
                         </View>
-                    </View>
-                    
-                    {preview_embed && embed.widget_element && embed.script_source && embed.div_id ?
-                    <View style={{ borderWidth:1, borderRadius:4 }}>
-                        <EmbedPreview
-                            script_source={embed.script_source}
-                            widget_element={embed.widget_element}
-                            div_id={embed.div_id}
-                        />
-                    </View>
+                    )
+            default: return <></>
+        }
+    }
 
-                    :<></>}
-                </View>
-                :<></>}
-                {active_tab == 'embed' ?
-                <Button style={{ ...view_styles.section_footer }} onPress={() => setActiveTab('link')}>
-                    <View style={{ flex:1, marginRight:10 }}>
-                        <Text theme='h1'>Share Link Options</Text>
-                        <Text style={{ marginTop:3 }} theme='description'>Customize the link and share</Text>
-                    </View>
-                    <View style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
-                        <Icons.LinkIcon color={Colors.text.h1} size={18}/>
-                    </View>
-                </Button>
-                : active_tab == 'link' && embed?.embed_code ?
-                <Button style={{ ...view_styles.section_footer }} onPress={() => setActiveTab('embed')}>
-                    <View style={{ flex:1, marginRight:10 }}>
-                        <Text theme='h1'>Available For Embed</Text>
-                        <Text style={{ marginTop:3 }} theme='description'>Copy code snippet and paste into the html of your website</Text>
-                    </View>
-                    <View style={{ height:30, width:30, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
-                        <Icons.EmbedIcon color={Colors.text.h1} size={18}/>
-                    </View>
-                </Button>
-                :<></>}
-            </ScrollView>
+    const link_is_changed = JSON.stringify(draft_generated_link) != JSON.stringify(generated_link)
+    const needs_verification = link_is_changed && !visible_id_valid
+    return (
+        <View float style={{ borderTopRightRadius:40, borderTopLeftRadius:40 }}>
+            <FlatList
+                data={share_sections}
+                renderItem={renderSections}
+                keyExtractor={(item) => item}
+                key={'share_section_list'}
+            />
+            {loading ?
+            <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, alignItems:'center', padding:20 }}>
+                <ActivityIndicator color={Colors.text.h1} size={'large'} />
+            </View>
+            :<></>}
         </View>
     )
 }

package/src/Squares/components/SquareOfferCard.tsx

@@ -47,7 +47,7 @@ const SquareOfferCard = ({ player_id, square, player_square, square_offer, away_
             <View style={view_styles.section_body}>
                 <View style={view_styles.body_row}>
                     <Text style={{ flex:1 }} theme='body'>Square</Text>
-                    <Text theme='header_2'>{home_abbr+': '??''}{square.square_score_x}, {away_abbr+': '??''}{square.square_score_y}</Text>
+                    <Text theme='header_2'>{home_abbr??''}: {square.square_score_x}, {away_abbr??''}: {square.square_score_y}</Text>
                 </View>
                 <View style={view_styles.body_row}>
                     <Text style={{ flex:1 }} theme='body'>Purchased For</Text>