Example: Reward Points Balance Widget

Admin: Web Office Admin
Page: Code Customization > Custom Widgets
URL: {client_ID}.admin.directscale.com/#/Widgets

If you have Reward Points set up in the system, then this widget can give an associate a quick view of their awarded points balance.

Reward Points Balance WidgetReward Points Balance Widget

You can use the following code as is or as a starting point for something even better!

<script type="text/ng-template" id="SmartShipRewards.tpl.html">
    <div>
        <!-- Front side of flipper. -->
        <div class="card">
            <div id="smartshiprewards">
                <div class="p-10">
                    <div class="card-header bgm-color1 c-white">
                        <h2 class="f-s-24 text-center" translate>smartship_rewards</h2>
                        <div class="smartshiprewardspricecenter">
                          <div class="smartshiprewardsprice bgm-color2">
                              <span ng-show="widgetCtrl.activeTab === 1" ng-bind="(smartShipRewards.Current|number)"></span>
                              <span ng-show="widgetCtrl.activeTab === 2" ng-bind="(smartShipRewards.Pending|number)"></span>
                          </div>
                        </div>
                    </div>
                    <div class="card-body p-b-15 p-r-15">   
                    <div class="row border_top">
                        <div class="p-t-10">
                            <div class="login-btn">
                                <a href="#/c/rewardpoints" class="card-footer card-footer--link">
                                    <svg class="card-footer__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                                        width="24" height="24" viewBox="0 0 24 24">
                                        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
                                    </svg>
                                    <span id="loginsmartshiprewards" translate>smartship_rewards_view_ledger</span>
                                </a>
                            </div>
                            <div class="shop-btn">
                                <a ui-sref="OrderProductList" class="card-footer card-footer--link">
                                    <span id="shopnow" translate class="p-t-3">shop_now</span>
                                </a>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="spinner" ng-class="{'spinner--active': widgetCtrl.loading}"></div>
    </div>
</script>
<custom-smartship-rewards user-id="userId" user="user"></custom-smartship-rewards>
#smartshiprewards {
    .smartshiprewardspricecenter {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .smartshiprewardsprice {
        display: inline-block;
        border-color: red;
        border: 2px black;
        font-size: 26px;
        text-align: center;
        margin-top: 10px;
        background-color: #337ab7;
        border-radius: 30px;
        padding: 5px 15px;
    }
    .p-t-3 {
        padding-top: 3px;
    }
    .login-btn {
        width: 64%;
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        float: left;
    }
    .shop-btn {
        width: 36%;
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        float: left;
    }
    .card-footer--link {
        padding: 0px;
        border: none;
    }
    .card-footer--link .card-footer__icon {
        margin-right: 0px;
    }
      .border_top {
          border-top: 1px solid #cfcfcf;
    }
    .card-body {
        padding: 16px 16px 0px 16px;
    }
    .p-b-15 {
        padding-bottom: 0px !important;
    }
}
module.directive('customSmartshipRewards', [function () {
    return {
        templateUrl: 'SmartShipRewards.tpl.html',
        scope: {
            userId: '=',
            user: '='
        },
        restrict: 'E',
        controllerAs: 'widgetCtrl',
            controller: ['$scope', '$RestService', 'UserService', '$translate', 'flipperService', 'Notification', function ($scope, $RestService, UserService, $translate, flipperService, Notification) {
                var ctrl = this;
                //ctrl.loading = true;
                ctrl.activeTab = 1
                  $scope.smartShipRewards = {Current:0, Pending:0};
                ctrl.getSmartShipRewards = function () {
                    ctrl.loading = true;
                    var request = 'customerId='+ $scope.user.CustomerId;
                    $RestService.V3Get('Orders/RewardBalance').then(function (result) {
                        result = result.data;
                        ctrl.loading = false;                        
                        $scope.smartShipRewards.Current = result < 0 ? 0 : result;
                        
                    }).catch(function (error) {
                        error = error.data;
                        ctrl.loading = false;
                    });
                };
              
              ctrl.getAvailableRewardsPoints = function () {
                    ctrl.loading = true;
                    var request = {
                      customerId :$scope.user.CustomerId
                    };
                    $RestService.DynamicV2PostMethod('api/Orders/GetAvailableRewardPoints', request).then(function (result) {
                        result = result.data;
                        ctrl.loading = false;
                        if (parseInt(result && result.Status, 10) === 0) {                          
                           _.each(result.Data, function(val){ 
                             if(moment(new Date).add(1, 'M').startOf('month').format('DD/MM/YYYY') == moment(val.AvailableDate).format('DD/MM/YYYY')){
                                 $scope.smartShipRewards.Pending += val.Amount;
                             }
                           });
                        }
                    }).catch(function (error) {
                        error = error.data;
                        ctrl.loading = false;
                    });
                };
              
                ctrl.getSmartShipRewards();
                  ctrl.getAvailableRewardsPoints();
                
            }]
        };

    }]);


Note on GetAvailableRewardPoints API Endpoint

In the JavaScript, the code calls api/Orders/GetAvailalbleRewardPoints:

$RestService.DynamicV2PostMethod('api/Orders/GetAvailableRewardPoints', request)

All the GetAvailableRewardPoints endpoint does is reads from the dbo.CRM_RewardPoints table sees which Associate IDs have reward points. It doesn't look at any orders or can't call the Associate's specific reward points balance. You can find the Associates' balance of reward points in the dbo.CRM_RewardPointLedger.

There is no API endpoint that calls the dbo.CRM_RewardPointLedger table's data, although there is a service, IRewardPointsService. If you want to call an Associate's reward point balance, then you must create a custom API that uses the IRewardPointService and its method GetRewardPoints() to get the data from dbo.CRM_RewardPointLedger.

Read more about Creating a Custom API.



Adding String Keys

When using the preceding code, the custom widget will display like the following image when added to Web Office:

Custom WidgetCustom Widget

You'll notice that the text elements aren't ideal. That's because the following string keys need to be added in the Web Office Admin Localization page for the widget to display correctly:

  • Key: smartship_rewards
    • Example Text Value: "Reward Points Balance"
  • Key: smartship_rewards_view_ledger
    • Example Text Value: "History")
  • Key: shop_now
    • Example Text Value: "SHOP NOW"

Did this page help you?