Reward Points Balance Widget

If you have Reward Points set up in the system, the Home -> Reward Points widget displays the Associate's points balance.

If you'd like to customize this widget, you can use the following code example as a starting point for a Custom Widget.

<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();
                
            }]
        };

    }]);