Move product details to extension

Jira Code: IBT-38

Move PDP customization to extension

define(
	'JJ.CustomPDP.PDP'
,   [
		'ProductDetails.SpecsInformation.View', 'underscore', 'Utils', 'Backbone'
	]
,   function (
		ProductDetailsSpecsInformationView, _, Utils, Backbone
	)
{
	'use strict';

	return  {
		mountToApp: function mountToApp (container)
		{

			 var pdp = container.getComponent('PDP');
                var model, productvideos, self = this;
                if (pdp) {

                    pdp.addToViewContextDefinition('ProductDetails.Full.View', 'keyFeatures', 'string', function(context) {
                        model = context.model;
                        var item = model.item;
                        var keyFeatures = !!item.custitem_key_features && Utils.trim(item.getcustitem_key_features) !== ' ' &&
                            item.custitem_key_features || null;
                        return keyFeatures;
                    });

                     pdp.addToViewContextDefinition('ProductDetails.QuickView.View', 'keyFeatures', 'string', function(context) {
                        model = context.model;
                        var item = model.item;
                        var keyFeatures = !!item.custitem_key_features && Utils.trim(item.getcustitem_key_features) !== ' ' &&
                            item.custitem_key_features || null;
                        return keyFeatures;
                    });


                    pdp.addToViewContextDefinition('ProductDetails.Information.View', 'details', 'array', function(context) {
                        var details = context.details;

                        details.push({
                            name: "Product Information",
                            content: '<div data-view="Specs.Information.Content"></div>'
                        });
                        return details;
                    });

                     pdp.addToViewContextDefinition('ProductDetails.Information.View', 'isPhone', 'boolean', function(context) {
                        return SC.Utils.isPhoneDevice();
                    });

                    pdp.addToViewContextDefinition('ProductDetails.Information.View', 'showHeader', 'boolean', function(context) {
                        return false;
                    });

                    pdp.addChildView('Specs.Information.Content', function() {
                        return new ProductDetailsSpecsInformationView({ model: model, application: container });
                    });

                }
		}
	};
});

/*
	© 2017 NetSuite Inc.
	User may not copy, modify, distribute, or re-bundle or otherwise make available this code;
	provided, however, if you are an authorized user with a NetSuite account or log-in, you
	may use this code subject to the terms that govern your access and use.
*/

// @module ProductDetails
define(
	'ProductDetails.SpecsInformation.View'
,	[
		'BrowseByGame.Game.View'
	,	'BrowseByGame.Collection'

	,	'product_details_specsinformation.tpl'
	,	'ProductDetailsSupportFile.View'
	,   'product_details_specsinformation_gamedata.tpl'

    ,   'Backbone.CollectionView'
	,   'AjaxRequestsKiller'

	,	'Backbone'
	,	'Utils'
	,	'underscore'

	]
,	function (

		BrowseByGameGameView
	,	BrowseByGameCollection

	,	product_details_specsinformation_tpl
	,	ProductDetailsSupportFileView
	,	product_details_specsinformation_gamedata_tpl

	,	BackboneCollectionView
	,	AjaxRequestsKiller
	,	Backbone
	,	Utils
	,	_
	)
{
	'use strict';

	// @class ProductDetails.Information.View @extends Backbone.View

	return Backbone.View.extend({

		template: product_details_specsinformation_tpl,

		initialize: function initialize(options) {

			this.model=new Backbone.Model(options.model);
			
			var self = this;

			this.showGames = true;

			this.collection = new BrowseByGameCollection();

			this.collection

			.fetch({
				data: {
					iteminternalid: this.model.get('item').internalid
				}
			,   killerId: AjaxRequestsKiller.getKillerId()
			})

			.done(function() {
				self.isLoading = false;
                self.showGames = self.collection.length;
				self.render();
            })

			.fail(function fail (e) {
				self.isLoading = false;
                self.showGames = false;
				self.render();
				console.log('error', e);
			});

		},

		childViews: {
			'GameCompatibility.Collection': function GameCompatibilityCollection () {
				return new BackboneCollectionView({
					childTemplate: product_details_specsinformation_gamedata_tpl
				,   childView: BrowseByGameGameView
				,   viewsPerRow: 2
				,   collection: this.collection
				})
			},
			'SupportFiles.Information.Content' : function(options) {

				return new ProductDetailsSupportFileView({
					model: this.model
				,	application: this.application
				});
			}
		},

		getContext: function ()	{

			var item = new Backbone.Model(this.model.get('item'));
			//console.log('item',item);
			//@class ProductDetails.Base.View.Context
			return {

				dimensions: !!item.get('custitem_dimensions') && item.get('custitem_dimensions') || false,
				weight: !!item.get('weight') && item.get('weight') || false,
				cardCapacity: !!item.get('custitem_card_capacity') && item.get('custitem_card_capacity') || false,
				gameCompatibility: !!item.get('gameCompatibility') && item.get('gameCompatibility') || false,
                showGames: this.showGames,
                support:!!item.get('custitem_support_information') && item.get('custitem_support_information') || false,
			};
			//@class ProductDetails.Base.View
		}
	})



});


//@class ProductDetails.Information.View.InitializationOptions
//@property {Array<ProductDetails.Information.DataContainer>?} details
//@property {Product.Model} model
//

//TPL
<div class="product-details-specsinformation-content">
    <div class="product-details-specsinformation-content-left">
        <div class="product-details-specsinformation-detail">
            <ul>
                {{#if dimensions}}
                    <li>
                        <div class="product-details-specsinformation-header-details-specs-spec">
                            <label for="">
                                {{ translate 'Dimensions'}}:
                            </label>
                            {{ dimensions }}
                        </div>
                    </li>
                {{/if}}
                {{#if weight}}
                    <li>
                        <div class="product-details-specsinformation-header-details-specs-spec">
                            <label for="">
                                {{ translate 'Weight'}}:
                            </label>
                            {{ weight }} lbs
                        </div>
                    </li>
                {{/if}}
            </ul>
        </div>
        {{#if support}}
            <div class="product-details-specsinformation-support">
                {{{support}}}
            </div>
        {{/if}}
    </div>
    <div class="product-details-specsinformation-content-right">
        {{#if showGames}}
            <div class="product-details-specsinformation-game-compatibility">
                <div class="product-details-specsinformation-game-compatibility-header">
                    <h2>Game Compatibility</h2>
                </div>
                <div data-view="GameCompatibility.Collection"></div>

            </div>
        {{/if}}
        <div class="product-details-specsinformation-support-files">
            <div data-view="SupportFiles.Information.Content"></div>
        </div>
    </div>
</div>

//TPL
<div class="browse-by-game-game-container">
    <div class="browse-by-game-game">
        <a class="browse-by-game-game-link" data-touchpoint="home" data-hashtag="browse-by-game/{{gameId}}">
            <div class="browse-by-game-game-link-name">
                {{name}}
            </div>
        </a>
    </div>
</div>