Salesforce VisualForce page for Self Service Returns

visualforcepage.page

<apex:page controller="ShopifyReturnController" showHeader="false" cache="false" standardStylesheets="false" docType="html-5.0">
    <apex:stylesheet value="{!URLFOR($Resource.ShopifyStyle)}"/>
    <apex:includeScript value="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmwIWOi6N0KxJEojRIQRSmgYuMg2MY--Q&libraries=places"/>
    <apex:form id="allForm">
        <script>
            var map;
            function showMap(address) {
                var geocoder = new google.maps.Geocoder();
                console.log('geocode address', address);
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status === 'OK') {
                        console.log('geocode', results[0].geometry);
                        map = new google.maps.Map(document.getElementById('mapId'), {
                          center: results[0].geometry.location,
                          zoom: 13
                        });
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });
                        var service = new google.maps.places.PlacesService(map);
                        service.nearbySearch({
                          location: results[0].geometry.location,
                          radius: 1500,
                          type: ['store']
                        }, callback);
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
                var mapEl = document.getElementById('mapId');
                mapEl.style.display = 'block';
            }
    function callback(results, status) {
        console.log('callback', results)
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }
      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          icon: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
          position: place.geometry.location
        });
      }
        </script>
        <apex:outputPanel layout="block" rendered="{!stepNumber == 1}">
            <div class="rte">
                <div style="margin-left: 300px;">
                    Complete the form below to return your item:<br/><br/>
                    <apex:outputPanel layout="block" style="color: red;" rendered="{!isError}">
                        {!errorMessage}
                        <br/><br/>
                    </apex:outputPanel>
                    Order ID: <br/>
                        <apex:inputText value="{!orderNumber}"> </apex:inputText>
                    <br/>Email: <br/><apex:inputText value="{!email}"></apex:inputText><br/> <br/>
                    <apex:commandButton value="Return Order" action="{!findOrders}"></apex:commandButton>
                </div>
            </div>
        </apex:outputPanel>
        <apex:outputPanel layout="block" rendered="{!stepNumber == 2}">
            <div class="rte">
                <div style="text-align: center;">
                    Why are you returning?<br/><br/>
                </div>
                <apex:dataTable value="{!worderItems}" var="orderItem">
                    <apex:column style="text-align: center; width: 60px; height:40px;" >
                        <apex:inputCheckbox value="{!orderItem.isSelected}">
                            <apex:actionSupport event="onchange" action="{!doForRerender}" />
                        </apex:inputCheckbox>
                    </apex:column>
                    <apex:column style="text-align: center;">
                        <apex:image width="200px" height="200px" value="/servlet/servlet.FileDownload?file={!orderItem.imageId}"/>
                    </apex:column>
                    <apex:column style="text-align: center; width: 100px;">
                        <apex:outputText value="{!orderItem.selectedQantity}" rendered="{!NOT(orderItem.isSelected)}"></apex:outputText>
                        <apex:selectList rendered="{!orderItem.isSelected}" size="1" value="{!orderItem.selectedQantity}">
                            <apex:selectOptions value="{!orderItem.quantityOptions}"/>
                        </apex:selectList>
                    </apex:column>
                    <apex:column style="text-align: center;">
                        <apex:selectList rendered="{!orderItem.isSelected}" size="1" value="{!orderItem.selectedType}">
                            <apex:selectOptions value="{!selectTypeOptions}"/>
                            <apex:actionSupport event="onchange" action="{!doForRerender}" />
                        </apex:selectList>
                        <apex:selectList style="margin-top: 20px;" size="1" rendered="{!AND(orderItem.selectType2Options.size > 0, orderItem.isSelected)}" value="{!orderItem.selectedType2}">
                            <apex:selectOptions value="{!orderItem.selectType2Options}"/>
                        </apex:selectList>
                    </apex:column>
                </apex:dataTable>
                <apex:commandButton value="Return Items" style="float: right; margin-right: 3px;" action="{!doNextSelectOrder}"></apex:commandButton>
            </div>
        </apex:outputPanel>
        <apex:outputPanel layout="block" rendered="{!stepNumber == 3}">
            <div class="rte">
                <div style="text-align: center;">
                    Return Options<br/><br/>
                </div>
                <table style="border: none;">
                    <tbody>
                        <tr>
                            <td style="width: 100px;">  
                                <img src="https://api.zenkraft.com/images/carriers/small/fedex.png" width="70px" />
                            </td>
                            <td style="width: 600px;">
                                <h4>FedEx DropOff - Free</h4>
                                <a href="#" onclick="showMap('{!fromAddress}');">Locations Near Me</a><br /><br /> 
                                <div id="mapId" style="height: 300px;width: 550px;display: none;" ></div>
                            </td>
                            <td>
                                <apex:commandButton value="Get Shipping Label" 
                                    style="float: right;" 
                                    action="{!doGetShippingLabel}">
                                </apex:commandButton>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 100px;">
                                <img src="https://api.zenkraft.com/images/carriers/small/fedex.png" width="70px" />
                            </td>
                            <td>
                                <h4>FedEx Pickup - $4.99 Charge</h4>
                            </td>
                            <td>
                                <input type="button" value="Get Shipping Label" style="float: right;" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </apex:outputPanel>
        <apex:outputPanel layout="block" rendered="{!OR(stepNumber == 4, stepNumber == 5) }">
            <apex:actionFunction name="continueCreateLables" action="{!continueCreateLables}" rerender="allForm"/>
            <script>
                Sfdc.onReady(function() {
                    continueCreateLables();
                });
            </script>
            <div class="rte">
                <div style="text-align: center;">
                    <apex:outputLabel value="Please wait, we are generating your shipping label."/>
                    <img src="/img/loading32.gif" width="30" height="30" style="margin-top: 25px;" />
                </div>
                <apex:outputPanel style="color: red;" layout="block" rendered="{!isError}">
                    {!errorMessage}
                </apex:outputPanel>
            </div>
        </apex:outputPanel>
        <apex:outputPanel layout="block" rendered="{!stepNumber == 6}">
            <div class="rte">
                <div style="text-align: center;">
                    Please pack the item and attach the shipping label below. Then you can drop off the package at your local FedEx Office!<br/><br/>
                </div>
                <input style="float: right;margin-right: 3px;margin-bottom: 5px;" type="button" value="Print this page" onClick="window.print()"/>
                <apex:dataTable value="{!labels}" var="label">
                    <apex:column style="text-align: center;">
                        <apex:image value="/servlet/servlet.FileDownload?file={!label}"/>
                    </apex:column>
                </apex:dataTable>
            </div>
        </apex:outputPanel>
    </apex:form>
</apex:page>